Error Handling

[00:00] All right, so let's create an artificial error here by trying to look for the dread yacht, which I definitely would like to see what that actually looks like. But that is not a thing, and so we're getting an error. We could take a look at our logs here. We'll see we've got a network error. We're getting a 404. We look at our console, and we'll

[00:18] see that 404 showing up in there. But our users don't have a console that they can open, or maybe they do. Maybe they're on mobile, and so it's not easy to see that. And it's a terrible experience with all that anyway. So we're going to grab our error boundary component from React Error Boundary.

[00:37] We're going to wrap this stuff that can error in an error boundary. Now, remember, the location of your error boundary matters, and so we'll actually play around with that a little bit. And then further down here, we have a ship error that we can use there.

[00:54] So let's start out by actually throwing the error and see what happens there. So if there's an error, let's say let error, or maybe we'll call this reason. I think I call it error. It doesn't really matter either way what you call the variable. But here, we're going to assign the reason over to the error.

[01:13] And if there's a reason for an error, then we'll throw that reason. There you go. And with that then, we save this. Now, we're just going to get the white screen of nothingness. So we are correctly handling, or at least we're throwing the error.

[01:32] Now, we need to declaratively handle what we display when there is an error. Because React is like, yeah, I don't have anything to do with this. If we take a look at our console, we'll see an error right here. Uncaught error, no ship with the name dread yacht, get ship. An error occurred in ship details, and consider adding an error boundary.

[01:50] Oh my goodness, that's exactly what we're going to do, React. Thank you. So let's add our error boundary right here with our fallback. And we'll wrap that up over here, get rid of these, and save. And now, when we have an error, we'll show this handy error boundary. Oh, it looks like the ship is in the shop, the ship shop.

[02:09] This is what the dread yacht looks like. It's very disappointing. But yeah, this is it. We just handle the reason for the error, whatever that reason was. And we throw that if that reason exists. And then we declaratively handle that error with the error boundary. Pretty straightforward.

[02:28] One thing that I'll note here is that I typed this as error. That's probably not entirely accurate, because anything can be thrown. So we're going to type this as unknown, which doesn't actually change much. But it is important to understand that anything can be thrown. In fact, even a promise can be thrown.

[02:47] So this value may not be an error object. It could be just about anything. So we're going to type this as unknown. OK, great. We are throwing our error. We're throwing our promise. If we're not resolved yet, this is looking pretty good.

[00:00] So we've got some really nice declarative pending state going on here, but we need some declarative error state. So here's our error boundary. We pulled that from React error boundary, and we can provide a fallback or a fallback component,

[00:15] and we have our suspense boundary for the suspending component, so we can show some pending UI. So let's say that we have a typo in our ship name. We're going to say we're trying to load the dread yacht, which is funny to me.

[00:33] Then we don't get any sort of feedback to the user. Like, as far as the user is concerned, we're still loading this stuff. Not exactly the experience we want to offer our users, and so we're going to bring in an error boundary to handle that error. Let's go.

Suspense is key to managing async operations declaratively in React. 

It allows you to handle loading states, errors, and other async dependencies more smoothly by rendering a fallback while a promise is pending. 

In this workshop, you'll learn how to:

- Manage loading and errors with Suspense
- Cache promises and use the `useTransition` hook
- Update UI optimistically with `useOptimistic`
- Load images asynchronously with suspense 
- Keep UI responsive with `useDeferredValue`
- Optimize and avoid network waterfalls

Once you're through this workshop you'll have a solid handle on Suspense, which will really improve the UX of your apps and open doors to more advanced patterns in later workshops. 

## Data Fetching

No matter how fast your server is, you need to think about what the user's looking at while they wait. You also need to think about what happens if the request fails.

In this section you'll learn how to manage both of these declaratively in components using `Suspense` and `ErrorBoundary`.

## Dynamic Promises


Here you'll learn how to cache your promises in order to avoid unnecessary re-fetching. 

You'll also learn about transitions and how to make the transition from loading to resolved state smoother using the useTransition hook.


## Optimistic UI

The idea of "Optimistic UI" is based on the belief that most of the time the things your users do will be successful.

In this section you'll discover the useOptimistic hook, which is like useState that actually changes the UI even while it's suspended. 

## Suspense img

Anything async can be suspended, including images! 

This technique involves loading images with promises and using the browser’s native caching system. 

By combining async image loading with Suspense boundaries, you can control rendering fallbacks and ensure images are fully loaded before displaying updated content, avoiding stale UI states

## Responsive

You can run into some problems when using useTransition. For example, if the user is typing in a search box which you're controlling with state, you want to keep the `<input />`'s value up-to-date with what they're typing, not with the previous state while React is waiting for the transition to complete.

So in this section you'll learn how to use the useDeferredValue hook to  display some pending state while also allowing us to display the state that triggered a component to suspend.

## Optimizations

This section is about how to go chasing waterfalls.

Due to the design of Suspense, you can easily create network waterfalls by mistake. 

So what you're really be learning is how to deal with this both on the frontend and the backend. On the front you'll figure out how to trigger requests before use is called. And on the back you'll set cache headers on your responses to tell the client how to cache properly.

Learn how Suspense works under the hood, preparing you for the future of asynchronous state management.

React Suspense

React Suspense

Transcript

Error Handling

Transcript