What is the purpose of error boundaries in React?

React Beginner Questions - Set 4

A component that catches render-time errors in its subtree and shows a fallback instead of a blank page. They are still class-only.

Example

import { Component } from 'react';

class ErrorBoundary extends Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  componentDidCatch(error, info) {
    console.error('Boundary caught:', error, info.componentStack);
  }

  render() {
    if (this.state.error) {
      return <div role="alert">Something broke: {this.state.error.message}</div>;
    }
    return this.props.children;
  }
}

// <ErrorBoundary><Chart /></ErrorBoundary>

What to notice

They catch errors during render, in lifecycle methods and in constructors — not in event handlers or async callbacks.
Place them around a feature, not only at the root, so one broken widget does not take the page down.
There is no hook equivalent; the class API is the only option.

← Back to the question list