React Error Boundaries — Complete Interview Guide

The Problem Without Error Boundaries

React's default behaviour when a component throws during rendering: the error propagates up the tree, React unwinds every parent component, and the entire application unmounts. Your users see a blank white screen with nothing in the console except a stack trace.

This is intentional — React would rather show nothing than a broken, half-rendered UI. But "nothing" is a terrible user experience. Error Boundaries let you replace "nothing" with a graceful fallback for just the broken section, while the rest of the app keeps running.

The Two Lifecycle Methods

Error Boundaries use two lifecycle methods that have no hooks equivalent — this is the one case in modern React where you must write a class component:

static getDerivedStateFromError(error)

Called during the render phase when a child throws. Its job is purely to update state so the next render shows the fallback UI. It must be a pure function — no side effects.

static getDerivedStateFromError(error) {
  // Return a state update — this triggers a re-render with the fallback
  return { hasError: true, error };
}

componentDidCatch(error, info)

Called during the commit phase after the fallback UI has rendered. This is where you log the error to an external service. Unlike getDerivedStateFromError, side effects are safe here.

componentDidCatch(error, info) {
  // info.componentStack shows the component tree that led to the error
  logErrorToSentry(error, { componentStack: info.componentStack });
}

A Complete Error Boundary

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, info) {
    logToErrorService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback ?? <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

What Error Boundaries Catch

Error Boundaries catch errors that happen in:

• The render method of a child component
• Lifecycle methods (componentDidMount, componentDidUpdate, etc.)
• Constructors of child class components

What Error Boundaries Do NOT Catch

Error Boundaries cannot catch errors from:

• Event handlers — use try/catch inside your handler instead
• Async code — setTimeout, fetch, Promises that reject after the render phase
• Server-side rendering
• Errors inside the Error Boundary itself — only errors in its children

// ❌ Error Boundary WON'T catch this
function Button() {
  function handleClick() {
    throw new Error("oops"); // event handler — use try/catch here
  }
  return <button onClick={handleClick}>Click</button>;
}

// ✅ Handle event handler errors with try/catch
function Button() {
  function handleClick() {
    try {
      riskyOperation();
    } catch (err) {
      setError(err.message);
    }
  }
  return <button onClick={handleClick}>Click</button>;
}

Granularity — Where to Place Error Boundaries

Place Error Boundaries at the right level of granularity. Too high (one at the app root) and a broken widget takes down everything visible. Too low (one on every component) and you add unnecessary overhead.

// Route-level: each page is isolated — one page crashing doesn't affect others
<ErrorBoundary fallback={<ErrorPage />}>
  <Routes />
</ErrorBoundary>

// Widget-level: a broken chart doesn't break the whole dashboard
<ErrorBoundary fallback={<p>Chart unavailable</p>}>
  <RevenueChart />
</ErrorBoundary>

Error Recovery — Resetting the Boundary

After an error, you can offer the user a way to retry by resetting the error state. The standard pattern is a "Try again" button that clears hasError:

render() {
  if (this.state.hasError) {
    return (
      <div>
        <p>Something went wrong.</p>
        <button onClick={() => this.setState({ hasError: false, error: null })}>
          Try again
        </button>
      </div>
    );
  }
  return this.props.children;
}

The react-error-boundary Library

Writing Error Boundary classes is boilerplate. The react-error-boundary library provides a ready-made <ErrorBoundary> component and a useErrorBoundary() hook that lets you programmatically trigger the boundary from inside a functional component (e.g. after a failed async operation):

import { ErrorBoundary, useErrorBoundary } from 'react-error-boundary';

// Wrap any subtree
<ErrorBoundary
  fallbackRender={({ error, resetErrorBoundary }) => (
    <div>
      <p>{error.message}</p>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )}
  onError={(error, info) => logToSentry(error, info)}
  onReset={() => refetch()} // called when resetErrorBoundary fires
>
  <MyFeature />
</ErrorBoundary>