Error Boundaries

Overview

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of crashing the entire application. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error boundaries do not catch errors for:

Event handlers
Asynchronous code (e.g., setTimeout or requestAnimationFrame callbacks)
Server-side rendering
Errors thrown in the error boundary itself (rather than its children)

Creating an Error Boundary

A class component becomes an error boundary if it defines static getDerivedStateFromError() or componentDidCatch() lifecycle methods.

Basic Error Boundary

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // Log the error to an error reporting service
    console.error('Error caught by boundary:', error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    
    return this.props.children;
  }
}

// Usage
function App() {
  return (
    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>
  );
}

Lifecycle Methods

getDerivedStateFromError

static getDerivedStateFromError(error: Error): StateUpdate

This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown and should return a value to update state. Called during the render phase, so side-effects are not permitted.

componentDidCatch

componentDidCatch(error: Error, errorInfo: ErrorInfo): void

This lifecycle is invoked after an error has been thrown by a descendant component. It receives two parameters:

error - The error that was thrown
errorInfo - An object with a componentStack property containing stack trace information

Called during the commit phase, so side-effects are permitted. Use it for logging errors.

Advanced Error Boundary

import { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null
    };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    // Log to error reporting service
    this.setState({
      error: error,
      errorInfo: errorInfo
    });
    
    // Send to monitoring service
    if (typeof window !== 'undefined') {
      // Example: Send to Sentry, LogRocket, etc.
      console.error('Error Boundary caught:', {
        error: error.toString(),
        componentStack: errorInfo.componentStack
      });
    }
  }
  
  resetError = () => {
    this.setState({
      hasError: false,
      error: null,
      errorInfo: null
    });
  };
  
  render() {
    if (this.state.hasError) {
      if (this.props.fallback) {
        return this.props.fallback({
          error: this.state.error,
          errorInfo: this.state.errorInfo,
          resetError: this.resetError
        });
      }
      
      return (
        <div className="error-boundary">
          <h1>Oops! Something went wrong</h1>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            <summary>Error Details</summary>
            <p>{this.state.error && this.state.error.toString()}</p>
            <p>{this.state.errorInfo && this.state.errorInfo.componentStack}</p>
          </details>
          <button onClick={this.resetError}>Try Again</button>
        </div>
      );
    }
    
    return this.props.children;
  }
}

export default ErrorBoundary;

Usage Patterns

Wrapping Top-Level Routes

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <BrowserRouter>
      <ErrorBoundary>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </ErrorBoundary>
    </BrowserRouter>
  );
}

Multiple Error Boundaries

function Dashboard() {
  return (
    <div>
      <ErrorBoundary fallback={<h2>Navigation Error</h2>}>
        <Navigation />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<h2>Sidebar Error</h2>}>
        <Sidebar />
      </ErrorBoundary>
      
      <ErrorBoundary fallback={<h2>Content Error</h2>}>
        <MainContent />
      </ErrorBoundary>
    </div>
  );
}

Custom Fallback UI

function App() {
  return (
    <ErrorBoundary
      fallback={({ error, resetError }) => (
        <div className="error-container">
          <h1>Application Error</h1>
          <p>We're sorry, but something went wrong.</p>
          <details>
            <summary>Technical Details</summary>
            <pre>{error.message}</pre>
          </details>
          <button onClick={resetError}>Reload Application</button>
          <a href="/">Go to Homepage</a>
        </div>
      )}
    >
      <MyApplication />
    </ErrorBoundary>
  );
}