Что произойдет, если Lazy Loading завершится с ошибкой

Тип вопроса: Архитектура Вероятность: 10% Категория: Frontend Developer

Ответ

При ошибке Lazy Loading компонент не загрузится, и пользователь увидит fallback-контент (если он указан в Suspense) или пустое место.

Пример обработки ошибок с Error Boundary:

import { ErrorBoundary } from 'react-error-boundary';

function ErrorFallback({ error }) {
  return <div>Ошибка загрузки компонента</div>;
}

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

function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <Suspense fallback={<div>Загрузка...</div>}>
        <LazyComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Без Error Boundary ошибка будет всплывать в консоль, но интерфейс не сломается полностью. Важно предусматривать такие сценарии для критичных компонентов.