Error boundary
Вопрос
Как в React ловить ошибки рендера?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
error boundary - классовый компонент с getDerivedStateFromError или componentDidCatch
ловит ошибки рендера, эффектов и конструкторов ниже по дереву
не ловит ошибки обработчиков событий
не ловит асинхронные ошибки и ошибки SSR
без границы падение одного компонента размонтирует всё дерево
границ нужно несколько - на уровне виджетов, а не одна на приложение
Что могут спросить следом
- Почему ошибка в onClick не долетает до границы
- Как отправлять пойманное в Sentry
- Где ставить границы в дашборде из шести виджетов
Разбор
Граница ошибок - классовый компонент со статическим getDerivedStateFromError
(показать запасной интерфейс) и componentDidCatch (отправить в мониторинг). Хуковой
версии до сих пор нет.
Она ловит ошибки рендера, конструкторов и эффектов у детей - и не ловит ошибки
обработчиков событий, асинхронного кода и самой границы. Для обработчиков нужен обычный
try/catch.
Практический момент: без границ React 16+ размонтирует всё дерево - белый экран вместо одного сломанного виджета. Поэтому границ ставят несколько, вокруг независимых блоков, и каждая показывает своё «этот блок не загрузился».
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.