Атрибут onerror тега <body>

Описание

Атрибут onerror позволяет задать JavaScript-обработчик, который выполняется при возникновении ошибки во время загрузки или выполнения скриптов на странице. Это глобальный обработчик ошибок для всего документа.

Пример использования:
<body onerror="handlePageError(message, url, line, column, error)"> <h1>Мое приложение</h1> <script> function handlePageError(msg, url, line, col, error) { console.error(`Ошибка: ${msg} в ${url}:${line}:${col}`); // Отправка информации об ошибке на сервер return true; // Предотвращает вывод стандартного сообщения об ошибке } // Тестовая ошибка undefinedFunction(); </script> </body>

Параметры обработчика:

Параметр Описание
message Текст сообщения об ошибке
url URL скрипта, в котором произошла ошибка
line Номер строки с ошибкой
column Номер колонки с ошибкой
error Объект Error (не во всех браузерах)

Рекомендации по использованию:

  • Используйте для глобального отлова ошибок на странице
  • Сочетайте с try/catch для важных участков кода
  • Реализуйте отправку ошибок на сервер для анализа
  • Не злоупотребляйте - некоторые ошибки могут быть полезны в development
  • Для современных приложений используйте window.onerror

Практический пример с обработкой ошибок:

<body> <div id="error-container" style="display:none;"></div> <script> window.onerror = function(msg, url, line, col, error) { const errorContainer = document.getElementById('error-container'); errorContainer.innerHTML = ` <div class="alert alert-danger"> <h4>Произошла ошибка</h4> <p>${msg}</p> <small>${url}, строка ${line}:${col}</small> </div> `; errorContainer.style.display = 'block'; // Отправка на сервер if (navigator.onLine) { fetch('/log-error', { method: 'POST', body: JSON.stringify({msg, url, line, col, stack: error?.stack}) }); } return true; // Подавляем стандартное сообщение об ошибке }; </script> </body>

Важные замечания:

  • Не обрабатывает ошибки в промисах (используйте unhandledrejection)
  • Может не срабатывать для некоторых кросс-доменных скриптов
  • Разные браузеры передают разный набор параметров
  • Возврат true предотвращает вывод стандартного сообщения
  • Не заменяет полноценную систему логирования ошибок

Современные альтернативы:

<script> // 1. Обработчик ошибок для промисов window.addEventListener('unhandledrejection', event => { console.error('Unhandled rejection:', event.reason); }); // 2. Использование специализированных сервисов function initErrorTracking() { if (typeof Sentry !== 'undefined') { Sentry.init({dsn: 'YOUR_DSN'}); } } // 3. Глобальный try-catch для асинхронного кода async function runApp() { try { // Весь код приложения } catch (error) { console.error('Global catch:', error); } } </script>

Примечание: Для production-приложений рекомендуется использовать специализированные системы мониторинга ошибок (Sentry, Rollbar и др.), которые предоставляют более полную информацию о возникающих ошибках и контексте их появления.