WEBVTT 00:00.380 --> 00:00.770 Okay. 00:00.770 --> 00:05.270 What we're going to do now is create a component or we've already got a component we're going to use. 00:05.270 --> 00:08.300 We're going to use the about page to demonstrate this. 00:08.300 --> 00:13.460 And we're just going to create a bunch of buttons that we can click on to test the different error responses. 00:13.490 --> 00:19.340 Now sometimes I'm asked is would I do this in a normal production application or a normal application. 00:19.340 --> 00:21.950 That's not just a training course application. 00:21.950 --> 00:23.210 And no, of course not. 00:23.210 --> 00:24.680 That would be a bit weird. 00:24.680 --> 00:30.020 But in a training course, I do think it's useful to have clarity about what we're doing. 00:30.020 --> 00:35.420 And one of the things that we are looking at here, of course, is errors and error handling. 00:35.420 --> 00:43.520 And I just want an easy way for us to create the error responses or generate the error responses from 00:43.520 --> 00:48.830 the API and what we get back from the server so that we can deal with it in the client, because we 00:48.830 --> 00:53.600 need to notify the user when there's been a problem with whatever they've done, or if there's a problem 00:53.600 --> 00:58.790 on the server, we need to notify the user rather than just silently do nothing. 00:58.790 --> 01:04.640 And this is just an easy way for us to visually see the errors and our error handling as we build it 01:04.730 --> 01:06.280 in this application. 01:06.280 --> 01:10.270 So inside our about page then let's make a few changes to the JSX. 01:10.540 --> 01:15.730 Inside here we'll use a container from Mui material. 01:15.730 --> 01:20.650 And inside the container properties we'll just give this a max width of LG. 01:20.650 --> 01:22.480 So I'm going to set that to LG. 01:23.410 --> 01:29.590 Below this we'll use typography and I'll give it gutter bottom to give it a bit of margin at the bottom. 01:29.590 --> 01:32.620 And we'll give this a variance of H3. 01:32.710 --> 01:40.930 And I'll just say errors for testing as the header inside this component below this we're going to have 01:40.930 --> 01:42.550 a button group. 01:42.550 --> 01:45.190 And I'll give this a property of full width. 01:45.190 --> 01:47.590 So it takes up all of its available space. 01:47.590 --> 01:50.620 And then we're going to have a bunch of buttons. 01:50.890 --> 01:54.160 So I'll add the button and its closing tag. 01:54.190 --> 01:56.770 I'll give it a variant of contained. 01:57.010 --> 02:06.100 I'll give it a label of test for 100 error, and I'll also give it an onClick event to trigger the error, 02:06.100 --> 02:11.140 but we need to get in our different hooks that we're going to use for this. 02:11.170 --> 02:19.150 So the way that we use the lazy hooks, I'll say const and then in square brackets I'm going to say 02:19.180 --> 02:22.120 trigger 400 error. 02:22.750 --> 02:28.900 And we'll set this equal to use lazy get 400 error query. 02:28.900 --> 02:34.300 And then to use the method we call this we execute this. 02:34.300 --> 02:39.370 So for instance in this one in this button I would give this an onClick event. 02:39.370 --> 02:42.700 And we want to do something inside here. 02:42.700 --> 02:46.000 So we can see the error outputs into our console. 02:46.000 --> 02:48.400 So I'm going to use the parentheses. 02:48.970 --> 02:53.560 Add the arrow and then use the trigger 400 error. 02:54.130 --> 02:55.210 Add parentheses. 02:55.210 --> 02:58.270 And then we can catch the error inside here. 02:58.720 --> 03:01.870 And we'll get the error which I'll just call error. 03:02.410 --> 03:05.260 And then use an arrow and say console dot log. 03:05.260 --> 03:09.460 And then we'll output the error into the log. 03:09.760 --> 03:12.400 And let's just move that button down. 03:12.430 --> 03:15.620 So I'll move this catch down as well. 03:15.650 --> 03:18.650 Okay, so now nothing's off the edge of the screen. 03:18.650 --> 03:24.230 So this is how we use our lazy hooks that we get from our error API. 03:24.260 --> 03:27.230 And we'll just bring in the rest of these as well. 03:27.230 --> 03:30.350 So I'm just going to copy this down four more times. 03:30.380 --> 03:31.820 Update the trigger. 03:31.820 --> 03:34.610 So the next one will be a 401 error. 03:35.150 --> 03:39.440 And I'll use lazy get 401 error query. 03:39.470 --> 03:43.100 The next one can be the 404 error. 03:43.640 --> 03:48.680 And I'll say use lazy gets 404 error query. 03:49.070 --> 03:57.500 The next one can be the 500 error and update this as well and get the 500 error query in. 03:57.500 --> 04:04.970 And finally we'll have a trigger validation error and we'll utilize that hook as well. 04:04.970 --> 04:09.200 So use lazy get validation error query. 04:09.380 --> 04:11.540 And then we can just create the additional button. 04:11.540 --> 04:17.480 So a bit of copying and pasting a bit of tedious work here I'm afraid to get this stuff set up. 04:17.480 --> 04:23.940 So I'm just going to copy that button several times as well, and then just update the triggers in this 04:23.940 --> 04:25.470 case and the labels for the buttons. 04:25.470 --> 04:27.930 So the next one is going to be a trigger for a one error. 04:28.530 --> 04:31.050 And I'll change the label to 401 error. 04:31.080 --> 04:36.000 The third one can be the trigger for oh four error. 04:36.480 --> 04:38.940 And I'll change this to 404 error. 04:39.150 --> 04:44.220 Then we'll have the 500 error and I'll change the label to 500. 04:44.220 --> 04:49.080 And finally we'll use the trigger validation error. 04:49.080 --> 04:55.200 And we'll test validation error inside there. 04:55.230 --> 05:02.760 So that's what we're aiming for here a bit tedious to type out these buttons to make it somewhat presentable 05:02.760 --> 05:05.460 in our UI just for us for testing these errors. 05:05.460 --> 05:10.980 And if we go back to our application and let's take a look at our about page, then this is what we 05:10.980 --> 05:14.280 should have five different buttons that test different error conditions. 05:14.280 --> 05:19.830 So if I open up the console and go to the console, let's just refresh the page, make sure our console 05:19.830 --> 05:20.700 is clean. 05:20.730 --> 05:28.000 Then if I test a 400 error, What we should get is something like this. 05:28.030 --> 05:34.930 Now I've got a status of passing error here, which is interesting and slightly unusual because that's 05:34.930 --> 05:37.180 not the status I'm looking for. 05:37.210 --> 05:42.400 I would like to see a status of 400 for this like we have up here. 05:42.400 --> 05:47.380 So that's something that we're going to need to think about when we're handling these errors. 05:47.500 --> 05:49.630 And it is something we'll think about of course. 05:49.630 --> 05:52.960 But let's just make sure we get what we expect for each of these different buttons. 05:52.960 --> 05:56.410 We know we've got this weird passing error, something to look at. 05:56.410 --> 06:01.810 And if I test the 401 error, then I get the 401 unauthorized. 06:02.050 --> 06:02.710 Slightly different. 06:02.710 --> 06:04.270 This time I don't get a passing error. 06:04.270 --> 06:05.110 I get the status. 06:05.110 --> 06:06.310 That's what I'm looking for. 06:06.310 --> 06:10.780 And inside the data we can see that we've got a title of unauthorized. 06:10.780 --> 06:13.420 So slightly different formatting for these different errors. 06:13.420 --> 06:14.170 We're coming back. 06:14.170 --> 06:19.330 Something for us to think about and handle when we do get to the point where we're handling these, 06:19.360 --> 06:24.010 if we take a look at a test 404 error, then this gives us the status of 404. 06:24.010 --> 06:29.160 And it gives us the data property with the problem Details not found. 06:29.340 --> 06:30.210 Great. 06:30.240 --> 06:36.210 If we take a look at the test 500 error, then inside here we've got the status of 500. 06:36.210 --> 06:42.660 And in the data, what we should have is the detail, which is the stacktrace of the error, the status 06:42.660 --> 06:43.500 of 500. 06:43.500 --> 06:45.510 And the title tells us what the problem is. 06:45.540 --> 06:51.570 And one more to go just to check the formatting of this, the validation error, we've got a status 06:51.570 --> 06:52.320 of 400. 06:52.350 --> 06:59.310 And in the data what we should find is that we've got an errors object that gives us our two different 06:59.310 --> 07:01.200 validation errors from the server. 07:01.230 --> 07:03.570 So this is what we're working with. 07:03.570 --> 07:06.030 And this is what we need to handle on our client side. 07:06.030 --> 07:08.100 We want to do this centrally in one place. 07:08.100 --> 07:13.890 So we do it once and then we don't need to worry about handling it again in each different function 07:13.890 --> 07:16.170 or feature that we use. 07:16.170 --> 07:20.940 And we'll take a look next at handling a couple of simple errors. 07:20.940 --> 07:26.190 And the way that we'll notify the user is we'll display a toast to them. 07:26.190 --> 07:32.430 So so in the next lesson we'll add a toast library which will help us display toasts to the user.