How can I handle errors in React lazy loading?

How can I handle errors in React lazy loading?

You can handle errors in React lazy loading by using the Suspense component along with an error boundary.

What is an error boundary?

An error boundary is a React component that catches JavaScript errors in its child component tree and displays a fallback UI.

Can you show me an example of implementing 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.error('Error caught in ErrorBoundary:', error);
  }

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

You can wrap your lazy-loaded component with this ErrorBoundary.