How do I use error boundaries in React?

How do I use error boundaries in React?

Error boundaries are React components that catch JavaScript errors in their child component tree. You can create one by defining a class component that implements either static getDerivedStateFromError() or componentDidCatch().

Can you show me a simple example?

Sure! Here's a basic example:

class ErrorBoundary extends React.Component {
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error('Error caught in ErrorBoundary:', error);
  }

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

You can wrap any component with ErrorBoundary to catch errors.

What types of errors can error boundaries catch?

Error boundaries can catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. However, they do not catch errors in event handlers, asynchronous code, or errors thrown in the error boundary itself.

Are there any limitations to using error boundaries?

Yes, error boundaries do not catch errors for:

1. Event handlers.
2. Asynchronous code (like setTimeout or Promises).
3. Errors thrown in the error boundary itself.