[00:00] Before we provide the support for a not found error, let's first create a broken link which is going to make it easier to simulate a not found error. So I have copied the li, just one piece, one element for an employee which is just going to be a non-existent one so 123 123 a string id and let's just write I don't exist at all now after updating the page we would see that for john herzog the employee details would successfully display And when I click the I don't exist, then we're going to get the ATP error status 404, which is expected. Now, this is just the default error page. Now let's walk into the employees back again. So what we can do is to provide the not found component which is going to be a function that returns essentially the part of the view that is going to be put into the outlet for the failing URL.
[01:05] Now we need to verify where does this one walk into and this is certainly this part over here. So this Not Found component just to keep things simple, This could be just this employee doesn't exist or whatever. So after saving this file let's just make sure that the page is reloaded. John Herzog will be displayed correctly And now I don't exist at all. After clicking it, we get the very same error back again.
[01:38] So let me just walk back into the employees. And what's the reason? So we need to be aware of at which level do we actually provide this not found component at? Now we're at this level so let's say that the parent level as compared to the details of a certain employee which would be a child root. Now this is the failing one so this would be the root that we would be actually trying to execute and this is not going to be caught on this level essentially so what we need to do is basically to cut out this one from this component and basically walk into this root definition.
[02:19] So we're going to into src slash root slash employees slash dollar employee ID and finally the index root over here. So I'm just going to cut and paste this not found definition. Now I'll save this file, reload our application back again. We can see that John Herzog works correctly as it did before and when I click I don't exist at all I get the same error again. So let me just go back to employees.
[02:48] Now the thing is for the not found component to work, we need to use a very specific API and this specific API is called not found. So this is a function that is going to create a new error, a very specific error and TanzTagRouter is expecting this error to be thrown in order to use the not found component. So all in all there need to be a moment in the life cycle of the route, and that could be a loader, that this error would be actually thrown. So what we can do is, for instance, to conditionally throw this error. Now, our getEmployeeById function is using the if conditional statement and saying that if our fetch request did receive an error like 400, 500, something like this, then we would walk into this if statement and an error would be thrown.
[03:45] So this promise would essentially fail. So we could use the promise API or use async await Which is going to be slightly simpler to write So what I'm going to do is I'm going to put a try catch statement since I can do it in an async function and here just catch error over here. So what I'm interested in is to return the getEmployeeById but we need to be careful over here since I'm returning a promise but I am not awaiting it. So here I'm just going to return a promise from this function and here I'm also going to return a promise from this function but if this promise gets rejected, if there is an error being thrown, then this would throw within the try catch statement. So essentially, if this promise fails, then this try would catch it.
[04:41] But without the await over here, it wouldn't. Let's just return await getEmployeeById. And what we're going to do if there is a error of course we would need to verify whether this is 404, whether this is 500 or whatever kind of error so here I'm just going to keep things simple so this is just going to be throw not found so we don't have to create a new error we're just using the not found so this is already a new error over here so it would be also quite useful if I actually return this markup from this not found component over here so let me remove this one and we can make another check so let's just reload the application so John Herzog displays the thing that should display and I don't exist at all is going to finally display that this employee doesn't exist. So what is important here is that we are providing the not found component at a very specific level of the application. We need to be aware of the level at which the route is failing.
[05:46] Now this is one possibility to do it. The other possibility would be to walk into the definition of our create router over here. And there are many APIs in Tanstack React router that start with the default. So this could be the default error component, default component, default GC time, etc. Etc.
[06:09] We're going to use the default not found component. So this is going to be essentially used in all the routes unless there is something that is basically overwritten. So let's use the default not found component and this one is going to be, let's say, oh, we just need this return over here and that is going to be this page doesn't exist. Now this is going to be applied pretty much everywhere where there is a not found error. So let's get back here and let's comment this out.
[06:48] Now the loader does potentially throw the not found error and instead of the local not found component we've got the global one. So let's again walk into John Herzog. Let me just reload this application and after walking into I don't exist at all we get the this page doesn't exist so essentially this if it exists it overrides the default
