1
00:00:00,340 --> 00:00:04,105
To code along with me download the project
files with this workshop then open and

2
00:00:04,105 --> 00:00:05,588
run the files with each video.

3
00:00:05,588 --> 00:00:09,460
I'm using Atom as my text editor, but
you can use your preferred text editor.

4
00:00:09,460 --> 00:00:14,228
One of the biggest changes in React 16
is how react handles JavaScript errors.

5
00:00:14,228 --> 00:00:18,180
Normally a JavaScript error inside a
component like an uncaught type error for

6
00:00:18,180 --> 00:00:20,710
instance, will break the entire app.

7
00:00:20,710 --> 00:00:25,800
For example, this simple app component
renders a StudentForm component

8
00:00:25,800 --> 00:00:31,380
that accepts the name in the input
field and displays the name below.

9
00:00:31,380 --> 00:00:35,440
Inside the StudentForm component,
the reset button the reset button next to

10
00:00:35,440 --> 00:00:41,530
the field has an onClick event that
sets the student state to null.

11
00:00:41,530 --> 00:00:46,990
And as you can see the name property
is dis-structured from student here.

12
00:00:46,990 --> 00:00:50,220
So when you click the reset button,
setting student null,

13
00:00:50,220 --> 00:00:52,120
throws an uncaught type error.

14
00:00:52,120 --> 00:00:54,470
That says,
Cannot read property name of null,

15
00:00:54,470 --> 00:00:58,680
because it can't access the name property
on null, and this crashes the app.

16
00:00:58,680 --> 00:01:02,630
If you have a look at the elements
panel in your browser's Dev Tools,

17
00:01:02,630 --> 00:01:06,290
you will see no elements rendered
inside the root of the app.

18
00:01:06,290 --> 00:01:11,675
React unmounts the entire app so
nothing displays in the browser.

19
00:01:11,675 --> 00:01:16,025
A JavaScript error and a part of the UI
shouldn't break the whole app like this.

20
00:01:16,025 --> 00:01:20,455
So in React 16,
error handling was improved to avoid these

21
00:01:20,455 --> 00:01:24,415
types of situations where run time
errors during rendering breaks your app.

22
00:01:24,415 --> 00:01:26,985
It proves a built in solution for

23
00:01:26,985 --> 00:01:32,460
handling errors gracefully with a new life
cycle method called componentDidCatch().

24
00:01:32,460 --> 00:01:37,010
This life cycle hook gets triggered
whenever a child component render or

25
00:01:37,010 --> 00:01:39,240
life cycle method throw an error.

26
00:01:39,240 --> 00:01:43,390
When an error occurs,
componentDidCatch catches the error and

27
00:01:43,390 --> 00:01:47,910
instead of crashing the entire app, the
app continues to run as normal displaying

28
00:01:47,910 --> 00:01:50,800
all the UI except for
the faulty component.

29
00:01:50,800 --> 00:01:54,600
You can even display a fallback UI to
replace the component that crashed.

30
00:01:54,600 --> 00:01:55,670
Let me show you how it works.

31
00:01:55,670 --> 00:02:01,385
I'll start by initializing a hasError
state in the app component.

32
00:02:01,385 --> 00:02:06,250
I'll set it to false by default.

33
00:02:07,270 --> 00:02:12,350
Then I will use componentDidCatch

34
00:02:12,350 --> 00:02:17,960
to call setState and
set the hasError state to true.

35
00:02:21,540 --> 00:02:26,055
So, if any child component of App,
like studentForm, throws an error,

36
00:02:26,055 --> 00:02:31,150
componentDidCatch will catch the error and
set hasError to true.

37
00:02:32,260 --> 00:02:33,930
Now in the render function,

38
00:02:33,930 --> 00:02:38,350
I'll use conditional rendering to return
fallback content in the event of an error.

39
00:02:39,450 --> 00:02:43,707
I'll write, if the hasError state is true,

40
00:02:46,561 --> 00:02:51,163
Return an h1 with the text,

41
00:02:51,163 --> 00:02:55,769
No!, something went wrong.

42
00:02:59,250 --> 00:03:06,172
Else, when there are no errors, return the
regular UI with the StudentForm component.

43
00:03:15,182 --> 00:03:20,970
Back in the app, I'll click the button to
produce the error inside student form.

44
00:03:20,970 --> 00:03:24,620
Now in development mode you'll briefly see
the fall back content just before React

45
00:03:24,620 --> 00:03:28,030
displays the usual development errors or
error overlay.

46
00:03:28,030 --> 00:03:30,010
However, if the app is
running in production,

47
00:03:30,010 --> 00:03:32,300
it will keep displaying
the fallback content.

48
00:03:32,300 --> 00:03:36,844
In this case, I can close the error
overlay to see the fallback UI and

49
00:03:36,844 --> 00:03:42,046
there we see the, Something went wrong
heading, instead of a blank screen.

50
00:03:43,991 --> 00:03:45,671
And in the Elements panel,

51
00:03:45,671 --> 00:03:49,330
you can see the content being
rendered inside the root div.