Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With componentDidCatch() comes a new concept of an error boundary. Error boundaries are wrapper components that use componentDidCatch() to capture errors anywhere in their child component tree and display a fallback UI.
Resources
componentDidCatch()– React docs- Better error handling – React docs
- Error Handling in React 16
- Introducing Error Boundaries
Note: Error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself.
With the componentDidCatch
lifecycle method
0:00
comes a new concept of an error boundary.
0:03
Error boundaries are wrapper
components that use componentDidCatch
0:06
to capture errors anywhere in
their child component tree and
0:09
display a fallback UI in its place.
0:12
They provide an easier way to keep the
error catching and conditional rendering
0:15
logic we wrote in the previous video
reusable and maintainable in your app.
0:18
You create an error boundary
as a class component.
0:23
So in the source components folder, I'll
create a new file named ErrorBoundary.js.
0:26
Here, I'll import React,
Component from react.
0:35
And to create the ErrorBoundary class,
0:44
I'll write export default class
ErrorBoundary extends Component.
0:48
Now, I'll go ahead and move the state and
1:01
the componentDidCatch method over
to the new ErrorBoundary component.
1:04
Then in the render function,
1:14
I'll write an if statement similar
to the one we wrote earlier.
1:16
So if this component catches
an error anywhere in its
1:21
child component tree,
it's going to return an h2,
1:27
With the text, no, something went wrong.
1:35
Otherwise, it's going to return its
children via this.props.children.
1:44
So now I have a reusable ErrorBoundary
component I can wrap around my
1:53
entire app or specific components.
1:58
For example, in app.js,
I'll import the ErrorBoundary component.
2:01
Then in the render method,
I'll get rid of the if else statement.
2:14
And I'll wrap the ErrorBoundary around
the StudentForm component only.
2:25
Back in the app, I'll click the Reset
button to produce the error.
2:35
And we see the fallback content, but
the rest of the app continues to render
2:42
because the component causing
the error is inside the ErrorBoundary.
2:47
So as you can see, this is much better
than having your entire app crash or
2:52
unmount any time an error occurs.
2:55
You can isolate errors,
making them easier to understand and fix.
2:58
Any errors caught in the Component tree
3:02
get reported up to the ErrorBoundary's
componentDidCatch method.
3:05
This provides a handy way to send
error reports to an error tracking or
3:09
monitoring service.
3:13
For example, in my project,
3:14
I've already set up the config to
an error reporting service I like to use.
3:15
So I'll import the config at
the top of ErrorBoundry.js with
3:19
import sendError, from error-config.
3:24
The componenetDidCatch method takes
two arguments to help you track and
3:34
investigate errors, error,
the error instance itself, and info,
3:38
which contains the component
stack trace or
3:42
the path in the component tree
leading up to the offending component.
3:45
There are lots of JavaScript error
tracking services out there.
3:50
And the tracking service you use
is probably different than mine.
3:53
So in the componentDidCatch method,
3:57
I'll call my error reporting
APIs captureException method.
3:59
And pass it the error instance.
4:09
The component stack trace contains helpful
information for sorting and resolving
4:14
errors, so I'm also going to send it to
my error tracking service as extra data.
4:20
So now, any time my
ErrorBoundary catches an error,
4:32
information about the error gets
sent over to my error tracking
4:36
services dashboard,
where I can see what caused the error,
4:41
when it happened, the type of
users it's affecting, and more.
4:45
So as you've learned,
the componentDidCatch method and
4:53
ErrorBoundary work like try catch
statements for your React components.
4:57
They provide a more consistent and
dependable way to catch and
5:01
deal with errors.
5:05
You can learn more about error handling in
React by reading the resources posted in
5:06
the teacher's notes.
5:10
You need to sign up for Treehouse in order to download course files.
Sign up