Перехват ошибок на front-end с помощью js

Некоторые ошибки происходят на стороне пользователя и не попадают в логи на сервере. В этом могут быть виноваты настройки сети, плагины браузера, которые установил пользователь, политики безопасности или антивирус, которые блокируют загрузку некоторых файлов.

О наличии такой проблемы сложно узнать, т.к. обычный пользователь едва ли станет тратить своё время, чтобы сообщить о ней, а в логах на сервере вы их просто не увидите.

Предлагаемый подход основан на обработке в js ошибок объекта браузера window и отправке этих данных на сервер.

Пусть скрипт на сервере находится по адресу: /front-end/logger. Он читает GET параметры и где то их сохраняет. А пока нужно выполнить перехват и обработку ошибки на front-end:

Скрипт собирает следующий пакет данных:

Если удаётся получить http код ошибки, то скорее всего вы найдете её и в логах на веб-сервере (либо в логах одного из прокси или кеширующих серверов). Если же вместо http кода вы получаете ‘FETCH ERROR’, то файл был блокирован до запроса на сервер и надо разбираться почему это происходит со стороны пользователя.

Ошибки типа LINK — это ошибки при загрузке CSS/JS файлов. Они могут сильно влиять на работу сайта, им нужно уделить пристальное внимание.

Back-end часть logger-а для Drupal

Придумать куда писать логи на back-end, вам не составит труда для вашего частного случая. Но у меня есть готовый вариант для cms drupal 7, и я им здесь поделюсь.

Одна функция объявляет end-point для вызова логирования, а вторая функция — запись лога в системный лог cms.

Мало букафф? Читайте есчо !

Обработка событий загрузки изображения

Май 16, 2025 г.

В веб-разработке важно уметь правильно обрабатывать процесс загрузки изображений. Браузеру может потребоваться время на подгрузку файла, особенно при медленном соединении или больших изображениях. Задача разработчика — отслеживать статус загрузки изображения ...

Читать

Leaflet использование SVG картинки вместо географической карты

Апрель 28, 2018 г.

Javascript библиотека Leaflet для организации работы с картами помимо гео-карт позволяет работать с произвольными наложениями в режиме "без гео-карты". ...

Читать

Ajax в Drupal 7

Август 31, 2015 г.

Расскажу про использование техники ajax в рамках движка Drupal. Начнем с теоретических моментов. Во-первых, чтобы получить какие то данные с веб-сайта под Drupal, нужно чтобы соответствующий адрес существовал на сайте. Во-вторых, нам не хотелось бы ...

Читать

Проверка checkbox состояния checked, jQuery

Февраль 19, 2020 г.

Шаблон для проверки состояния элемента input[type='checkbox']. Код проверяет отмечен элемент или нет. [crayon-6876b238e14d3954062065/] Проверка выполняется с помощью метода is(), который читает в данном случае не атрибуты тега input, а именно ...

Читать
 

Комментарии к «Перехват ошибок на front-end с помощью js»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: