How can I handle errors in React Suspense?

How can I handle errors in React Suspense?

You can handle errors in React Suspense by using the ErrorBoundary component. This allows you to catch errors in the components that are wrapped in Suspense.

Can you show me an example of using ErrorBoundary with Suspense?

Sure! Here's a simple example:

import React, { Suspense } from 'react';

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;
  }
}

const MyComponent = React.lazy(() => import('./MyComponent'));

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

This code wraps your lazy-loaded component in an ErrorBoundary.

What happens if an error occurs in the lazy-loaded component?

If an error occurs in the lazy-loaded component, the ErrorBoundary will catch it and render the fallback UI you defined, in this case, 'Something went wrong.' This prevents the entire app from crashing.