00:00 We've got ourselves an error boundary on the root. Seems like a pretty good idea. You want to have that on that route for sure, but we've got a bit of a problem. So if I comment this out, we've got an error on the root loader and this looks really awful. Definitely not what I wanted. If we look at the elements tab,

00:19 we'll see we have our div with the container and it's all styled and everything, but our head is completely empty. What is that? Let's look at the view source on this. What, there's no HTML element at all? Aren't we rendering the HTML element right here? Oh, but, okay, that's feigned surprise,

00:40 but the idea, the problem is that yes, we are rendering the HTML, but if there's an error in the loader, then the component won't get rendered. That applies to all the routes, including the root route. So the component's not getting rendered. This is getting rendered instead of the component. That's how it works. And you could imagine why,

01:00 if we throw an error inside of the component itself as well, we're gonna have the exact same problem. And that's because, yeah, we can't render the component. So we can't render the HTML. And so this is definitely a problem. It's not super common, but it's a nice fallback to be able to have an error boundary in your route.

01:19 And I mean, I don't know, this is probably not the best fallback we could come up with. We could probably do better. And yes, we definitely can. So your job is to do better. The idea is you're gonna take all of this stuff, you're gonna move it over to a separate component that will be just called document that our app component will use.

01:39 So like when the loader runs and everything's happy, our app component can use that document component and render all of its stuff. But then we can use that same document component for all the other stuff. And so that way it can load our meta, it can load our links and our scripts and all of that stuff. So the entire page won't be just completely broken.

01:58 So you're gonna refactor stuff a little bit to make a document component. And then you're gonna use that document component both in the app as well as in the error boundary. So give that a run and we will see you when you're finished with that.