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 a code example?

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

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

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

  componentDidCatch(error, errorInfo) {
    console.error('Error caught in ErrorBoundary:', error, errorInfo);
  }

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

function App() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

What happens if the lazy-loaded component fails to load?

If the lazy-loaded component fails to load, the error boundary will catch the error and display the fallback UI you defined.