Ловіть всі помилки JavaScript і відправляйте їх на сервер

Мені було цікаво, чи є у когось досвід поводження з помилками JavaScript у всьому світі та надсилати їх із клієнтського браузера на сервер.

Я думаю, що моя суть є цілком зрозумілою, я хочу знати всі винятки, помилки, помилки компіляції тощо, які трапляються на стороні клієнта, і надсилати їх на сервер, щоб повідомити про них.

В основному я використовую MooTools і head.js(для сторони JS) та Django для серверної сторони.

Нещодавно я тестував Sentry на виробництві, і він працює чудово (JS та інші мови, як PHP)

1- Це відкритий код (Ви можете встановити його на власному сервері) 2- Ви можете використовувати безкоштовний план (100 звітів на день)

Або встановіть його на свій сервер: github.com/getsentry

Я б перевірив window.onerror

Приклад:

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

Пам’ятайте, що повернення істини запобіжить запусканню обробника за замовчуванням, а повернення помилкового дозволить оброблювачу за замовчуванням працювати.

Якщо ваш веб-сайт використовує 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/

Не намагайтеся скористатися сторонніми послугами, а спробуйте самостійно.

Обробники помилок можуть знайти нижченаведені сценарії,

1. Не вдалося схопити TypeError
2. Uncaught ReferenceError неможливо захопити, наприклад: var.click ()
3. TypeError можна захопити
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
      }
   })
})

Також сервіс http://jslogger.com може допомогти у цьому:

Журнал Помилки Javascript та події у хмарі

з http://jslogger.com/features :

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

ВІДПОВІДАЛЬНІСТЬ: не пов'язана з послугою / компанією.

Ви можете спробувати Atatus - це нова послуга відстеження помилок JavaScript разом із реальним моніторингом користувачів (RUM) для сучасних веб-додатків.

Ми не тільки фіксуємо помилки, але й події користувачів, які викликали помилку. Це дає вам кроки для відтворення помилки в кінці.

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

https://www.atatus.com/

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

Відмова: Я веб-розробник Atatus.

Неперехваченная бібліотека хороший безкоштовний спосіб захоплення всіх помилки JS, в тому числі необроблених відмов.

Ви можете перевірити цю нову послугу http://rescuejs.com/ . https://bugsnag.com/

Дозволяє реєструвати всі ваші помилки javascript без запису коду на стороні сервера. Він також відстежує версії браузера тощо.

Я не впевнений, що вважав би їх на 100% готовими до підприємств, але це обов'язково варто перевірити.