With the componentDidCatch lifecycle method

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 in its place.

They provide an easier way to keep the error catching and conditional rendering

logic we wrote in the previous video reusable and maintainable in your app.

You create an error boundary as a class component.

So in the source components folder, I'll create a new file named ErrorBoundary.js.

Here, I'll import React, Component from react.

And to create the ErrorBoundary class,

I'll write export default class ErrorBoundary extends Component.

Now, I'll go ahead and move the state and

the componentDidCatch method over to the new ErrorBoundary component.

Then in the render function,

I'll write an if statement similar to the one we wrote earlier.

So if this component catches an error anywhere in its

child component tree, it's going to return an h2,

With the text, no, something went wrong.

Otherwise, it's going to return its children via this.props.children.

So now I have a reusable ErrorBoundary component I can wrap around my

entire app or specific components.

For example, in app.js, I'll import the ErrorBoundary component.

Then in the render method, I'll get rid of the if else statement.

And I'll wrap the ErrorBoundary around the StudentForm component only.

Back in the app, I'll click the Reset button to produce the error.

And we see the fallback content, but the rest of the app continues to render

because the component causing the error is inside the ErrorBoundary.

So as you can see, this is much better than having your entire app crash or

unmount any time an error occurs.

You can isolate errors, making them easier to understand and fix.

Any errors caught in the Component tree

get reported up to the ErrorBoundary's componentDidCatch method.

This provides a handy way to send error reports to an error tracking or

monitoring service.

For example, in my project,

I've already set up the config to an error reporting service I like to use.

So I'll import the config at the top of ErrorBoundry.js with

import sendError, from error-config.

The componenetDidCatch method takes two arguments to help you track and

investigate errors, error, the error instance itself, and info,

which contains the component stack trace or

the path in the component tree leading up to the offending component.

There are lots of JavaScript error tracking services out there.

And the tracking service you use is probably different than mine.

So in the componentDidCatch method,

I'll call my error reporting APIs captureException method.

And pass it the error instance.

The component stack trace contains helpful information for sorting and resolving

errors, so I'm also going to send it to my error tracking service as extra data.

So now, any time my ErrorBoundary catches an error,

information about the error gets sent over to my error tracking

services dashboard, where I can see what caused the error,

when it happened, the type of users it's affecting, and more.

So as you've learned, the componentDidCatch method and

ErrorBoundary work like try catch statements for your React components.

They provide a more consistent and dependable way to catch and

deal with errors.

You can learn more about error handling in React by reading the resources posted in

the teacher's notes.