How can I implement error boundaries in my React app?

How can I implement error boundaries in my React app?

You can implement error boundaries in your React app by creating a class component that defines the static method 'getDerivedStateFromError' and the method 'componentDidCatch'.

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.

What types of errors can error boundaries catch?

Error boundaries can catch JavaScript errors in their child component tree during rendering, in lifecycle methods, and in constructors. However, they do not catch errors for event handlers, asynchronous code, or errors thrown in the ErrorBoundary itself.

Are there any limitations to using error boundaries?

Yes, error boundaries do not catch errors in event handlers, asynchronous code, or errors thrown in the error boundary itself. They also won't catch errors in the error boundary's own rendering.