Как обработать ошибки в React приложении

Что проверяют

Знаете ли вы, какие ошибки ловит Error Boundary, а какие проходят мимо него, и есть ли у вас стратегия целиком: что видит пользователь и что попадает в мониторинг. Следом часто просят объяснить, почему границу нельзя написать на хуках.

Как отвечать

Разложите ошибки по типам, у каждого свой механизм:

• ошибки рендера: Error Boundary, классовый компонент с static getDerivedStateFromError (показать запасной UI) и componentDidCatch (отправить в логи). Хука-аналога в React нет, поэтому на практике берут react-error-boundary с FallbackComponent, resetKeys и onReset;
• обработчики событий: в границу не попадают, нужен обычный try/catch и своё состояние ошибки. Чтобы всё же показать запасной UI, в react-error-boundary есть showBoundary из хука useErrorBoundary;
• асинхронный код: try/catch вокруг await и проверка response.ok, потому что fetch не отклоняет промис на 404 и 500. В TanStack Query ошибка лежит в error, а опция throwOnError перебрасывает её в ближайшую границу;
• глобальный уровень: в React 19 у createRoot есть колбэки onCaughtError, onUncaughtError и onRecoverableError, плюс событие unhandledrejection на window для забытых промисов. Сюда подключают Sentry или аналог.

Границы расставляйте по смыслу: одна у корня как последний рубеж и отдельные вокруг независимых виджетов, чтобы упавший график не гасил всю страницу. В Next.js App Router ту же роль играет файл error.tsx на уровне маршрута.

И обязательно продумайте восстановление: кнопка «Попробовать снова», сброс состояния границы, понятный текст вместо белого экрана.

Где спотыкаются

Говорят, что Error Boundary ловит все ошибки. Обработчики событий, асинхронный код, серверный рендер и ошибки в самой границе он не перехватывает.

Ставят одну границу на всё приложение. Любая ошибка в мелком компоненте превращается в пустой экран.

Логируют через console.error и на этом останавливаются. В продакшене эту консоль никто не читает, нужен сбор ошибок с source maps и контекстом пользователя.