Как перехватывать ошибки JavaScript на веб-странице?

Как перехватывать ошибки JavaScript на веб-странице?

• Для синхронных исключений применяют глобальный обработчик ошибок через window.onerror
• Чтобы подробно отслеживать ошибки загрузки ресурсов и JavaScript, используют window.addEventListener('error', ...)
• Событие window.addEventListener('unhandledrejection', ...) перехватывает ошибки Promise, для которых не был вызван catch
• Для локальной обработки исключений внутри функций и отдельных участков кода используют конструкцию try...catch
• Для накопления и анализа ошибок приложение интегрируют с системами логирования, например Sentry или LogRocket
• При асинхронном выполнении Promise по умолчанию не выбрасывают ошибки наружу, поэтому требуются обработчики unhandledrejection
• В React и Angular предусмотрены собственные Error Boundaries и другие механизмы обработки ошибок компонентов

Итог: для полного контроля и анализа сбоев объединяют глобальные обработчики, локальные конструкции try...catch и системы мониторинга.

Подробный ответ

Основной ответ

Чтобы перехватывать ошибки JavaScript на веб-странице, обычно настраивают глобальные обработчики. Они позволяют обнаруживать и синхронные исключения, и асинхронные сбои, включая ошибки, возникающие в Promise. На практике применяют window.onerror, window.addEventListener('error') и window.addEventListener('unhandledrejection').

Ключевые моменты

• window.onerror — традиционный обработчик необработанных исключений. Он предоставляет сообщение об ошибке, URL, номер строки и столбца. Этот вариант подходит для синхронных ошибок, однако не перехватывает Promise rejection.
• window.addEventListener('error') — позволяет отслеживать не только ошибки JavaScript, но и сбои при загрузке ресурсов, включая изображения и скрипты. События можно отбирать по их типу.
• window.addEventListener('unhandledrejection') — предназначен для необработанных Promise rejection, которые не попадают в window.onerror.

Для полноценного мониторинга рекомендуется задействовать все три механизма. Это особенно важно для современных SPA, где активно используется асинхронный код.

Практический контекст

В приложениях, работающих в продакшене, часто используют сервисы вроде Sentry. Они задействуют перечисленные механизмы, чтобы собирать и объединять ошибки, сохраняя подробный стек вызовов и метаданные. Дополнительно можно настроить локальный логгер, который отправляет сведения об ошибках на сервер для дальнейшего анализа или формирования уведомлений. Например, в React 18 доступны собственные Error Boundaries для перехвата ошибок в UI-компонентах; они дополняют глобальные обработчики.