How do I create an error boundary in React?

How do I create an error boundary in React?

To create an error boundary in React, you need to define a class component that implements the componentDidCatch lifecycle method.

Can you show me a code example?

Sure! Here's a simple example:

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

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

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

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

You can wrap this component around any part of your app.

What should I do if I want to log the error to an external service?

You can do that in the componentDidCatch method. Just call your logging service there, like this:

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

Are there any limitations to using error boundaries?

Yes, error boundaries only catch errors in the components below them in the tree. They won't catch errors in event handlers, asynchronous code, or errors thrown in the error boundary itself.