Using error boundaries in React

Introduction

Error boundaries help catch errors in parts of your app so the whole app doesn't crash. They show a fallback UI instead of a broken screen.

When you want to prevent your whole app from crashing if one component fails.

When you want to show a friendly message if something goes wrong in a part of your UI.

When you want to log errors from components to fix bugs later.

When you want to isolate errors to specific parts of your app.

When you want to improve user experience by handling unexpected errors gracefully.

Syntax

React

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

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

  componentDidCatch(error, errorInfo) {
    // You can log the error here
  }

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

Error boundaries must be class components in React.

They catch errors in their child components during rendering, lifecycle methods, and constructors.

Examples

This example shows a simple error boundary that displays a message when an error happens.

React

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

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

  render() {
    if (this.state.hasError) {
      return <h1>Oops! Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

This example adds error logging to the console when an error is caught.

React

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

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

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Sorry, something went wrong.</h2>;
    }
    return this.props.children;
  }
}

Sample Program

This app uses an error boundary to catch an error thrown by BuggyComponent. Instead of crashing the whole app, it shows a friendly message.

React

import React from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.log('Error caught:', error.toString());
  }

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

function BuggyComponent() {
  throw new Error('I crashed!');
  // return <div>This will not render.</div>;
}

export default function App() {
  return (
    <ErrorBoundary>
      <BuggyComponent />
    </ErrorBoundary>
  );
}

Important Notes

Error boundaries do not catch errors inside event handlers.

Use multiple error boundaries to isolate errors in different parts of your app.

Always provide a fallback UI so users see something helpful.

Summary

Error boundaries catch errors in child components to prevent app crashes.

They must be class components with specific lifecycle methods.

Use them to show fallback UI and improve user experience.