Okay.
Our next task is to deal with the not found error.
The test 404 error.
Currently, we're displaying a toast and we want to change that to redirect them to a not found component.
So back to VS code.
Let's go to our app folder and the errors folder inside here we'll just right click say New File.
And we'll have a not found dot TSX.
And inside here let's just use the snippet to create the boilerplate.
And inside here let's return some material UI styled JSX.
So we'll use paper again which gives it that white background on the light mode, or black background
in dark mode and inside the paper inside the right angle bracket.
We'll give this the SE property and we'll give this some styling.
We'll give it a height and I'll set this to 400.
We'll use Display and flex.
And the flex direction will give it as column.
We'll justify contents and set that to center.
And we'll also use the align items and set that to center as well.
And we'll just give this some padding all around of six.
So inside the paper will have a big icon, so we'll use the search off.
And it looks like my automatic import for Material icons is working now.
So that's the one we'll use as our icon.
We'll make it self-closing.
Please make sure you've got the correct import in of course from my icons material.
And inside the properties for this we'll give this the SW property, and we'll give it a font size of
100 to make it pretty big.
And we'll give it a color of primary.
And then below this we'll have typography.
And we'll use the gutter bottom property.
And the variant we'll give it H3.
And inside here we'll just say oops we could not find what you were looking for.
And then below the typography we'll just add a button and we'll make it full width.
And we'll give it a components equal to link which we get from React Router Dom.
And we'll just give them the option to go back to the catalog component.
And we'll just say go back to shop.
And of course we need to add this to our roots as well.
So I'll just copy the server error one down.
And this one can be for not dash found.
And we'll make use of the not found component that we've just created.
And what we'll also do if a user tries to access a page that doesn't exist in our components or in our
routes here, will also redirect them to a not found if we don't have a component to redirect them to.
So we'll have another root path.
Below this we'll specify path and this time we'll use a wildcard.
So just inside quotes and asterisks.
And then we'll use elements.
And we're going to use navigate that we get from React Router Dom.
So it's a navigate component.
And we'll make this self-closing.
And we can replace the URL that we're trying to get to and say replace two equals forward slash not
found.
So we redirect them to list components.
And let's head back to our base API now.
So inside the for for case we will simply use the router dot navigate Navigates and we'll send them
to forward slash notfound.
And that completes all of our cases inside our base query with error handling now.
So we're able to handle and respond to any of these type of HTTP error responses.
And if we do encounter a different type of error response from our API, then we can simply come in
here and create a case for it and handle it centrally so that when we get the API response back from
our API server, then this is handling that situation.
It means we do not need to handle it on a case by case basis in our components.
But let's first of all, make sure what we think is going to happen when we click the 404 actually does
happen.
And sure enough, we get taken to the 404 not found.
And if I click around in different components and I try and get to a component that doesn't exist,
I should also be redirected to the not found page as well.
And if we click on the button to go back to the shop, then we get taken back to our catalog.
So great.
That's the error handling side of things done now.
But to finish off this section we're going to take a look at debugging features.
So next we'll take a look at The.net debugger which is an incredibly useful tool.