Okay, the next thing we're going to take a look at is the 500 error.
And instead of displaying a toast, we're going to redirect them to another component and display the
error inside that component.
And that is how we're going to approach this one.
So back to VS code then and back to our base API TS.
And let's take a look at the case for the 500.
Or in fact, first of all let's go and create the component that we're going to use.
So inside the app folder let's create a new file.
And we'll have it inside an errors folder.
So first of all errors forward slash and then server error dot TSX.
And we'll just use the snippet to get the boilerplate for this react component.
And we will use a container inside here.
So I'll specify container from my material and add its closing tag.
And we'll give this a component type.
And we'll use paper here so that it stands out.
And it gives it the white background by default in material UI or black background.
Of course if we're in dark mode and then we'll use typography and we'll give it a gutter bottom and
we'll give it a variant of H5 and we'll just say server error.
So over in our basic API then inside the case for 500 we'll remove some of the type guard.
We just want to make sure this is an object.
We don't need the title property here because we're not going to use it inside here.
And instead of a toast we're going to make use of our router.
So we'll bring in router from routes forward slash routes.
And then we can use the navigate.
And we can go to and in quotes.
And then forward slash server error.
And what we can also do is add a second parameter to this which contains router navigate option.
And what this allows us to do or will allow us to do is to pass some states to the component that we're
routing to via react Router.
So for the second parameter here we'll open up curly brackets and we'll specify state.
And then we'll specify that we're going to pass an error.
And that error is going to be the response data.
And that's going to be the object that contains the title, the stack trace.
If we're in development mode and the status.
And in order to use that state, we can go to our server error component.
And we can make use of another hook from React Router.
The one we're going to use is called Use Location, as this contains the states that we can pass to
this component.
So let's make use of this inside this component.
Then instead of returning that div we'll use paperless time from material UI.
And we'll check to make sure that we have state dot error.
And we'll use a ternary here and open up parentheses.
And inside here we'll go the error.
So I'm going to use a fragment and then use typography and give it gutter bottom.
We'll give it a variant of H3.
And we'll also just use A6.
And we'll give it some padding left and right of four.
And padding top of two, and we'll give it a color of secondary.
And inside the typography we'll just have the state dot error dot title.
And then below this we'll just use a divider from material UI for the horizontal line.
And then below this we'll add another typography.
And we'll give it a variant of body one.
And we'll use the SE again just to give it some padding.
And we'll give it padding all around of four.
And then inside here we will use the state dot error dot detail and the other side of the ternary.
If we do not have an error object then we'll use typography and give it a variant of H5 and gutter bottom.
And we'll just say server error as we don't have any details about this error.
So we'll just display the H5 there.
So that should be that's then we're going to get the error passed to our server error component via
React Router by using the second parameter in the router, navigate.
And then we'll be able to display that in our server error component.
So let's go take a look and see how we're getting on with this.
So if we click the test 500 error what should happen is we're taken to a server error component.
But what we didn't do and we're using our router functionality here is add the routes that we need for
this.
So we're getting a 404 not found because our router is not aware of the server error.
So let's go back to our code.
And we're going to need to open up our routes dot TSX.
And we'll add another path inside here.
So I'll copy the last one down and change this to server error.
And we need to specify the server error component that we have just created.
So if I go back and test again this time we should get success.
So I'll click on test 500 error.
And this time we get taken to our error page.
We can see the error message.
This is what we defined in the exception.
And then we've got our stacktrace.
Now when it comes to looking at stack traces, they can be a little bit uh, there's a lot of noise
inside here.
And sure there is, but they're actually very useful and very easy to use most of the time.
In fact, all you really need to know is what the error message is.
That's going to give you some information, but then what it's going to tell you is where the exception
was generated from.
So we can see that this was generated from API controllers, buggy controller, the get server error
function.
And it also tells us which line of code was responsible for this particular exception.
So with that bit of information we can go back to our code.
And then we can try and figure out what it is that happened that caused this exception.
The rest of this stuff are who cares.
But this is the important stuff.
Which line of code was responsible for generating the exception and what type of exception it was,
and you should be able to get that from the details just in the first couple of lines of the exception
message.
So great.
That's what we're looking for here to be redirected to a server error component.
What we'll take a look at next is what we're going to do when we encounter a not found.
And we'll configure that in the next lesson.