PassFront
  1. PassFront
  2. База знаний
  3. Обработка ошибок

Какие функции в React отвечают за перехват ошибок?

Обработка ошибок

За перехват ошибок в React отвечают два метода классового компонента; всё остальное ловится обычными средствами JavaScript.

Методы Error Boundary

static getDerivedStateFromError(error) — вызывается во время рендера после ошибки в поддереве; должен вернуть новый state, чтобы показать запасной UI. Никаких побочных эффектов (выполняется в render-фазе).

componentDidCatch(error, errorInfo) — вызывается в commit-фазе; место для логирования (Sentry) и побочных эффектов. errorInfo.componentStack показывает, где сломалось.

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { reportError(error, info); }

  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

Хук-аналогов нет — на практике берут react-error-boundary (внутри тот же класс).

Что Error Boundary не ловит

  • Ошибки в обработчиках событий → обычный try/catch.
  • Асинхронный код и промисы → catch + перевод в состояние ошибки (или throwOnError в React Query, чтобы пробросить в границу).
  • Ошибки в самой границе и на сервере (SSR).

Смежные механизмы

  • onRecoverableError (createRoot/hydrateRoot) — колбэк для ошибок, от которых React восстановился (например, рассогласование гидратации).
  • Роутеры: errorElement / useRouteError (React Router), error.tsx (Next.js App Router) — те же границы на уровне маршрута.
  • Глобально: window.onerror и unhandledrejection для того, что вне React.

Коротко для собеседования

Перехват ошибок рендера — getDerivedStateFromError (показать fallback) и componentDidCatch (залогировать) в классовом Error Boundary; хуков нет, используют react-error-boundary. События и async — try/catch; на уровне маршрутов — errorElement/error.tsx; глобально — onerror/unhandledrejection.

Другие вопросы раздела