Okay.
What we're going to do now is create a component or we've already got a component we're going to use.
We're going to use the about page to demonstrate this.
And we're just going to create a bunch of buttons that we can click on to test the different error responses.
Now sometimes I'm asked is would I do this in a normal production application or a normal application.
That's not just a training course application.
And no, of course not.
That would be a bit weird.
But in a training course, I do think it's useful to have clarity about what we're doing.
And one of the things that we are looking at here, of course, is errors and error handling.
And I just want an easy way for us to create the error responses or generate the error responses from
the API and what we get back from the server so that we can deal with it in the client, because we
need to notify the user when there's been a problem with whatever they've done, or if there's a problem
on the server, we need to notify the user rather than just silently do nothing.
And this is just an easy way for us to visually see the errors and our error handling as we build it
in this application.
So inside our about page then let's make a few changes to the JSX.
Inside here we'll use a container from Mui material.
And inside the container properties we'll just give this a max width of LG.
So I'm going to set that to LG.
Below this we'll use typography and I'll give it gutter bottom to give it a bit of margin at the bottom.
And we'll give this a variance of H3.
And I'll just say errors for testing as the header inside this component below this we're going to have
a button group.
And I'll give this a property of full width.
So it takes up all of its available space.
And then we're going to have a bunch of buttons.
So I'll add the button and its closing tag.
I'll give it a variant of contained.
I'll give it a label of test for 100 error, and I'll also give it an onClick event to trigger the error,
but we need to get in our different hooks that we're going to use for this.
So the way that we use the lazy hooks, I'll say const and then in square brackets I'm going to say
trigger 400 error.
And we'll set this equal to use lazy get 400 error query.
And then to use the method we call this we execute this.
So for instance in this one in this button I would give this an onClick event.
And we want to do something inside here.
So we can see the error outputs into our console.
So I'm going to use the parentheses.
Add the arrow and then use the trigger 400 error.
Add parentheses.
And then we can catch the error inside here.
And we'll get the error which I'll just call error.
And then use an arrow and say console dot log.
And then we'll output the error into the log.
And let's just move that button down.
So I'll move this catch down as well.
Okay, so now nothing's off the edge of the screen.
So this is how we use our lazy hooks that we get from our error API.
And we'll just bring in the rest of these as well.
So I'm just going to copy this down four more times.
Update the trigger.
So the next one will be a 401 error.
And I'll use lazy get 401 error query.
The next one can be the 404 error.
And I'll say use lazy gets 404 error query.
The next one can be the 500 error and update this as well and get the 500 error query in.
And finally we'll have a trigger validation error and we'll utilize that hook as well.
So use lazy get validation error query.
And then we can just create the additional button.
So a bit of copying and pasting a bit of tedious work here I'm afraid to get this stuff set up.
So I'm just going to copy that button several times as well, and then just update the triggers in this
case and the labels for the buttons.
So the next one is going to be a trigger for a one error.
And I'll change the label to 401 error.
The third one can be the trigger for oh four error.
And I'll change this to 404 error.
Then we'll have the 500 error and I'll change the label to 500.
And finally we'll use the trigger validation error.
And we'll test validation error inside there.
So that's what we're aiming for here a bit tedious to type out these buttons to make it somewhat presentable
in our UI just for us for testing these errors.
And if we go back to our application and let's take a look at our about page, then this is what we
should have five different buttons that test different error conditions.
So if I open up the console and go to the console, let's just refresh the page, make sure our console
is clean.
Then if I test a 400 error, What we should get is something like this.
Now I've got a status of passing error here, which is interesting and slightly unusual because that's
not the status I'm looking for.
I would like to see a status of 400 for this like we have up here.
So that's something that we're going to need to think about when we're handling these errors.
And it is something we'll think about of course.
But let's just make sure we get what we expect for each of these different buttons.
We know we've got this weird passing error, something to look at.
And if I test the 401 error, then I get the 401 unauthorized.
Slightly different.
This time I don't get a passing error.
I get the status.
That's what I'm looking for.
And inside the data we can see that we've got a title of unauthorized.
So slightly different formatting for these different errors.
We're coming back.
Something for us to think about and handle when we do get to the point where we're handling these,
if we take a look at a test 404 error, then this gives us the status of 404.
And it gives us the data property with the problem Details not found.
Great.
If we take a look at the test 500 error, then inside here we've got the status of 500.
And in the data, what we should have is the detail, which is the stacktrace of the error, the status
of 500.
And the title tells us what the problem is.
And one more to go just to check the formatting of this, the validation error, we've got a status
of 400.
And in the data what we should find is that we've got an errors object that gives us our two different
validation errors from the server.
So this is what we're working with.
And this is what we need to handle on our client side.
We want to do this centrally in one place.
So we do it once and then we don't need to worry about handling it again in each different function
or feature that we use.
And we'll take a look next at handling a couple of simple errors.
And the way that we'll notify the user is we'll display a toast to them.
So so in the next lesson we'll add a toast library which will help us display toasts to the user.