00:00 To handle errors in the username route we're going to go to the username route and let's add this right here. What a terrible ugly looking error so let's make it look nicer. We're going to export a function called error boundary and here we're going to get the error from use route error and that's going to come from

00:19 remix run react right here and then we can console error that error because this can be literally anything. Anything could throw this error and we have not like really any good mechanism for anticipating this error for this

00:36 specific type of error so we can design something much better than what this not nastiness is but we will console error it so that we can look at that as we're debugging. So then we'll return a just a div that has yep all those things thank you copilot. You can design it however you like.

00:55 We're going to say p and there was an error sorry or something again you could design it how you like but there we go we have sorry there was an error that's not good we can improve this later and all that so that's that the difference between this and what we had before is not only does

01:15 it look nicer but it also functions better. So because the way that remix works it actually with the nested routing it allows the rest of the application to continue to work so all these links will still work i can go to all these different places and it's only when i go to the route

01:33 that is busted that i'll actually have this error case and so not only is it that route is where we get the error but also that portion of the ui is where we see the error so everything else will work like when we add our theme toggle right here that theme toggle will still work even though this part of the page is busted

01:52 and this is one of the cool things that remix adds on top of what is available in regular react so react does have the concept of error boundaries but if you server render so like we refresh this page land on this page then yeah we're gonna be in trouble because the there's nothing that react can do to

02:11 kind of reconstruct the rest of the page if there's a error thrown when your component renders for example so let's swap these you're going to have a hard time because react doesn't know how to reconstruct the rest of the document remix kind of you know smooths over this limitation and makes it so the rest of the

02:30 page continues to work so that's pretty cool another thing i want to call out is because our loader is failing so we do this right here and we're going to see that we get the lower case k so that's the username so that's some of the stuff that we covered before with having the meta handle the fact

02:48 that data may not be defined and so it's not going to be because we're throwing this error so we never get a chance to return this data and so that's a great thing we were able to handle that case where the user's data was not loaded and so we fall back to the param so that's cool if i switch this back then we'll see that the

03:06 cody k gets uppercase so the loader does successfully run our meta function gets all its data but then we have an error right here so another thing i want to call out is the fact that well this is going to handle errors that are thrown in send to the render it's not going to handle all errors

03:24 so if i were to add a button and say hello and then on click right here we're going to do this and throw a new error so we say that we've got this button i click on hello we're not getting anything you'll notice in the console we're getting stuff

03:42 so we take a look at our console output we're getting all these errors right there but we're not going to end up in the error boundary this is intentional and this is the way that react error boundaries work as well they're not going to go to the error boundary just because you had an error in on click handler

04:00 you want to handle that separately if you want it to go to the error boundary you'll have to use state and then like set the state with the error and when that state is there then you can throw it from the render body and there's a package called react error boundary that has a hook that allows you to do this another thing that

04:20 we should probably consider is the react dot use effect situation so if there's an error inside of a use effect here let's do you know no dependency array new ever from use effect save that and we are going to get an error there so

04:39 something inside of the use effect right there is going to to happen but if we put this in a set timeout now this is going to be in a completely separate stack trace from everything else so you know we'll say 10 milliseconds and so in this case yeah we're going to get the error logged here

04:57 um just because that's react is going to catch or that error is going to happen right here but we're not going to be able to catch that because it's an entirely different stack trace there you wouldn't even be able to put a try catch around that so

05:13 there are some categories of errors that you're not going to be able to catch with an error boundary whether it be react or remix but for for those cases you're typically wanting to handle them a little bit especially anyway so that is error boundaries with remix pretty awesome

05:32 you just export the error boundary right here and then you're off to the races