As we learned in the introduction, error boundaries are React components that do a few key things:
- Wrap around other components
- Render their children if no errors are detected
- Render a fallback UI if an error is detected
- 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 ErrorBoundary
in 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.
Instructions
Now it’s time to protect our components! First, create a class component called ErrorBoundary
. It should have a constructor that calls super(props)
and its render()
method should returnthis.props.children
.
Next step is to use this new <ErrorBoundary>
component to wrap around other components. Do the following:
- The first two
<LightSwitch>
components should share a single error boundary. - The third light switch should have its own error boundary.
- Leave the fourth light switch unprotected. This will help demonstrate the power of error boundaries.
Test the code. The light switches should still work. The error boundaries won’t do anything yet so the error buttons should still break the application.