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.