Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Catching Errors with Error Boundaries

5:12 with Guil Hernandez

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.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Resources

Note: Error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up