1
00:00:01,140 --> 00:00:04,800
‫Let's move on to everyone's favorite topic,

2
00:00:04,800 --> 00:00:07,080
‫which is error handling.

3
00:00:07,080 --> 00:00:11,280
‫Well, not really, but error handling is an important part

4
00:00:11,280 --> 00:00:13,350
‫of building web applications

5
00:00:13,350 --> 00:00:18,033
‫and so let's now see how it's done in the new React Router.

6
00:00:19,560 --> 00:00:22,170
‫So with create browser Router

7
00:00:22,170 --> 00:00:26,760
‫whenever there is some error that is thrown in a loader,

8
00:00:26,760 --> 00:00:30,930
‫an action, or simply while rendering a component,

9
00:00:30,930 --> 00:00:34,350
‫we can render an error element instead

10
00:00:34,350 --> 00:00:39,350
‫of these elements here that correspond to the actual pages.

11
00:00:39,570 --> 00:00:42,000
‫So again, if for example,

12
00:00:42,000 --> 00:00:44,580
‫some error happens here in the menu,

13
00:00:44,580 --> 00:00:47,580
‫we can instead of rendering this menu,

14
00:00:47,580 --> 00:00:49,860
‫render an error element

15
00:00:49,860 --> 00:00:54,860
‫and so let's specify that error element first up here.

16
00:00:55,020 --> 00:00:57,300
‫So here in the parent route,

17
00:00:57,300 --> 00:01:00,780
‫because these errors that happen here

18
00:01:00,780 --> 00:01:02,280
‫in these nested routes,

19
00:01:02,280 --> 00:01:05,163
‫they will bubble up to the parent route.

20
00:01:08,610 --> 00:01:13,350
‫So error element and then here, let's use the error

21
00:01:13,350 --> 00:01:14,523
‫that we already have.

22
00:01:18,870 --> 00:01:21,963
‫And then let's of course import that.

23
00:01:28,620 --> 00:01:32,040
‫And then what I want to try first is to render

24
00:01:32,040 --> 00:01:37,040
‫some path that doesn't exist and so there we go.

25
00:01:37,110 --> 00:01:41,640
‫So now we moved immediately here to the error element,

26
00:01:41,640 --> 00:01:45,180
‫which is exactly this one right here.

27
00:01:45,180 --> 00:01:46,830
‫So something went wrong

28
00:01:46,830 --> 00:01:50,340
‫and then here we have this temporary message,

29
00:01:50,340 --> 00:01:51,810
‫but instead of this,

30
00:01:51,810 --> 00:01:56,310
‫we can actually get the actual error message that happened

31
00:01:56,310 --> 00:02:01,290
‫inside React Router by using yet another custom hook.

32
00:02:01,290 --> 00:02:04,530
‫So since we are using this element here,

33
00:02:04,530 --> 00:02:06,963
‫which should actually be called error.

34
00:02:08,040 --> 00:02:13,040
‫So since we are using this as the error element right here,

35
00:02:13,080 --> 00:02:16,710
‫so right here in this property, this element here

36
00:02:16,710 --> 00:02:20,820
‫or actually this component, then this component gets access

37
00:02:20,820 --> 00:02:23,133
‫to the error that has occurred.

38
00:02:25,560 --> 00:02:28,050
‫So let's call it error

39
00:02:28,050 --> 00:02:31,440
‫and we get the error by using useRouteError.

40
00:02:36,720 --> 00:02:40,450
‫All right, then let's log that to the console

41
00:02:42,930 --> 00:02:47,523
‫and let's try that again and here it is.

42
00:02:49,320 --> 00:02:53,793
‫So we have the status, we have the error itself.

43
00:02:56,820 --> 00:02:58,590
‫And we should have some message.

44
00:02:58,590 --> 00:03:02,550
‫So let's see.

45
00:03:02,550 --> 00:03:06,060
‫So usually each error always has a message

46
00:03:06,060 --> 00:03:09,540
‫and so that's the one that we then want to render here.

47
00:03:09,540 --> 00:03:13,680
‫So error.message, but that didn't do anything.

48
00:03:13,680 --> 00:03:17,400
‫So let's do error.data

49
00:03:17,400 --> 00:03:20,853
‫and so here with this we get a nice error message,

50
00:03:21,840 --> 00:03:23,670
‫and then we can click this button here

