1
00:00:00,110 --> 00:00:00,500
All right.

2
00:00:00,500 --> 00:00:03,450
And up next, let's see how we can set up the error page.

3
00:00:03,469 --> 00:00:07,250
Now, error handling is going to be a big part of this project.

4
00:00:07,250 --> 00:00:16,219
So we will return to this topic multiple times because not only we can set up one global error page

5
00:00:16,219 --> 00:00:24,770
for all of the pages, but also we can add the error element for a single page and we can handle errors

6
00:00:24,770 --> 00:00:28,820
differently whether we're fetching or whether we are submitting the form.

7
00:00:28,820 --> 00:00:30,500
So all of that is coming up.

8
00:00:30,500 --> 00:00:31,130
For now.

9
00:00:31,310 --> 00:00:34,310
We're only worried about 404 errors.

10
00:00:34,340 --> 00:00:36,520
Now, what are four over four errors?

11
00:00:36,530 --> 00:00:38,480
Well, essentially it's an error if.

12
00:00:39,340 --> 00:00:42,850
Let's say user is looking for some resource that doesn't exist.

13
00:00:43,510 --> 00:00:47,830
Let's imagine that I navigate to a contact page.

14
00:00:48,470 --> 00:00:50,420
There is no page at the moment.

15
00:00:50,420 --> 00:00:51,980
We'll see this one on the screen.

16
00:00:51,980 --> 00:00:57,830
So this one is coming from React Router and they very nicely explain what do we need to do?

17
00:00:57,980 --> 00:01:06,020
Basically, since at the moment we have the nested route setup, since we have the parent route, we

18
00:01:06,020 --> 00:01:11,150
can nicely add the error element, set up the error page and pretty much.

19
00:01:11,810 --> 00:01:13,400
For all the errors.

20
00:01:13,430 --> 00:01:15,200
Like I said, they will bubble up.

21
00:01:15,200 --> 00:01:21,560
So if there is an error inside of the page, it will bubble up to that global error page.

22
00:01:21,560 --> 00:01:25,280
And again, in our case, we're just really worried about 404.

23
00:01:25,280 --> 00:01:31,510
So if the user cannot find the page and then later we'll discuss other errors as well.

24
00:01:31,520 --> 00:01:34,160
And let's start by navigating to app.

25
00:01:34,160 --> 00:01:37,040
JS So we're looking for the parent.

26
00:01:37,190 --> 00:01:41,450
That's the first one and we want to go with error element, that's the prop.

27
00:01:41,450 --> 00:01:47,090
And then what do we want to display Now if you want, of course you can type here the let's say heading

28
00:01:47,090 --> 00:01:48,680
one with error page.

29
00:01:48,680 --> 00:01:56,870
But a better approach is to set up the separate page since that way we can display a better result and

30
00:01:56,870 --> 00:02:00,310
also handle multiple errors and that type of thing.

31
00:02:00,320 --> 00:02:04,550
So in here, let's look for error page, which we set up.

32
00:02:04,550 --> 00:02:08,810
Let's add a comma so we don't have syntax error and check it out.

33
00:02:08,900 --> 00:02:14,850
Now, if the user is looking for a page that doesn't exist, we display the error page.

34
00:02:14,850 --> 00:02:22,860
Now let's navigate over there and let's see how we can use use a root error, a hook which is provided

35
00:02:22,860 --> 00:02:29,340
by react router dom to get the actual error and the way it's going to look like.

36
00:02:29,340 --> 00:02:37,740
Let's go over here and again, I think I'm going to set up a div so there's going to be a parent since

37
00:02:37,740 --> 00:02:39,660
I want to set up a link as well.

38
00:02:39,660 --> 00:02:44,160
So first we'll grab the link element from React Router.

39
00:02:44,160 --> 00:02:46,110
Dom, where do we want to navigate?

40
00:02:46,110 --> 00:02:47,820
Well, let's say that.

41
00:02:48,290 --> 00:02:50,520
For now, we're just going to go back home.

42
00:02:50,540 --> 00:02:54,410
Eventually this is going to be Dashboard, but let's not worry about it right now.

43
00:02:54,620 --> 00:02:56,620
So let's set up the div over here.

44
00:02:56,630 --> 00:02:58,130
Let's save it again.

45
00:02:58,130 --> 00:03:05,000
We have the semicolon over here and basically, like I said, we have this hook use route error, which

46
00:03:05,000 --> 00:03:09,080
is going to give us an info about the actual error.

47
00:03:09,080 --> 00:03:13,580
So let's go with const error is equal to use route error.

48
00:03:13,610 --> 00:03:16,640
Let's invoke that and for now let's just log it.

49
00:03:16,640 --> 00:03:18,710
And essentially we're doing that.

50
00:03:19,480 --> 00:03:25,810
Because I want to showcase that there are multiple errors that we can have in our application.

51
00:03:25,810 --> 00:03:29,200
So it's not only going to be the 404 errors.

52
00:03:29,200 --> 00:03:34,120
And if I take a look right now at the console, I'll see this object.

53
00:03:34,880 --> 00:03:39,330
And it nicely gives me all of the info I'm looking for.

54
00:03:39,350 --> 00:03:47,210
So basically notice the status is 404 and then the status text is not found and rest of the useful info.

55
00:03:47,210 --> 00:03:52,790
And of course if we'll have a different error, this data is also going to change.

56
00:03:52,940 --> 00:03:59,830
And what's really cool about React router Dom we have multiple ways how we can handle different errors.

57
00:03:59,840 --> 00:04:01,940
So again in order to.

58
00:04:02,590 --> 00:04:04,240
Set up the error page.

59
00:04:04,540 --> 00:04:06,400
We need to look for the parent.

60
00:04:06,430 --> 00:04:14,770
We want to go with error element and we want to set it equal to either component or you can set up straight

61
00:04:14,770 --> 00:04:17,019
up element over here as well.

62
00:04:17,019 --> 00:04:22,840
And inside of that error page, if you want to find out more about the error you want to use, use a

63
00:04:22,840 --> 00:04:23,890
root error.

64
00:04:23,890 --> 00:04:25,360
And for now we're just logging.

65
00:04:25,360 --> 00:04:27,580
But eventually there's going to be more logic.

66
00:04:27,580 --> 00:04:31,930
And in here, if I click on back home, of course, I navigate back to the home page.

67
00:04:31,930 --> 00:04:38,170
So if I'm going to look for about page, which again doesn't exist, same deal, I go to error page

68
00:04:38,170 --> 00:04:41,200
and then I can nicely navigate back home.