Поймать все ошибки JavaScript и отправить их на сервер

232

Я задавался вопросом, есть ли у кого-нибудь опыт обработки ошибок JavaScript в глобальном масштабе и отправки их из клиентского браузера на сервер.

Я думаю, что моя точка зрения достаточно ясна, я хочу знать все исключения, ошибки, ошибки компиляции и т. Д., Которые происходят на стороне клиента, и отправлять их на сервер, чтобы сообщить о них.

Я в основном использую MooTools и head.js(для стороны JS) и Django для стороны сервера.

Оливье Жирардо
источник
20
Я не понимаю, почему этот вопрос неясен.
Майкл Хилус,
3
Проголосовал дважды, чтобы вновь открыть вопрос, но безуспешно. Совершенно непонятно, почему этот вопрос закрыт как неясный.
Мухаммед Усман
7
@ andrew-barber - если так много пользователей находят этот вопрос достаточно уместным, чтобы поставить его на голосование, то, возможно, если вам непонятно, проблема с вами ??
Исапир
5
Этот вопрос не только понятен, но и недооценен :)
Теоман Шипахи

Ответы:

16

Я недавно тестировал Sentry на производстве, и он отлично работает (JS и другие языки, такие как PHP)

1- Это открытый исходный код (вы можете установить его на свой сервер). 2- Вы можете использовать бесплатный тариф (100 отчетов в день).

Или установите его на свой сервер: github.com/getsentry

Тарек
источник
Обратите внимание, что у них есть неограниченный бесплатный план для образовательных учреждений
christianvuerings
8
Кажется, больше нет открытого кода, все варианты платные?
Дэвид Кампс
4
@DavidCumps Они по-прежнему предлагают бесплатный сервис (пробный), но вы получаете только 7-дневную историю ошибок или вы можете установить ее на своем собственном сервере с момента его открытого источника ( github.com/getsentry )
Tarek
1
В Google Tag Manager есть прослушиватель ошибок Javascript, возможно, стоит его проверить, особенно если вы уже используете GA
Adrian Gunawan
Вы должны также проверить TrackJS для этого. Это платный сервис, но он предоставляет массу контекста о том, как пользователь попал в ситуацию ошибки при отладке. Я один из разработчиков и исправил множество ошибок с ним :)
Тодд Гарднер
318

Я бы проверил window.onerror

Пример:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Помните, что возвращение true предотвратит запуск обработчика по умолчанию, а возвращение false позволит запустить обработчик по умолчанию.

Майк Льюис
источник
9
Вы хотели бы назначить window.onerror предпочтительно прежде, чем что-либо еще будет запущено. Поэтому, куда бы вы ни захотели поместить его, просто убедитесь, что он работает перед любым другим вашим js-кодом / файлами.
Майк Льюис,
17
Обратите внимание, Mozilla рекомендует: «Обратите внимание, что некоторые / многие события ошибок не вызывают window.onerror, вы должны специально их прослушивать».
Адам Нейлор
88
Да, мне нравится, как он говорит некоторые / многие , очень наглядно - спасибо Mozilla.
Даниэль Мендель
5
Mozilla выставляет GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
roland
1
Что произойдет, если код, который обрабатывает само window.onerror, выдаст ошибку. Есть ли возможность бесконечного цикла?
Мартин Браун
15

Если ваш сайт использует Google Analytics, вы можете делать то, что я делаю:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Несколько комментариев к коду выше:

  • Для современных браузеров полная трассировка стека регистрируется.
  • Для старых браузеров, которые не фиксируют трассировку стека, сообщение об ошибке записывается в журнал. (В основном более ранняя версия iOS в моем опыте).
  • Версия браузера пользователя также регистрируется, так что вы можете видеть, какие версии ОС / браузера выдают какие ошибки. Это упрощает расстановку приоритетов и тестирование ошибок.
  • Этот код работает, если вы используете Google Analytics с «analytics.js», как это . Если вы используете вместо этого «gtag.js», например , вам нужно настроить последнюю строку функции. Смотрите здесь для деталей .

Когда код установлен, вы можете просмотреть ошибки Javascript ваших пользователей:

  1. В Google Analytics щелкните Behaviorраздел, а затем Top Eventsотчет.
  2. Вы получите список категорий событий. Нажмите window.onerrorв списке.
  3. Вы увидите список трассировок стека Javascript и сообщений об ошибках. Добавьте в отчет колонку для версий ОС / браузеров ваших пользователей, нажав Secondary dimensionкнопку и введя Event Labelв появившееся текстовое поле.
  4. Отчет будет выглядеть как на скриншоте ниже.
  5. Чтобы перевести строки ОС / браузера в более понятные человеку описания, я скопировал и вставил их в https://developers.whatismybrowser.com/useragents/parse/

введите описание изображения здесь

Мартин Омандер
источник
3
Это не ловит все ошибки, просто блоки try-catch, хотя это классная вещь для объяснения, и я не думаю, что вы заслуживаете отрицательных голосов.
Ник Стил
Спасибо, Ник! Я обновил свой ответ проверенным в бою кодом, который хорошо работает на моем веб-сайте и фиксирует все ошибки, а не только те, которые вы ловите с помощью try ... catch.
Мартин Омандер,
2

Не пытайтесь использовать сторонние сервисы, а попробуйте сами.

Обработчики ошибок могут поймать следующие сценарии,

  1. Uncaught TypeError не может быть захвачен
  2. Uncaught ReferenceError не может быть захвачен, например: var.click ()
  3. Ошибка типа может быть захвачена
  4. Синтаксическая ошибка может быть зафиксирована
  5. ReferenceError может быть захвачен

Поймать ошибки Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Исправить ошибки AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})
Сэм Рубен
источник
0

Кроме того, http://jslogger.com служба может помочь с этим:

Журнал ошибок и событий Javascript в облаке

с http://jslogger.com/features :

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

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: не связан с сервисом / компанией.

Иван Курманов
источник
1
503 Сервис недоступен
Ракс
0

Вы можете попробовать Ататус - это новая служба отслеживания ошибок JavaScript вместе с Real User Monitoring (RUM) для современных веб-приложений.

Мы не только фиксируем ошибки, но и пользовательские события, которые вызвали ошибку. Это дает вам шаги, чтобы воспроизвести ошибку на вашем конце.

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

https://www.atatus.com/

Документы доступны: https://www.atatus.com/docs

Отказ от ответственности: я веб-разработчик в Atatus.

Физер Хан
источник
1
Я интегрировал Ataus, а потом попробовал что-то вроде foo.bar = '', что вызвало исключение. Но я ничего не вижу в приборной панели Ататуса.
vmachacek
Не могли бы вы, пожалуйста, напишите нам по электронной почте?
Физер Хан
5
Бесстыдная вилка. Реклама должна быть ограничена с правой стороны.
Будет
0

Библиотека uncaught - это хороший бесплатный способ фиксировать все ошибки JS, включая необработанные отклонения.

LeeGee
источник
-2

Возможно, вы захотите проверить эту новую услугу, http://rescuejs.com/ .https://bugsnag.com/

Позволяет регистрировать все ошибки JavaScript без написания кода на стороне сервера. Он также отслеживает версии браузера и так далее.

Я не уверен, что считаю их на 100% «готовыми к предпринимательству», но это определенно стоит проверить.

Lillesand
источник
8
Это было закрыто. Если вы попытаетесь зарегистрироваться сейчас, вы получите сообщение «Спасибо за ваш интерес, к сожалению, Rescue.js больше не работает активно».
День