Error Boundaries

40 min

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree.

They catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error boundaries don't catch errors in event handlers, async code, or server-side rendering.

Error boundaries are class components that implement either getDerivedStateFromError or componentDidCatch lifecycle methods. Currently, there's no hook equivalent for error boundaries.

Placing error boundaries strategically throughout your component tree allows you to gracefully handle errors and prevent the entire app from crashing.

Error boundaries catch errors in their children, but not in themselves. If an error boundary itself throws an error, it will propagate to the next error boundary up the tree.

Key Concepts

Error boundaries catch JavaScript errors in child component trees.
They must be class components (no hook equivalent yet).
They catch errors during rendering, lifecycle methods, and constructors.
They don't catch errors in event handlers or async code.
Strategic placement prevents entire app crashes.

Learning Objectives

Master

Creating error boundary components
Understanding when error boundaries catch errors
Implementing getDerivedStateFromError and componentDidCatch
Placing error boundaries strategically in component trees

Develop

Error handling and resilience thinking
Understanding React's error propagation
Designing graceful error recovery strategies

Tips

Place error boundaries at strategic points in your component tree.
Use componentDidCatch to log errors to error reporting services.
Provide user-friendly error messages in error boundary fallback UI.
Consider using libraries like react-error-boundary for easier implementation.

Common Pitfalls

Trying to use hooks in error boundaries (they must be class components).
Placing error boundaries too high, catching errors that should be handled locally.
Not logging errors to monitoring services in production.
Forgetting that error boundaries don't catch errors in event handlers.

Summary

Error boundaries catch errors in child component trees.
They must be implemented as class components.
They prevent entire app crashes by isolating errors.
Strategic placement is key to effective error handling.

Exercise

Create an error boundary component to catch and display errors gracefully.

import { Component } from 'react';

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

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

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

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

    return this.props.children;
  }
}

// Usage
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Exercise Tips

Add a reset function to allow users to retry after an error.
Log errors to an error reporting service in componentDidCatch.
Provide more detailed error information in development mode.
Consider using react-error-boundary library for easier implementation.

Error Boundaries