Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,370 --> 00:00:05,980
Let me introduce you to error boundaries.
2
00:00:05,980 --> 00:00:09,820
Sometimes something goes wrong in your applications.
3
00:00:09,820 --> 00:00:11,550
And I'm not talking about bugs
4
00:00:11,550 --> 00:00:13,540
you introduced as a developer.
5
00:00:13,540 --> 00:00:15,410
Of course, you should simply fix them,
6
00:00:15,410 --> 00:00:18,790
but sometimes there are errors which you can't prevent
7
00:00:18,790 --> 00:00:22,660
or which are simply being used to transport information
8
00:00:22,660 --> 00:00:24,240
that something went wrong
9
00:00:24,240 --> 00:00:27,073
from one part of the application to another part.
10
00:00:27,930 --> 00:00:31,090
Consider an HTTP request which is being sent.
11
00:00:31,090 --> 00:00:34,650
If the server is temporarily not responding,
12
00:00:34,650 --> 00:00:37,010
the request can't complete
13
00:00:37,010 --> 00:00:41,020
and you will likely end up with an error being generated
14
00:00:41,020 --> 00:00:42,710
in your application.
15
00:00:42,710 --> 00:00:45,920
Now, there is nothing you can do about that as a developer,
16
00:00:45,920 --> 00:00:48,030
servers can be offline.
17
00:00:48,030 --> 00:00:52,100
And there are in general, errors which can't be prevented.
18
00:00:52,100 --> 00:00:55,550
Here, I built a little dummy example.
19
00:00:55,550 --> 00:00:57,650
In the users component,
20
00:00:57,650 --> 00:01:01,280
I added the component that update lifecycle method,
21
00:01:01,280 --> 00:01:04,629
and in there I check if my users prop, which I'm getting,
22
00:01:04,629 --> 00:01:06,160
which is an array of users,
23
00:01:06,160 --> 00:01:08,230
has a length of zero,
24
00:01:08,230 --> 00:01:10,740
which means there are no users.
25
00:01:10,740 --> 00:01:14,480
In which case, I throw a new error.
26
00:01:14,480 --> 00:01:18,090
And that is, of course, a technical thing in JavaScript.
27
00:01:18,090 --> 00:01:20,870
By doing this, by executing this line,
28
00:01:20,870 --> 00:01:23,080
I'm generating an error
29
00:01:23,080 --> 00:01:26,800
and I let this error bubble up the call stack.
30
00:01:26,800 --> 00:01:29,810
So I pass it through all these components,
31
00:01:29,810 --> 00:01:31,810
and if it's not handled anywhere,
32
00:01:31,810 --> 00:01:34,450
this will crash my application.
33
00:01:34,450 --> 00:01:37,040
And you can see this if you add this code
34
00:01:37,040 --> 00:01:39,580
if you run your application.
35
00:01:39,580 --> 00:01:42,950
As long as there are users, everything is fine,
36
00:01:42,950 --> 00:01:44,740
but if I search for something
37
00:01:44,740 --> 00:01:48,110
which is not part of any username,
38
00:01:48,110 --> 00:01:49,300
like in S,
39
00:01:49,300 --> 00:01:51,430
this will crash.
40
00:01:51,430 --> 00:01:54,560
And it crashes with the error I specified
41
00:01:54,560 --> 00:01:58,460
because it's my error which is not being handled.
42
00:01:58,460 --> 00:02:01,380
Now, of course I could just simply not throw an error,
43
00:02:01,380 --> 00:02:03,940
but instead handle this case differently,
44
00:02:03,940 --> 00:02:06,500
but it's also quite common to use errors,
45
00:02:06,500 --> 00:02:08,419
not as a bad thing,
46
00:02:08,419 --> 00:02:11,780
but simply as a way of transporting the information
47
00:02:11,780 --> 00:02:13,250
that something went wrong
48
00:02:13,250 --> 00:02:16,950
from place A to place B in your application.
49
00:02:16,950 --> 00:02:19,210
You can learn more about that, by the way,
50
00:02:19,210 --> 00:02:23,520
learn more about embracing errors in my clean code course
51
00:02:23,520 --> 00:02:24,490
if you want to,
52
00:02:24,490 --> 00:02:25,890
but that's just a side note.
53
00:02:26,730 --> 00:02:31,330
So here I generate an error and I want to generate an error.
54
00:02:31,330 --> 00:02:34,670
Of course, I don't want the entire application to crush,
55
00:02:34,670 --> 00:02:36,590
so what can we do?
56
00:02:36,590 --> 00:02:39,380
In regular JavaScript,
57
00:02:39,380 --> 00:02:42,560
we use, try, catch for this.
58
00:02:42,560 --> 00:02:44,070
We can try some code,
59
00:02:44,070 --> 00:02:47,560
which might fail,
60
00:02:47,560 --> 00:02:52,010
and we catch potential errors when that code executes
61
00:02:52,010 --> 00:02:55,643
to then handle that error and run alternative code.
62
00:02:56,540 --> 00:02:58,520
That's what we can do in JavaScript.
63
00:02:58,520 --> 00:03:00,010
And with react, of course,
64
00:03:00,010 --> 00:03:03,400
we are just writing JavaScript code.
65
00:03:03,400 --> 00:03:08,400
Nonetheless, if an error is generated inside of a component
66
00:03:08,930 --> 00:03:12,410
and we can't handle it in that component though,
67
00:03:12,410 --> 00:03:14,940
let's say we don't wanna handle this error
68
00:03:14,940 --> 00:03:16,450
in the users component,
69
00:03:16,450 --> 00:03:18,800
but in a parent component, instead,
70
00:03:18,800 --> 00:03:21,350
then we can't use try, catch,
71
00:03:21,350 --> 00:03:23,710
because that only works in places
72
00:03:23,710 --> 00:03:27,490
where we write regular JavaScript statements,
73
00:03:27,490 --> 00:03:29,900
and if we throw an error
74
00:03:29,900 --> 00:03:32,640
and we wanna handle it in a parent component,
75
00:03:32,640 --> 00:03:35,790
our problem is that in this case here
76
00:03:35,790 --> 00:03:38,770
the users component is generating that error,
77
00:03:38,770 --> 00:03:42,410
but that is not a regular JavaScript statement here.
78
00:03:42,410 --> 00:03:46,360
Instead here, we have JSX code
79
00:03:46,360 --> 00:03:50,370
and the error is generated inside of that JSX code,
80
00:03:50,370 --> 00:03:52,163
inside of the users component.
81
00:03:53,090 --> 00:03:57,580
Now, we can't wrap this JSX code with try, catch.
82
00:03:57,580 --> 00:04:00,180
Something like this doesn't work,
83
00:04:00,180 --> 00:04:01,960
so that's not an option.
84
00:04:01,960 --> 00:04:03,790
Instead in such a case,
85
00:04:03,790 --> 00:04:07,710
you can build and utilize an error boundary,
86
00:04:07,710 --> 00:04:09,950
and that's what we're going to do now.
87
00:04:09,950 --> 00:04:12,100
For this, I'll add a new component
88
00:04:12,100 --> 00:04:15,570
and I will name it error boundary,
89
00:04:15,570 --> 00:04:17,010
though the name is up to you,
90
00:04:17,010 --> 00:04:19,053
it doesn't have to be named like this.
91
00:04:19,959 --> 00:04:21,519
It's a JavaScript file
92
00:04:21,519 --> 00:04:24,610
and in there I will create a regular component,
93
00:04:24,610 --> 00:04:27,160
which I'll name error boundary.
94
00:04:27,160 --> 00:04:31,000
So let's import component from react
95
00:04:31,000 --> 00:04:33,870
because I will build it as a class-based component
96
00:04:33,870 --> 00:04:37,360
as you can already tell, like this.
97
00:04:37,360 --> 00:04:40,860
And now in there, I'll do something special.
98
00:04:40,860 --> 00:04:43,120
The error boundary component
99
00:04:43,120 --> 00:04:45,550
is a regular class-based component,
100
00:04:45,550 --> 00:04:47,620
but it is a class-based component
101
00:04:47,620 --> 00:04:52,063
which implements the componentDidCatch lifecycle method.
102
00:04:54,990 --> 00:04:58,890
The componentDidCatch lifecycle method can be added
103
00:04:58,890 --> 00:05:01,620
to any class-based component,
104
00:05:01,620 --> 00:05:04,940
and whenever you do add it to a class-based component,
105
00:05:04,940 --> 00:05:08,550
it makes that class-based component an error boundary.
106
00:05:08,550 --> 00:05:11,970
It's just a term which we use to refer to
107
00:05:11,970 --> 00:05:13,680
when we talk about components
108
00:05:13,680 --> 00:05:16,270
that have this lifecycle method.
109
00:05:16,270 --> 00:05:19,670
You can't edit two functional components,
110
00:05:19,670 --> 00:05:23,210
and there is no equivalent for functional components
111
00:05:23,210 --> 00:05:24,620
at the moment.
112
00:05:24,620 --> 00:05:26,610
So if you wanna build an error boundary,
113
00:05:26,610 --> 00:05:28,660
it needs to be a class-based component,
114
00:05:28,660 --> 00:05:30,810
and then it is a class-based component,
115
00:05:30,810 --> 00:05:33,820
which implements this lifecycle method.
116
00:05:33,820 --> 00:05:37,240
Now, what's this special thing about this lifecycle method?
117
00:05:37,240 --> 00:05:40,030
Well, this lifecycle method will be triggered
118
00:05:40,030 --> 00:05:44,130
whenever one of the child components throws an error
119
00:05:44,130 --> 00:05:46,170
or generates an error.
120
00:05:46,170 --> 00:05:49,330
Therefore, what we do in the error boundary as well
121
00:05:49,330 --> 00:05:52,460
is we add a render method, like an all components,
122
00:05:52,460 --> 00:05:55,570
and we return this props children,
123
00:05:55,570 --> 00:05:57,290
and that's special now.
124
00:05:57,290 --> 00:06:00,870
Here I return this props children
125
00:06:00,870 --> 00:06:04,890
because I want to wrap my error boundary component
126
00:06:04,890 --> 00:06:06,570
around components
127
00:06:06,570 --> 00:06:11,090
which should be protected by that component.
128
00:06:11,090 --> 00:06:13,570
So here, for example, in the user finder,
129
00:06:13,570 --> 00:06:18,570
I could wrap the error boundary around my users component.
130
00:06:20,880 --> 00:06:23,210
Of course, we now need to import it also.
131
00:06:23,210 --> 00:06:27,653
So we import error boundary from error boundary.
132
00:06:28,810 --> 00:06:31,920
And then we wrap it around any components
133
00:06:31,920 --> 00:06:35,910
which might throw errors which we wanna handle.
134
00:06:35,910 --> 00:06:37,590
And of course, you can wrap it around
135
00:06:37,590 --> 00:06:38,930
more than one component,
136
00:06:38,930 --> 00:06:40,423
it's totally up to you.
137
00:06:41,730 --> 00:06:43,860
Now, back to the error boundary.
138
00:06:43,860 --> 00:06:46,620
In there or in this file,
139
00:06:46,620 --> 00:06:49,550
of course, also we want to export error boundary,
140
00:06:49,550 --> 00:06:51,200
but then instead of this class,
141
00:06:51,200 --> 00:06:54,503
I now wanna do something when an error occurs.
142
00:06:55,880 --> 00:06:59,390
For that, we get the error object here as a parameter,
143
00:06:59,390 --> 00:07:02,680
automatically passed in by it react,
144
00:07:02,680 --> 00:07:03,780
and we can then, of course,
145
00:07:03,780 --> 00:07:06,830
look into that error to find out what went wrong,
146
00:07:06,830 --> 00:07:10,360
and maybe run different logic based on different errors,
147
00:07:10,360 --> 00:07:11,970
though you could also consider
148
00:07:11,970 --> 00:07:16,080
creating different error boundaries for different errors,
149
00:07:16,080 --> 00:07:19,100
but then, of course, we can do whatever we wanna do
150
00:07:19,100 --> 00:07:22,610
because it is a regular class-based component in the end.
151
00:07:22,610 --> 00:07:27,610
So we can also add a constructor called super,
152
00:07:27,620 --> 00:07:31,210
and then set our state equal to,
153
00:07:31,210 --> 00:07:34,430
has error false, for example.
154
00:07:34,430 --> 00:07:35,780
And that's totally up to you,
155
00:07:35,780 --> 00:07:38,260
it doesn't have to be named, has error.
156
00:07:38,260 --> 00:07:40,670
You can manage any state you want here
157
00:07:40,670 --> 00:07:43,140
because it is just a regular
158
00:07:43,140 --> 00:07:44,953
class-based component in the end.
159
00:07:45,900 --> 00:07:48,530
But then when we catch an error here,
160
00:07:48,530 --> 00:07:53,530
we can call this set state and set has error to true.
161
00:07:55,390 --> 00:07:56,920
And then in the render method,
162
00:07:56,920 --> 00:08:01,920
we could check if this state has error is true,
163
00:08:02,200 --> 00:08:03,470
and if that's the case,
164
00:08:03,470 --> 00:08:08,470
we return something went wrong like this.
165
00:08:11,420 --> 00:08:13,700
And that's how we could handle the error.
166
00:08:13,700 --> 00:08:15,790
We can, of course, also lock the error
167
00:08:15,790 --> 00:08:18,420
or send it to a server for analytics
168
00:08:18,420 --> 00:08:20,300
or whatever we wanna do.
169
00:08:20,300 --> 00:08:22,780
But now with that, we built an error boundary,
170
00:08:22,780 --> 00:08:25,190
and here's the result.
171
00:08:25,190 --> 00:08:28,630
If I now reload this, if I now enter an S,
172
00:08:28,630 --> 00:08:30,670
you will see something went wrong,
173
00:08:30,670 --> 00:08:34,110
only briefly though, and then we see this screen again.
174
00:08:34,110 --> 00:08:36,150
Now, that's only a development thing though,
175
00:08:36,150 --> 00:08:39,340
as you can also tell by the message down there.
176
00:08:39,340 --> 00:08:41,299
This is still shown
177
00:08:41,299 --> 00:08:44,610
by the react development server here in the end
178
00:08:44,610 --> 00:08:47,770
to make it clear to us that an error did occur.
179
00:08:47,770 --> 00:08:51,850
If you build your application for production and deploy it,
180
00:08:51,850 --> 00:08:54,270
something we'll also do later in the course, of course,
181
00:08:54,270 --> 00:08:55,610
this would not visible.
182
00:08:55,610 --> 00:08:58,800
And you can close it here as well, this overlay.
183
00:08:58,800 --> 00:09:02,020
So this is what you would have in your real app,
184
00:09:02,020 --> 00:09:03,440
in your production app
185
00:09:03,440 --> 00:09:06,460
without that development error message.
186
00:09:06,460 --> 00:09:08,300
And therefore, here we can see that
187
00:09:08,300 --> 00:09:11,070
the error boundary does work.
188
00:09:11,070 --> 00:09:12,360
Of course, it's unstyled
189
00:09:12,360 --> 00:09:14,350
because I haven't added any styling here
190
00:09:14,350 --> 00:09:15,640
to my error boundary,
191
00:09:15,640 --> 00:09:17,500
but you could do that.
192
00:09:17,500 --> 00:09:19,960
And the idea behind error boundaries
193
00:09:19,960 --> 00:09:22,360
really is that you can ensure that
194
00:09:22,360 --> 00:09:27,320
not your entire application crashes if something goes wrong,
195
00:09:27,320 --> 00:09:32,170
but that instead you can catch those errors
196
00:09:32,170 --> 00:09:34,980
and then handle them in an elegant way,
197
00:09:34,980 --> 00:09:36,740
just as you would do it
198
00:09:36,740 --> 00:09:41,350
with try catch in regular JavaScript.
199
00:09:41,350 --> 00:09:44,230
And for error boundaries, if you add them,
200
00:09:44,230 --> 00:09:46,570
you need class-based components.
201
00:09:46,570 --> 00:09:50,653
This is currently not possible with functional components.
15625
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.