Preview
Video Player
00:00
00:00
Take Control of Errors with componentDidCatch()
3:50One of the biggest changes in React 16 is how React handles JavaScript errors. It provides a built-in solution for handling errors gracefully, with a new lifecycle method called componentDidCatch().
To code along with me download the project
files with this workshop then open and
0:00
run the files with each video.
0:04
I'm using Atom as my text editor, but
you can use your preferred text editor.
0:05
One of the biggest changes in React 16
is how react handles JavaScript errors.
0:09
Normally a JavaScript error inside a
component like an uncaught type error for
0:14
instance, will break the entire app.
0:18
For example, this simple app component
renders a StudentForm component
0:20
that accepts the name in the input
field and displays the name below.
0:25
Inside the StudentForm component,
the reset button the reset button next to
0:31
the field has an onClick event that
sets the student state to null.
0:35
And as you can see the name property
is dis-structured from student here.
0:41
So when you click the reset button,
setting student null,
0:46
throws an uncaught type error.
0:50
That says,
Cannot read property name of null,
0:52
because it can't access the name property
on null, and this crashes the app.
0:54
If you have a look at the elements
panel in your browser's Dev Tools,
0:58
you will see no elements rendered
inside the root of the app.
1:02
React unmounts the entire app so
nothing displays in the browser.
1:06
A JavaScript error and a part of the UI
shouldn't break the whole app like this.
1:11
So in React 16,
error handling was improved to avoid these
1:16
types of situations where run time
errors during rendering breaks your app.
1:20
It proves a built in solution for
1:24
handling errors gracefully with a new life
cycle method called componentDidCatch().
1:26
This life cycle hook gets triggered
whenever a child component render or
1:32
life cycle method throw an error.
1:37
When an error occurs,
componentDidCatch catches the error and
1:39
instead of crashing the entire app, the
app continues to run as normal displaying
1:43
all the UI except for
the faulty component.
1:47
You can even display a fallback UI to
replace the component that crashed.
1:50
Let me show you how it works.
1:54
I'll start by initializing a hasError
state in the app component.
1:55
I'll set it to false by default.
2:01
Then I will use componentDidCatch
2:07
to call setState and
set the hasError state to true.
2:12
So, if any child component of App,
like studentForm, throws an error,
2:21
componentDidCatch will catch the error and
set hasError to true.
2:26
Now in the render function,
2:32
I'll use conditional rendering to return
fallback content in the event of an error.
2:33
I'll write, if the hasError state is true,
2:39
Return an h1 with the text,
2:46
No!, something went wrong.
2:51
Else, when there are no errors, return the
regular UI with the StudentForm component.
2:59
Back in the app, I'll click the button to
produce the error inside student form.
3:15
Now in development mode you'll briefly see
the fall back content just before React
3:20
displays the usual development errors or
error overlay.
3:24
However, if the app is
running in production,
3:28
it will keep displaying
the fallback content.
3:30
In this case, I can close the error
overlay to see the fallback UI and
3:32
there we see the, Something went wrong
heading, instead of a blank screen.
3:36
And in the Elements panel,
3:43
you can see the content being
rendered inside the root div.
3:45