What are error boundaries in React and can you give me some examples?

What are error boundaries in React?

Error boundaries are React components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI instead of crashing the whole app.

Can you provide an example of how to implement an error boundary?

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, 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 happens if an error occurs outside of an error boundary?

If an error occurs outside of an error boundary, it will not be caught, and the entire React component tree will unmount, leading to a crash of the application.

Are there any limitations to using error boundaries?

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