How do I implement error boundaries in React?

How do I implement error boundaries in React?

To implement error boundaries in React, you can create a class component that defines the static method getDerivedStateFromError and the componentDidCatch lifecycle method.

Can you show me a code example?

Sure! Here's a simple example:

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

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

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

    return this.props.children;  
  }
}

You can wrap your components with this ErrorBoundary to catch errors.

What types of errors can error boundaries catch?

Error boundaries can catch JavaScript errors in their child component tree, including rendering errors, lifecycle method errors, and errors thrown in event handlers.

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. Server-side rendering errors
4. Errors thrown in the error boundary itself.