React
What is an error boundary?
Learn the class component that catches errors in a subtree.
What is an error boundary?
If a component throws while rendering, React can crash the whole app. An error boundary is a special class component that catches errors in its descendants.
The boundary catches errors in the subtree with componentDidCatch or getDerivedStateFromError and switches to a fallback UI. Only the broken part is affected, not the whole app.
An error boundary can only be a class component; there is no hook equivalent. Even in modern React, classes are used for error catching.
Class component structure
An error boundary is a class component that holds state.hasError. getDerivedStateFromError updates the error state; componentDidCatch logs the error.
In render, if hasError is true the component returns the fallback UI, otherwise it returns children. This switches to the fallback automatically when an error occurs.
The two methods have different jobs: one updates state, the other performs side effects. Using both together is common.
Exercise Error boundary skeleton
Complete the skeleton below. Write an ErrorBoundary class; extend Component, add a getDerivedStateFromError(error) method that returns {"{ hasError: true }"}, and a render method that returns <h1>Error</h1> if hasError is true, otherwise children. Export it.
Show example solution
import { Component } from "react";
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) return <h1>Error</h1>;
return this.props.children;
}
}
export default ErrorBoundary;
Test yourself
-
Which component type is an error boundary?
Show answer
A class — An error boundary is a class component.
-
Error catching method
static getDerivedStateFromError(____) {
return { hasError: true };
}
Show answer
static getDerivedStateFromError(error) {
return { hasError: true };
}
-
What is an error boundary: match the terms
- getDerivedStateFromError
- Updates state
- componentDidCatch
- Logs the error
- hasError
- Error state
- children
- Normal content
Next lesson: Class component structure
