Какие функции в 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.