Как Suspense взаимодействует с Error Boundary для обработки состояний загрузки и ошибок?

Как Suspense и Error Boundary работают вместе

Suspense и Error Boundary — это два механизма React для управления асинхронными состояниями. Suspense отвечает за отображение запасного UI (например, спиннера) во время загрузки данных, а Error Boundary перехватывает ошибки в дочерних компонентах и показывает fallback-интерфейс ошибки. Они могут быть вложены друг в друга, чтобы обрабатывать разные сценарии.

Пример совместного использования

Рассмотрим компонент, который загружает данные с помощью Suspense. Если загрузка завершается ошибкой, она пробрасывается в ближайший Error Boundary.

import React, { Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

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

function App() {
  return (
    <ErrorBoundary fallback={<h2>Ошибка загрузки</h2>}>
      <Suspense fallback={<div>Загрузка...</div>}>
        <DataComponent />
      </Suspense>
    </ErrorBoundary>
  );
}

Здесь Suspense показывает "Загрузка..." пока DataComponent не будет готов. Если при загрузке произойдет ошибка, ErrorBoundary отобразит "Ошибка загрузки".

Порядок обработки

• Suspense перехватывает промис, брошенный компонентом, и показывает fallback.
• Если промис отклоняется (ошибка), React пробрасывает исключение вверх по дереву.
• Error Boundary ловит это исключение и отображает свой fallback.

Таким образом, Suspense и Error Boundary не конфликтуют, а дополняют друг друга: первый управляет состоянием загрузки, второй — состоянием ошибки.

Вывод

Используйте Suspense для отображения загрузки и Error Boundary для обработки ошибок. Это разделение упрощает поддержку кода и делает UI более предсказуемым.