How can I use error boundaries in my React application?

How can I use error boundaries in my React application?

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

Can you show me a simple example of an error boundary?

Sure! Here's a basic example:

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

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

  componentDidCatch(error, info) {
    console.error('Error caught by Error Boundary:', 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 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 for:

• Event handlers
• Asynchronous code (e.g., setTimeout or Promises)
• Server-side rendering
• Errors thrown in the error boundary itself.

Are there any best practices for using error boundaries?

Yes! Here are some best practices:

• Use error boundaries at strategic points in your app, like around major sections or routes.
• Provide fallback UI that is user-friendly.
• Log errors to an error reporting service for monitoring.