1
00:00:00,290 --> 00:00:00,800
Okay.

2
00:00:00,920 --> 00:00:08,480
Before we set up our first query with React Query, let me also show you another way how we can handle

3
00:00:08,480 --> 00:00:10,550
errors in the pages.

4
00:00:10,550 --> 00:00:17,510
So yes, we're going back to error handling and effectively this is going to go back to one of the things

5
00:00:17,510 --> 00:00:21,010
I mentioned before where errors are bubbling up.

6
00:00:21,020 --> 00:00:22,370
So here's the deal.

7
00:00:22,400 --> 00:00:26,840
We can actually handle errors on a page level.

8
00:00:26,840 --> 00:00:28,040
So what am I talking about?

9
00:00:28,040 --> 00:00:32,479
Well, for starters, let's go to components and let's create the error element.

10
00:00:32,509 --> 00:00:37,400
Now, this is going to be extremely similar to our error page.

11
00:00:37,400 --> 00:00:43,340
The only difference we're just going to have one heading for, but we'll still log the error in the

12
00:00:43,340 --> 00:00:44,030
same way.

13
00:00:44,060 --> 00:00:46,040
So let's go to components.

14
00:00:46,250 --> 00:00:52,790
I'm going to go with Error Element JS Then let's create our component.

15
00:00:52,850 --> 00:00:56,690
We're looking for the same hook use root error.

16
00:00:56,810 --> 00:00:58,940
So let's navigate up over here.

17
00:01:00,160 --> 00:01:00,790
Or you know what?

18
00:01:00,790 --> 00:01:03,400
I'm just gonna use the auto import, I guess.

19
00:01:03,400 --> 00:01:03,790
So.

20
00:01:03,790 --> 00:01:04,660
Const.

21
00:01:04,870 --> 00:01:10,450
And we're looking for use route and somewhere there we should have error.

22
00:01:10,480 --> 00:01:10,780
Okay.

23
00:01:10,780 --> 00:01:11,500
Awesome.

24
00:01:11,590 --> 00:01:15,400
We definitely want to log it and say, you know what?

25
00:01:15,400 --> 00:01:17,020
It's not going to be errors.

26
00:01:17,350 --> 00:01:18,820
I'm just going to go with error.

27
00:01:18,820 --> 00:01:21,400
And then as far as what we want to display.

28
00:01:22,200 --> 00:01:27,240
Like I said, in this case, it's going to be somewhat simple where we're just going to go with heading

29
00:01:27,240 --> 00:01:31,530
four and we'll just type some message.

30
00:01:31,530 --> 00:01:35,400
So there was an error and then a few dots.

31
00:01:35,670 --> 00:01:36,200
Okay, good.

32
00:01:36,210 --> 00:01:37,410
We're exporting.

33
00:01:38,460 --> 00:01:43,950
I mean, we can set it up here in the index, but we're only going to use it in App.jsx, so it doesn't

34
00:01:43,950 --> 00:01:45,030
really matter.

35
00:01:45,030 --> 00:01:49,020
So what I'm trying to say is we can just keep this export default.

36
00:01:49,050 --> 00:01:50,240
We're good to go.

37
00:01:50,250 --> 00:01:55,410
So once we have this component in place, now let's navigate back to the stats.

38
00:01:55,770 --> 00:01:57,060
So where's my stats page?

39
00:01:57,060 --> 00:01:57,770
Over here.

40
00:01:57,780 --> 00:02:01,650
And then again, let's go over our typical approach.

41
00:02:01,650 --> 00:02:06,210
So pretty much every time we have a loader we set up over here, try and catch.

42
00:02:06,910 --> 00:02:12,220
We make a request and then if there is an error, we do something about it.

43
00:02:12,250 --> 00:02:14,950
Meaning sometimes we navigate to a different page.

44
00:02:14,950 --> 00:02:19,020
Sometimes we display the toast and that type of thing.

45
00:02:19,030 --> 00:02:20,110
But here's the deal.

46
00:02:20,110 --> 00:02:22,120
We can actually skip this part.

