Перехват ошибок на 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.

Написать комментарий

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

Исправление плагина jquery.jslider.js

Июнь 8, 2017 г.

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

Читать

Найти элемент по его классу в HTML на чистом js

Май 4, 2020 г.

Немного ванильного js, на этот раз: как найти контейнер по указанному классу. Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent. В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...

Читать

 

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

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



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