As we learned in the introduction, error boundaries are React components that do a few key things:

1. Wrap around other components
2. Render their children if no errors are detected
3. Render a fallback UI if an error is detected
4. Log the error in some way if an error is detected

Over the next few exercises, we’ll implement each of these features. For this exercise, let’s start small and focus on those first two steps. We can create an ErrorBoundary that wraps around other components and renders its children when no errors are present like so:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return this.props.children;
  }
}

In this example, we create an ErrorBoundary class component whose render() function returns this.props.children — the descendents that the ErrorBoundary wraps around.

We could then start using this ErrorBoundaryin an application like so:

<ErrorBoundary>
  <MyErrorProneComponent />
</ErrorBoundary>

At this point, our ErrorBoundary component just acts as a pass-through component for MyErrorProneComponent. This is ideal! When no errors are present we want our ErrorBoundary to stay out of the way. But what if an error occurs? We’ll handle that in the next exercise!

Note that we are creating this ErrorBoundary as a class component, not as a function component. This is intentional. In fact, error boundaries must be created as class components. Why?

React components become error boundaries once they implement one (or both) of the lifecycle methods static getDerivedStateFromError() and/or componentDidCatch(). We’ll look at how to implement these methods in the next exercise, but for now remember that lifecycle methods can only be accessed from class components.

Now it’s your turn to try making an ErrorBoundary of your own. Take a look at the code in index.js in the provided editor. It’s a light switch application with four switches. Each switch has an on/off button and a button labeled “Bad Switch” that will throw an error. Confirm that each switch controls its own section of the app and that pressing the error button will break the application. Refresh the application to try each error button.