47
00:02:22,660 --> 00:02:31,690
I can just set up a code for successful response, and if there is an error, it's going to bubble up.

48
00:02:31,690 --> 00:02:33,010
So you know what?

49
00:02:33,370 --> 00:02:37,990
Actually, I'm just going to take this because I don't want to start everything from scratch.

50
00:02:38,020 --> 00:02:38,290
Okay.

51
00:02:38,290 --> 00:02:39,090
Copy and paste.

52
00:02:39,100 --> 00:02:39,790
Good.

53
00:02:39,790 --> 00:02:43,080
And now let's navigate back to the browser.

54
00:02:43,090 --> 00:02:45,460
Let's just check it out whether everything works again.

55
00:02:45,460 --> 00:02:48,040
I'm going to use my test user and go to stats.

56
00:02:48,070 --> 00:02:49,420
Okay, everything is awesome.

57
00:02:49,420 --> 00:02:55,570
But what happens if let's say I go to a custom fetch and I mess the URL?

58
00:02:56,230 --> 00:02:58,720
Okay, now have something went wrong.

59
00:02:58,720 --> 00:03:04,750
So again, we don't display 404 because this is different type of error, but of course we do see the

60
00:03:04,750 --> 00:03:05,470
error page.

61
00:03:05,470 --> 00:03:06,800
So hopefully that is clear.

62
00:03:06,800 --> 00:03:11,600
So if there's going to be an error, it's going to bubble up to.

63
00:03:11,630 --> 00:03:14,640
Well, let's take a look at the app.jsx.

64
00:03:16,000 --> 00:03:20,260
Remember in here we have the error element for the home layout.

65
00:03:20,620 --> 00:03:26,890
And since that's the parent for all of our pages, that's why we end up over here.

66
00:03:26,890 --> 00:03:33,490
So if there's some kind of error, yes, it will right away trigger this chain of events and eventually

67
00:03:33,490 --> 00:03:36,370
we will end up in some kind of error.

68
00:03:36,370 --> 00:03:43,960
Page Now, the whole point of this video is following where we can actually go to a stats and we can

69
00:03:43,960 --> 00:03:46,740
nicely add over here the error element.

70
00:03:46,750 --> 00:03:51,930
So in a way you can think of it that will just intercept that error.

71
00:03:51,940 --> 00:03:59,740
So again, we go with error element and yes, you can add the same property for all of the pages.

72
00:03:59,860 --> 00:04:01,630
It's totally an option.

73
00:04:01,630 --> 00:04:05,950
So we're going to go here with error element and we can either hard code.

74
00:04:05,950 --> 00:04:11,050
So I'll start by simply hard coding and yep, I'll write the same thing.

75
00:04:11,050 --> 00:04:18,560
There was an error dot, dot dot and of course since we set up the component, you can probably already

76
00:04:18,560 --> 00:04:20,570
guess what we're going to do next.

77
00:04:20,570 --> 00:04:21,890
So check it out.

78
00:04:21,920 --> 00:04:25,580
Now we're actually displaying, Hey, listen, there was some kind of error.

79
00:04:25,610 --> 00:04:28,220
Again, we're not navigating away.

80
00:04:28,220 --> 00:04:30,170
We're not displaying a toast.

81
00:04:30,200 --> 00:04:31,190
We simply.

82
00:04:31,690 --> 00:04:33,030
Set up a code.

83
00:04:33,040 --> 00:04:34,220
What do we want to fetch?

84
00:04:34,240 --> 00:04:35,290
What we want to do.

85
00:04:35,290 --> 00:04:41,380
And if there's going to be an error, bam, then we'll right away display our element and notice how

86
00:04:41,380 --> 00:04:48,370
it nicely fits into our layout so we can add this error element property to our page.

87
00:04:48,370 --> 00:04:52,120
And essentially we can still keep the same layout.

88
00:04:52,120 --> 00:04:54,970
So it's not just going to blow up.

89
00:04:55,330 --> 00:04:57,310
We still have the same structure.

90
00:04:57,340 --> 00:05:00,820
The only difference well in this page there is some kind of error.

