WEBVTT 00:00.410 --> 00:00.680 Okay. 00:00.710 --> 00:03.290 Our next task is to deal with the not found error. 00:03.320 --> 00:04.550 The test 404 error. 00:04.550 --> 00:09.710 Currently, we're displaying a toast and we want to change that to redirect them to a not found component. 00:09.740 --> 00:11.090 So back to VS code. 00:11.090 --> 00:16.850 Let's go to our app folder and the errors folder inside here we'll just right click say New File. 00:16.850 --> 00:20.510 And we'll have a not found dot TSX. 00:20.540 --> 00:25.160 And inside here let's just use the snippet to create the boilerplate. 00:25.160 --> 00:30.530 And inside here let's return some material UI styled JSX. 00:30.830 --> 00:36.950 So we'll use paper again which gives it that white background on the light mode, or black background 00:36.950 --> 00:42.410 in dark mode and inside the paper inside the right angle bracket. 00:42.410 --> 00:46.970 We'll give this the SE property and we'll give this some styling. 00:46.970 --> 00:49.670 We'll give it a height and I'll set this to 400. 00:49.700 --> 00:52.790 We'll use Display and flex. 00:52.790 --> 00:56.930 And the flex direction will give it as column. 00:56.930 --> 01:01.550 We'll justify contents and set that to center. 01:02.000 --> 01:07.130 And we'll also use the align items and set that to center as well. 01:07.130 --> 01:10.850 And we'll just give this some padding all around of six. 01:10.880 --> 01:17.190 So inside the paper will have a big icon, so we'll use the search off. 01:17.190 --> 01:21.420 And it looks like my automatic import for Material icons is working now. 01:21.420 --> 01:24.330 So that's the one we'll use as our icon. 01:24.420 --> 01:25.710 We'll make it self-closing. 01:25.710 --> 01:31.350 Please make sure you've got the correct import in of course from my icons material. 01:31.350 --> 01:39.150 And inside the properties for this we'll give this the SW property, and we'll give it a font size of 01:39.150 --> 01:41.700 100 to make it pretty big. 01:42.210 --> 01:45.210 And we'll give it a color of primary. 01:45.210 --> 01:48.030 And then below this we'll have typography. 01:48.030 --> 01:50.670 And we'll use the gutter bottom property. 01:50.670 --> 01:53.310 And the variant we'll give it H3. 01:53.340 --> 02:03.420 And inside here we'll just say oops we could not find what you were looking for. 02:03.420 --> 02:09.210 And then below the typography we'll just add a button and we'll make it full width. 02:09.210 --> 02:16.230 And we'll give it a components equal to link which we get from React Router Dom. 02:16.380 --> 02:20.970 And we'll just give them the option to go back to the catalog component. 02:21.000 --> 02:24.960 And we'll just say go back to shop. 02:24.960 --> 02:28.230 And of course we need to add this to our roots as well. 02:28.230 --> 02:30.450 So I'll just copy the server error one down. 02:30.450 --> 02:35.310 And this one can be for not dash found. 02:35.820 --> 02:40.650 And we'll make use of the not found component that we've just created. 02:40.650 --> 02:47.250 And what we'll also do if a user tries to access a page that doesn't exist in our components or in our 02:47.250 --> 02:52.470 routes here, will also redirect them to a not found if we don't have a component to redirect them to. 02:52.500 --> 02:56.190 So we'll have another root path. 02:56.190 --> 03:00.030 Below this we'll specify path and this time we'll use a wildcard. 03:00.030 --> 03:02.430 So just inside quotes and asterisks. 03:02.430 --> 03:05.100 And then we'll use elements. 03:05.100 --> 03:10.200 And we're going to use navigate that we get from React Router Dom. 03:10.410 --> 03:12.360 So it's a navigate component. 03:12.360 --> 03:14.310 And we'll make this self-closing. 03:14.310 --> 03:21.570 And we can replace the URL that we're trying to get to and say replace two equals forward slash not 03:21.840 --> 03:22.650 found. 03:23.040 --> 03:26.430 So we redirect them to list components. 03:26.430 --> 03:29.100 And let's head back to our base API now. 03:29.100 --> 03:37.230 So inside the for for case we will simply use the router dot navigate Navigates and we'll send them 03:37.230 --> 03:39.570 to forward slash notfound. 03:39.600 --> 03:46.020 And that completes all of our cases inside our base query with error handling now. 03:46.020 --> 03:52.290 So we're able to handle and respond to any of these type of HTTP error responses. 03:52.290 --> 03:57.210 And if we do encounter a different type of error response from our API, then we can simply come in 03:57.210 --> 04:02.790 here and create a case for it and handle it centrally so that when we get the API response back from 04:02.790 --> 04:06.750 our API server, then this is handling that situation. 04:06.750 --> 04:10.980 It means we do not need to handle it on a case by case basis in our components. 04:10.980 --> 04:16.140 But let's first of all, make sure what we think is going to happen when we click the 404 actually does 04:16.140 --> 04:16.800 happen. 04:16.800 --> 04:21.180 And sure enough, we get taken to the 404 not found. 04:21.180 --> 04:26.640 And if I click around in different components and I try and get to a component that doesn't exist, 04:26.640 --> 04:30.600 I should also be redirected to the not found page as well. 04:30.600 --> 04:36.330 And if we click on the button to go back to the shop, then we get taken back to our catalog. 04:36.420 --> 04:37.080 So great. 04:37.080 --> 04:39.960 That's the error handling side of things done now. 04:39.960 --> 04:44.310 But to finish off this section we're going to take a look at debugging features. 04:44.310 --> 04:48.900 So next we'll take a look at The.net debugger which is an incredibly useful tool.