Error boundaries

Error Boundary перехватывает ошибки, брошенные при рендеринге, и показывает запасной UI вместо размонтирования дерева. Это компонент, оборачивающий поддерево: если любой потомок бросает ошибку при рендеринге, граница подменяет это поддерево своим запасным UI. На момент React 19 хук-формы по-прежнему нет — error boundary это классовый компонент, реализующий getDerivedStateFromError (чтобы отрендерить запасной UI) и опционально componentDidCatch (чтобы залогировать). Пакет react-error-boundary — стандартная обёртка, которую большинство команд используют вместо самописной.

import { Component, type ReactNode } from "react";

class ErrorBoundary extends Component<
  { fallback: ReactNode; children: ReactNode },
  { hasError: boolean }
> {
  state = { hasError: false };
  static getDerivedStateFromError() {
    return { hasError: true };   // отрендерить запасной UI на следующем рендере
  }
  componentDidCatch(error: Error) {
    reportToSentry(error);       // побочный эффект: залогировать
  }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

Без границы брошенная при рендеринге ошибка распространяется вверх по дереву, и React размонтирует всё от ближайшей границы и выше — а если границы нет вовсе, то весь корень. Это размонтирование и есть белый пустой экран.

Suspense обрабатывает загрузку; Error Boundary обрабатывает отказ — настоящему async-UI нужны оба, поставленные стопкой. Ожидающий fetch данных приостанавливается (Suspense ловит это и показывает запасной UI). Отклонённый fetch данных бросает ошибку (Error Boundary ловит её и показывает свой запасной UI). Это два разных сигнала для двух разных состояний, перехватываемых двумя разными границами. Error Boundary идёт над Suspense, потому что отказ должен заменить весь регион загрузки — включая его скелетон, — а не рендериться внутри него.

// Пара. Внешняя = состояние отказа, внутренняя = состояние загрузки.
<ErrorBoundary fallback={<FeedError />}>
  <Suspense fallback={<FeedSkeleton />}>
    <ActivityFeed />   {/* ожидание → скелетон; отклонение → FeedError */}
  </Suspense>
</ErrorBoundary>

Читай сверху вниз: пока данные ActivityFeed ожидаются, пользователь видит FeedSkeleton; если они разрешаются, он видит ленту; если отклоняются, брошенная ошибка ускользает из Suspense, попадает в Error Boundary, и он видит FeedError. Три состояния, полностью обработаны.

Дай границе reset, чтобы пользователь мог повторить упавший регион без перезагрузки страницы. Перехват-и-показ запасного UI без пути назад — это тупик. react-error-boundary отдаёт твоему запасному UI колбэк resetErrorBoundary(): его вызов сбрасывает состояние ошибки и перерендеривает детей, что заново запускает приостановленный fetch. Сочетай его с массивом resetKeys, чтобы граница ещё и автоматически сбрасывалась при изменении входа (например, id пользователя).

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

function FeedSection({ userId }: { userId: string }) {
  return (
    <ErrorBoundary
      FallbackComponent={FeedError}
      resetKeys={[userId]}         // авто-сброс при изменении userId
    >
      <Suspense fallback={<FeedSkeleton />}>
        <ActivityFeed userId={userId} />
      </Suspense>
    </ErrorBoundary>
  );
}

function FeedError({ resetErrorBoundary }: { resetErrorBoundary: () => void }) {
  return (
    <div role="alert">
      <p>Couldn't load the feed.</p>
      <button onClick={resetErrorBoundary}>Retry</button>
    </div>
  );
}

Теперь временный отказ восстановим на месте: пользователь жмёт Retry, регион возвращается в свой FeedSkeleton, и fetch выполняется снова — без перезагрузки всей страницы, без потери остального экрана.

Острый край: Error Boundaries ловят только ошибки фазы рендеринга. Ошибки в обработчиках событий, эффектах, таймаутах и async-колбэках НЕ перехватываются. Это режим отказа, который застаёт людей врасплох. getDerivedStateFromError выполняется во время рендеринга, поэтому видит только те ошибки, что брошены при рендеринге (включая дочерний Suspense, чьё чтение отклонилось). Ошибка внутри onClick, setTimeout, fetch().then(...) или тела useEffect происходит вне рендеринга — React не направляет её к границе, и она либо молча роняет обработчик, либо всплывает как необработанное отклонение.

function SaveButton() {
  // ❌ НЕ перехватывается ни одной Error Boundary — это обработчик, не рендеринг.
  async function onSave() {
    await api.save();          // если это отклонится, граница её не увидит
  }
  return <button onClick={onSave}>Save</button>;
}

// ✅ Обрабатывай ошибки событий/эффектов сам — try/catch + локальное состояние ошибки.
function SaveButton() {
  const [err, setErr] = useState<string | null>(null);
  async function onSave() {
    try { await api.save(); }
    catch { setErr("Save failed. Try again."); }
  }
  return (
    <>
      <button onClick={onSave}>Save</button>
      {err && <p role="alert">{err}</p>}
    </>
  );
}

Так что Error Boundaries необходимы, но недостаточны: они покрывают путь рендеринга (загрузка данных для компонентов, читающих при рендеринге, плохие пропсы, компонент, бросающий ошибку при рендеринге), и ты по-прежнему должен отдельную стратегию — try/catch плюс локальное состояние или обработку ошибок твоего слоя данных — для всего, что происходит в обработчиках и эффектах.