51
00:03:23,670 --> 00:03:25,740
‫which will simply go back.

52
00:03:25,740 --> 00:03:28,350
‫So it just calls this navigate function here

53
00:03:28,350 --> 00:03:30,210
‫that we already know about.

54
00:03:30,210 --> 00:03:33,093
‫So no need to write the same thing again.

55
00:03:34,620 --> 00:03:36,810
‫But now let's try something else,

56
00:03:36,810 --> 00:03:41,810
‫which is to basically create an error in a loader

57
00:03:41,820 --> 00:03:46,380
‫and the way we can do that is by simply basically changing

58
00:03:46,380 --> 00:03:51,380
‫this URL here or let's try something else like here.

59
00:03:52,500 --> 00:03:54,153
‫So this doesn't really matter.

60
00:03:55,700 --> 00:03:57,783
‫But now as we try to access the menu,

61
00:03:58,710 --> 00:04:02,823
‫then after some time we get all error here.

62
00:04:03,720 --> 00:04:06,423
‫Now for some reason we don't get again the string,

63
00:04:07,410 --> 00:04:10,863
‫so let's just do, try to do another one.

64
00:04:12,570 --> 00:04:15,033
‫Let's see what the error says this time.

65
00:04:15,870 --> 00:04:17,343
‫Well here there's nothing.

66
00:04:21,000 --> 00:04:25,530
‫And yeah, so here we get the failed to fetch error message

67
00:04:25,530 --> 00:04:28,560
‫which is exactly what happened.

68
00:04:28,560 --> 00:04:30,120
‫So let's place that here.

69
00:04:30,120 --> 00:04:32,880
‫So if error.data doesn't exist,

70
00:04:32,880 --> 00:04:37,263
‫then error.message will be displayed.

71
00:04:39,000 --> 00:04:40,560
‫All right.

72
00:04:40,560 --> 00:04:43,800
‫However, now we see that this error message

73
00:04:43,800 --> 00:04:47,730
‫is really completely outside of our layout.

74
00:04:47,730 --> 00:04:50,610
‫So the complete application has been replaced

75
00:04:50,610 --> 00:04:52,470
‫with just this screen here

76
00:04:52,470 --> 00:04:55,590
‫and so that's really not what we want.

77
00:04:55,590 --> 00:04:57,510
‫Instead, in this situation,

78
00:04:57,510 --> 00:05:01,320
‫we want the error to appear within the layout

79
00:05:01,320 --> 00:05:06,320
‫and so we can basically also place the same error element

80
00:05:06,630 --> 00:05:09,243
‫inside of any of these child routes.

81
00:05:10,170 --> 00:05:11,003
‫Now in this case,

82
00:05:11,003 --> 00:05:14,760
‫it only makes sense to place it here because this component

83
00:05:14,760 --> 00:05:18,060
‫is the only one that is loading some data.

84
00:05:18,060 --> 00:05:21,100
‫So only here things can actually go wrong

85
00:05:22,320 --> 00:05:26,100
‫and so as I reload, you immediately see

86
00:05:26,100 --> 00:05:30,300
‫that now the error is nicely within the rest

87
00:05:30,300 --> 00:05:31,893
‫of the application layout.

88
00:05:33,300 --> 00:05:34,773
‫So let's try that again.

89
00:05:36,690 --> 00:05:40,770
‫And it tries for some time and then something went wrong

90
00:05:40,770 --> 00:05:44,580
‫and then we get our error message.

91
00:05:44,580 --> 00:05:48,570
‫Nice and this is really all that I wanted to show you here.

92
00:05:48,570 --> 00:05:53,570
‫So this is the very basic and most straightforward way

93
00:05:53,820 --> 00:05:58,820
‫of dealing with errors using the new React Router.

94
00:05:59,550 --> 00:06:02,730
‫So basically using the error element property

95
00:06:02,730 --> 00:06:06,030
‫that we can define on each of the routes,

96
00:06:06,030 --> 00:06:09,780
‫it's just important to notice that each of these errors here

97
00:06:09,780 --> 00:06:12,270
‫will bubble up to the parent route

98
00:06:12,270 --> 00:06:15,960
‫unless it is actually handled in the route itself.

99
00:06:15,960 --> 00:06:19,500
‫So by placing error element right on the route

100
00:06:19,500 --> 00:06:21,423
‫where the error might happen.