Обработка ошибок
Вопрос
Как правильно обрабатывать ошибки во фронтенде?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
try/catch ловит только синхронные ошибки в своём блоке
асинхронные ошибки - через catch промиса или try вокруг await
ошибка в колбэке setTimeout не ловится внешним try
свои классы ошибок через extends Error помогают различать случаи
глобальные ловушки: window.onerror и unhandledrejection
в React рендер-ошибки ловит только error boundary
Что могут спросить следом
- Почему error boundary не ловит ошибку из обработчика клика
- Что делать с ошибкой, которую нельзя починить
- Как отличить ожидаемую ошибку от бага
Разбор
try/catch работает только для синхронного кода в своём блоке: ошибка из колбэка
setTimeout или из неожиданного промиса до него не долетит. Асинхронные ошибки ловятся
.catch() или try вокруг await.
Свои типы (class NotFoundError extends Error) позволяют различать случаи без разбора
строки сообщения. Наверху нужны глобальные ловушки - window.addEventListener('error')
и 'unhandledrejection' - они отправляют то, что не поймали, в Sentry или GlitchTip.
В React ошибки рендера перехватывает только error boundary, и только классовый компонент.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.