Что такое границы ошибок в React и что они не ловят?
- Как не дать одной ошибке уронить всё приложение?
Граница ошибок перехватывает исключения, брошенные при рендере дочерних компонентов, и показывает запасной интерфейс вместо белого экрана. Ставят на уровне страниц и виджетов, чтобы ошибка в одном блоке не роняла всё; в componentDidCatch или onError отправляют ошибку в мониторинг (Sentry). Границы пишутся классом (getDerivedStateFromError) или через библиотеку react-error-boundary. Не ловят: ошибки в обработчиках событий, асинхронном коде (setTimeout, промисы вне рендера), на сервере при SSR и в самой границе.
- Ошибки обработчиков — try/catch и состояние ошибки
- Кнопка «попробовать снова» сбрасывает границу (resetKeys)
- Без границы ошибка рендера размонтирует всё дерево
А ещё Ошибки загрузки данных через Suspense-библиотеки до границы доходят
Подробно
<ErrorBoundary FallbackComponent={WidgetError} onError={e => Sentry.captureException(e)}>
<SalesChart />
</ErrorBoundary>Что хотят услышать
- Что ловят и где ставить.
- Мониторинг и повтор.
- Что не ловят.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Границы ошибок ловят исключения из обработчиков onClick и из промисов внутри useEffect
- ✗Достаточно одной границы вокруг всего приложения — это лучшая практика для любого интерфейса
- ✓Ловят ошибки рендера потомков и показывают запасной UI; обработчики и async — нет
- ✗Границу ошибок можно написать только хуком useErrorBoundary без классов и библиотек
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.