00:00 Okay, so first I just got to get this out of the way right here We are lying to ourselves and we're telling TypeScript that no this can absolutely only be a string But no TypeScript is like no no no this could be a form data entry value Or it could be null and if we dive into that further a form data entry value is either a file or a string

00:17 So it can be a file a string or null and if we handled that properly we'd say if Not account type then yeah sure return or really we'd say type of account type is string Then we can do this Uppercase nonsense, and now we don't have an error anymore so Yeah, you don't tell TypeScript to be quiet

00:39 Unless you're making a contrived example for a workshop, so let's handle this error What we're gonna do is add a try catch If you're doing something async then you're just gonna add a dot catch or a second argument to the promise We'll handle that also But you're gonna get the error Or sorry I said a second argument to the then

00:59 Will give you the error that was Where the promise was rejected in any case you're gonna get a way to get the error For something async or in this case. This is a synchronous thing. That's throwing an error So we've got our try catch and so now we've got our error right here And we need to have this error be surfaced so that our error boundary can be displayed

01:19 And so we're going to use the use error boundary hook And that's going to get us the show error show boundary function And let's call this hook. Let's get it from reactor boundary and Then down here. We're going to show the boundary with the error and That will handle This error that's thrown so when I submit

01:41 We're gonna get the error our error boundary is shown like the one we had before which is all configured down here That error boundary error fallback is going to be shown when we have this error So you could do the same sort of thing in like a promise handler and all all those other scenarios

01:56 but the idea is if react isn't handling the error so like event handlers or Callbacks to promises and stuff like that if react cannot handle this error for you you can surface that error Using show boundary another thing to keep in mind is you maybe you don't always want to do this This isn't the sort of thing that you just say well

02:17 Why don't they just do this all the time you may not always want to do this. It's going to be on a case-by-case basis Perhaps you're doing a fire and forget you don't care about the error or perhaps you have some other mechanism for Handling that error like maybe you need to undo some stuff that you did if there was an error like you've got optimistic UI Stuff going on or something like that

02:38 So yeah, this is just one mechanism for handling that error if you want the error boundary to be shown Then you can use show a show boundary from the use error boundary hook from react our battery