91
00:05:00,850 --> 00:05:07,270
Now of course you can make a good argument that if we cannot fetch stats, is there really a point for

92
00:05:07,300 --> 00:05:08,650
that user to sit there?

93
00:05:08,770 --> 00:05:10,840
And you'll definitely be correct.

94
00:05:10,840 --> 00:05:16,240
That's why we're trying different approaches where in some pages, if there's an error, we actually

95
00:05:16,240 --> 00:05:17,320
navigate away.

96
00:05:17,320 --> 00:05:18,730
Hopefully that is clear.

97
00:05:19,150 --> 00:05:27,220
And if I can provide over here an element and heading for, I can probably provide here a component.

98
00:05:27,220 --> 00:05:32,450
So let's go here with error and I'm looking for this component.

99
00:05:32,450 --> 00:05:38,360
Like I said, it's only component here in the app.jsx, so it doesn't really matter whether we add it

100
00:05:38,360 --> 00:05:40,040
to index or no.

101
00:05:40,520 --> 00:05:47,480
And the reason why we want to set up the component, well, we can reuse it in multiple pages, correct.

102
00:05:47,480 --> 00:05:51,620
So again, we navigate back and the result is going to be exactly the same.

103
00:05:51,620 --> 00:05:54,740
Only this time we're using component.

104
00:05:54,800 --> 00:06:02,060
Now this is super useful, especially when we start dealing with the React query because there's a gotcha

105
00:06:02,060 --> 00:06:02,930
that I'll cover later.

106
00:06:02,940 --> 00:06:07,670
Long story short, initially data is undefined.

107
00:06:07,670 --> 00:06:12,350
Again, we'll come back to that topic, so don't worry about it too much.

108
00:06:12,380 --> 00:06:16,640
Now, lastly, in this video I want to mention something important.

109
00:06:17,490 --> 00:06:21,510
Once we know how to set up the error element most likely.

110
00:06:21,510 --> 00:06:24,700
Your next question is following What about actions?

111
00:06:24,720 --> 00:06:32,310
For example, in a login page, what if, let's say instead of setting up this try and catch and instead

112
00:06:32,310 --> 00:06:36,930
of using the hook, the use action data?

113
00:06:37,020 --> 00:06:40,140
What if I just want to show the error?

114
00:06:40,410 --> 00:06:42,270
You can definitely do so.

115
00:06:42,390 --> 00:06:48,630
But please keep in mind that notice how pretty much this is what we display right now if there's an

116
00:06:48,630 --> 00:06:49,110
error.

117
00:06:49,200 --> 00:06:56,130
So what I'm saying is at the moment in the login one or pretty much a lot of times when you have action,

118
00:06:56,130 --> 00:06:57,420
you'll have a form.

119
00:06:57,630 --> 00:07:03,420
So if there's some kind of error, for example, 400, what do you want to do?

120
00:07:03,900 --> 00:07:05,760
Do you want to display a toast?

121
00:07:05,790 --> 00:07:11,010
Do you want to display maybe a paragraph with a text or you just want to remove the form and display

122
00:07:11,010 --> 00:07:11,640
the error?

123
00:07:11,970 --> 00:07:14,100
That's why it's possible.

124
00:07:14,100 --> 00:07:15,090
Yeah, for sure.

125
00:07:15,090 --> 00:07:21,430
If there's an error, it will trigger and you'll display the basically element, whether that's heading

126
00:07:21,430 --> 00:07:24,630
four or maybe you have some other stuff.

127
00:07:24,640 --> 00:07:29,760
But just remember that pretty much is going to break your entire layout.

128
00:07:29,770 --> 00:07:31,680
Just something to keep in mind.

129
00:07:31,690 --> 00:07:38,860
But effectively here and there, once we set up React Query, we'll actually use this error element

130
00:07:38,860 --> 00:07:39,670
approach.

131
00:07:39,700 --> 00:07:43,000
Essentially the property we can add on a page.

132
00:07:43,000 --> 00:07:49,720
So if there's some kind of error, basically we go, Hey, listen, there was an error and we display

133
00:07:49,720 --> 00:07:52,000
some error element on the page.