WEBVTT 00:00.950 --> 00:04.340 Okay, the next thing we're going to take a look at is the 500 error. 00:04.340 --> 00:09.320 And instead of displaying a toast, we're going to redirect them to another component and display the 00:09.320 --> 00:10.760 error inside that component. 00:10.760 --> 00:14.000 And that is how we're going to approach this one. 00:14.000 --> 00:18.530 So back to VS code then and back to our base API TS. 00:18.530 --> 00:22.520 And let's take a look at the case for the 500. 00:22.550 --> 00:25.940 Or in fact, first of all let's go and create the component that we're going to use. 00:25.940 --> 00:28.730 So inside the app folder let's create a new file. 00:28.820 --> 00:31.340 And we'll have it inside an errors folder. 00:31.340 --> 00:37.610 So first of all errors forward slash and then server error dot TSX. 00:37.610 --> 00:43.430 And we'll just use the snippet to get the boilerplate for this react component. 00:43.430 --> 00:47.120 And we will use a container inside here. 00:47.120 --> 00:52.430 So I'll specify container from my material and add its closing tag. 00:53.030 --> 00:55.400 And we'll give this a component type. 00:55.400 --> 00:59.390 And we'll use paper here so that it stands out. 00:59.390 --> 01:04.670 And it gives it the white background by default in material UI or black background. 01:04.700 --> 01:10.990 Of course if we're in dark mode and then we'll use typography and we'll give it a gutter bottom and 01:10.990 --> 01:16.990 we'll give it a variant of H5 and we'll just say server error. 01:17.020 --> 01:23.980 So over in our basic API then inside the case for 500 we'll remove some of the type guard. 01:23.980 --> 01:25.900 We just want to make sure this is an object. 01:25.900 --> 01:30.850 We don't need the title property here because we're not going to use it inside here. 01:30.850 --> 01:33.640 And instead of a toast we're going to make use of our router. 01:33.640 --> 01:38.800 So we'll bring in router from routes forward slash routes. 01:38.800 --> 01:41.560 And then we can use the navigate. 01:41.560 --> 01:44.590 And we can go to and in quotes. 01:44.590 --> 01:47.710 And then forward slash server error. 01:47.710 --> 01:55.060 And what we can also do is add a second parameter to this which contains router navigate option. 01:55.060 --> 02:02.080 And what this allows us to do or will allow us to do is to pass some states to the component that we're 02:02.080 --> 02:05.140 routing to via react Router. 02:05.140 --> 02:10.390 So for the second parameter here we'll open up curly brackets and we'll specify state. 02:10.420 --> 02:13.300 And then we'll specify that we're going to pass an error. 02:13.300 --> 02:16.670 And that error is going to be the response data. 02:16.670 --> 02:20.840 And that's going to be the object that contains the title, the stack trace. 02:20.840 --> 02:24.650 If we're in development mode and the status. 02:24.650 --> 02:29.390 And in order to use that state, we can go to our server error component. 02:29.390 --> 02:33.860 And we can make use of another hook from React Router. 02:34.160 --> 02:43.850 The one we're going to use is called Use Location, as this contains the states that we can pass to 02:43.880 --> 02:45.260 this component. 02:45.890 --> 02:48.320 So let's make use of this inside this component. 02:48.320 --> 02:52.730 Then instead of returning that div we'll use paperless time from material UI. 02:53.180 --> 02:57.650 And we'll check to make sure that we have state dot error. 02:58.070 --> 03:01.760 And we'll use a ternary here and open up parentheses. 03:01.760 --> 03:04.280 And inside here we'll go the error. 03:04.280 --> 03:10.520 So I'm going to use a fragment and then use typography and give it gutter bottom. 03:10.520 --> 03:13.130 We'll give it a variant of H3. 03:13.130 --> 03:15.770 And we'll also just use A6. 03:15.770 --> 03:20.420 And we'll give it some padding left and right of four. 03:20.420 --> 03:27.670 And padding top of two, and we'll give it a color of secondary. 03:27.670 --> 03:34.690 And inside the typography we'll just have the state dot error dot title. 03:34.690 --> 03:40.780 And then below this we'll just use a divider from material UI for the horizontal line. 03:40.780 --> 03:44.080 And then below this we'll add another typography. 03:44.080 --> 03:47.830 And we'll give it a variant of body one. 03:47.830 --> 03:50.860 And we'll use the SE again just to give it some padding. 03:50.860 --> 03:53.590 And we'll give it padding all around of four. 03:53.590 --> 04:02.440 And then inside here we will use the state dot error dot detail and the other side of the ternary. 04:02.440 --> 04:12.850 If we do not have an error object then we'll use typography and give it a variant of H5 and gutter bottom. 04:13.450 --> 04:17.770 And we'll just say server error as we don't have any details about this error. 04:17.770 --> 04:21.430 So we'll just display the H5 there. 04:21.430 --> 04:26.710 So that should be that's then we're going to get the error passed to our server error component via 04:26.710 --> 04:31.890 React Router by using the second parameter in the router, navigate. 04:32.250 --> 04:35.490 And then we'll be able to display that in our server error component. 04:35.520 --> 04:39.180 So let's go take a look and see how we're getting on with this. 04:39.210 --> 04:46.200 So if we click the test 500 error what should happen is we're taken to a server error component. 04:46.590 --> 04:53.820 But what we didn't do and we're using our router functionality here is add the routes that we need for 04:53.820 --> 04:54.000 this. 04:54.000 --> 04:58.830 So we're getting a 404 not found because our router is not aware of the server error. 04:58.830 --> 05:00.180 So let's go back to our code. 05:00.180 --> 05:03.780 And we're going to need to open up our routes dot TSX. 05:03.780 --> 05:06.360 And we'll add another path inside here. 05:06.360 --> 05:10.170 So I'll copy the last one down and change this to server error. 05:10.260 --> 05:16.830 And we need to specify the server error component that we have just created. 05:16.860 --> 05:20.040 So if I go back and test again this time we should get success. 05:20.040 --> 05:22.560 So I'll click on test 500 error. 05:22.560 --> 05:25.530 And this time we get taken to our error page. 05:25.530 --> 05:26.970 We can see the error message. 05:26.970 --> 05:29.160 This is what we defined in the exception. 05:29.160 --> 05:30.990 And then we've got our stacktrace. 05:31.230 --> 05:35.860 Now when it comes to looking at stack traces, they can be a little bit uh, there's a lot of noise 05:35.860 --> 05:36.850 inside here. 05:36.850 --> 05:42.850 And sure there is, but they're actually very useful and very easy to use most of the time. 05:42.850 --> 05:46.300 In fact, all you really need to know is what the error message is. 05:46.330 --> 05:51.700 That's going to give you some information, but then what it's going to tell you is where the exception 05:51.700 --> 05:52.660 was generated from. 05:52.660 --> 05:58.810 So we can see that this was generated from API controllers, buggy controller, the get server error 05:58.810 --> 05:59.590 function. 05:59.590 --> 06:06.100 And it also tells us which line of code was responsible for this particular exception. 06:06.100 --> 06:08.860 So with that bit of information we can go back to our code. 06:08.860 --> 06:13.540 And then we can try and figure out what it is that happened that caused this exception. 06:13.570 --> 06:16.150 The rest of this stuff are who cares. 06:16.150 --> 06:18.070 But this is the important stuff. 06:18.070 --> 06:23.860 Which line of code was responsible for generating the exception and what type of exception it was, 06:23.890 --> 06:29.440 and you should be able to get that from the details just in the first couple of lines of the exception 06:29.440 --> 06:30.250 message. 06:30.760 --> 06:31.510 So great. 06:31.510 --> 06:35.590 That's what we're looking for here to be redirected to a server error component. 06:35.590 --> 06:39.940 What we'll take a look at next is what we're going to do when we encounter a not found. 06:40.450 --> 06:42.880 And we'll configure that in the next lesson.