Не пропусти js-ошибку / forpes.ru

Главная
Не пропусти js-ошибку

Не пропусти js-ошибку +21

26.03.2016 16:56

hcodes 28 16500 Источник

Разрабатывая и тестируя сайт, зачастую замечаешь не все js-ошибки. Это происходит по ряду причин:

отсутствие консоли в некоторых мобильных и планшетных браузерах;
открытая консоль мешает при тестировании, перекрывая видимую часть страницы;
консоль открывают когда страница уже загрузилась и ошибки, возникающие при загрузке, теряются (Firebug в Firefox, Internet Explorer);
при разработке часто отключают логирование ошибок в системах аналитики, чтобы не было лишнего «шума» при анализе ошибок;
и прочее.

Для решения проблемы я написал небольшой js-скрипт «show-js-error», который выводит приметное сообщение о js-ошибке при её возникновении в браузере.

На показе сообщений всё не заканчивается, важно зарепортить ошибку. Правильное описание бага — починка половины бага.

Для этого в задаче на исправление бага необходимо указать информацию:

описание и тип ошибки;
stack trace или имя файла с номером строки;
адрес страницы;
referrer;
ОС и её версия;
браузер и его версия;
и т.д.

Чтобы каждый раз не тратить время, воспользуемся кнопкой «Copy» для копирования всей информации об ошибке в буфер обмена. Или кнопкой «Send», заведение бага с которой занимает всего один клик.

Правда, для Github?а понадобится два клика — клик на кнопку «Send» в сообщении и «Submit new issue» на самом Github'е.
При заведении нового Issue, заголовок и текст сообщения можно пробросить через GET-параметры.
https://github.com/hcodes/show-js-error/issues/new?title=My%20title&body=My%20text

Быстрый старт

Устанавливаем:

npm install show-js-error

Подключаем на свою страницу в <head> перед всеми скриптами:

<link rel="stylesheet" href="./node_modules/show-js-error/dist/show-js-error.css" />
<script src="./node_modules/show-js-error/dist/show-js-error.js"></script>

Также можно показывать ошибки другого типа, например, ошибки с сервера, проброшенные на страницу:

showJSError.show({
    title: 'Server error',
    message: 'My message',
    stack: 'My stack'
});

В итоге:

меньше ошибок в проде;
«лечим» ошибки при разработке, а не в проде;
быстро и четко ставим задачи на починку багов;
упрощаем жизнь тестировщикам.

Ссылки:

Комментарии (28)

Pilat
26.03.2016 22:09
#8823134
-26
npm install — как современно то…
1. ivaaaan
  26.03.2016 22:14
  #8823138
  +6
  Сарказм? Чем вам не угодил npm?
1. DevGood
  26.03.2016 22:46
  #8823180
  +4
  Ух как интересно стало — что не так с npm? Сначало даже подумал, что пропустил рождение новой звезды — но нет, nodejs все еще использует и поставляется с npm.
1. monolithed
  26.03.2016 23:08
  #8823226
  Суть претензии в этом?
  1. Pilat
    26.03.2016 23:31
    #8823262
    -14
    Именно в этом.
    
    monolithed
    26.03.2016 23:56
    #8823290
    +3
    Проблема даже не в самом npm, а registry (хранилище пакетов).
    
    # Проверяем путь к хранилищу пакетов ? npm get registry http://registry.npmjs.org/ # Устанавливаем пакет в альтернативное хранилище: ? npm install --registry="https://путь к вашему локальному хранилищу"
    
    В таком случае, никаких претензий не будет, поскольку все файлы будет храниться в том месте где вам удобно.
    Также есть IPFS...
    
    taliban
    28.03.2016 11:37
    #8825338
    То что другие используют идиотский подход при разработке пакетов, совершенно не значит что сама идея пакетов плоха, и не нужно их использовать.

alex_blank
26.03.2016 23:27
#8823254
+6
Я когда-то давно сделал Panic.js для того же самого, но все никак руки не дойдут написать статью.
Тут ловятся непойманные исключения, парсится коллстек и загружаются исходники, разворачиваемые по клику:
1. Eugeny1987
  28.03.2016 00:17
  #8824872
  в Opera 12 только не работает (
  i.imgur.com/b65wveY.png
  1. alex_blank
    31.03.2016 11:44
    #8832046
    Видимо, там другой формат колл-стека, надо в этот модуль дописать его парсер:
    https://github.com/xpl/useless/blob/master/base/reflection.js
    Не обещаю, что это удастся сделать в обозимом будущем, но спасибо за репорт.
1. kemsky
  28.03.2016 03:57
  #8824956
  125 кб + зависимости, к большому сожалению.
  1. alex_blank
    31.03.2016 11:41
    #8832030
    Это не для использования на продакшене — а для дебага лишняя сотня кб не проблема. Оно еще и вешает хук на все коллбеки EventTarget, поэтому страдает производительность (теоретически). Дело в том, что это не stand-alone инструмент, а часть здорового фреймворка, который оно весь тянет за собой. В будущем я хочу отделить его в самостоятельный проект, с минимумом зависимостей, тогда размер будет маленький. Собственно, это та причина, по которой это нигде особо не публиковалось пока.
1. Buscando
  28.03.2016 23:29
  #8826848
  Хорошая вещица!

arty
26.03.2016 23:28
#8823256
+4
рекомендую почитать про Sentry и Raven.js
1. gearbox
  27.03.2016 02:45
  #8823540
  Добавлю bugsnag к списку.
  1. serf
    27.03.2016 12:18
    #8823878
    и вот https://airbrake.io/
1. markusweb
  27.03.2016 14:58
  #8824076
  +1
  Rollbar — есть бесплатный план.
  1. arty
    27.03.2016 14:59
    #8824080
    +2
    сервер Sentry можно вообще на свою машину установить, это вроде бы единственное open-source решение
    
    leoismyname
    27.03.2016 17:28
    #8824388
    Можно, кстати, отказаться от использования Sentry и использовать отдельно реализацию Raven JavaScript, указать свой эндпоинт в настройках, затем ловить то, что будет приходить :)

serf
27.03.2016 12:09
#8823868
+1
Вот это можно было бы использовать как солидный парсер stacktrace (там есть всякие нюансы, кросс браузерность и тд) https://github.com/stacktracejs/stacktrace.js В принципе эта либа + простейший UI и библиотека не нужна.
1. alex_blank
  27.03.2016 17:24
  #8824376
  В Safari есть такая проблема, что в onerror не передается объект Error, поэтому вы не сможете получить коллстек в unhandled exception listener'е.
  
  В Panic.js упомянутом выше это обходится с помощью следующего work-around: поскольку практически весь реальный код выполняется внутри какого-либо колбека (setTimeout, addEventListener и т.п.), и таких «точек входа» не так много, то можно их все заврапить в try/catch:
  
  https://github.com/xpl/useless/blob/master/base/uncaught.js
  https://github.com/xpl/useless/blob/master/base/uncaughtAsync.js
  
  Дополнительно это дает возможность строить асинхронные колл-стеки. Что забавно, хромовский веб-инспектор именно такие стеки и показывает, но при этом в объект Error передается «обычный» урезанный стек, без асинхронного контекста. Это фейл. Собственно, Panic.js позволяет получать полный стек на любой платформе, вне зависимости от прихотей браузера.
  
  Что интересно, это позволяет пойти еще дальше — можно пробрасывать в AJAX-запросах серверный стек, и получать «сквозную» трассировку, с непрерывным стеком клиента и сервера, как будто и нет никакого разделения:
  1. alex_blank
    27.03.2016 17:28
    #8824384
    Для Node.js там реализован няшный текстовый принтер эксепшенов, тоже со строками кода и табличным форматированием:
  1. vitalets
    28.03.2016 11:03
    #8825230
    А умеет Panic.js отлавливать непойманные режекты в промисах?
    Кажется, что пока onunhandledrejection не будет доступно в браузерах, сделать это проблематично.
    
    alex_blank
    31.03.2016 11:48
    #8832060
    Неа, мне даже пока это не приходило в голову, но идея хорошая.

FrozenInternet
28.03.2016 00:17
#8824874
Почему бы не добавить пакет в bower, раз инструмент используется в браузерах и на клиентах?
Так гораздо проще будет пользоваться тем, кто настроил клиентский инжект на страницу :)
1. hcodes
  28.03.2016 12:52
  #8825578
  http://bower.io/search/?q=show-js-error

vitalets
28.03.2016 11:00
#8825220
Хороший модуль. Кстати в дефолтную поставку можно добавить отпарвку ошибки в гугл аналитикс. Это самое простое решение, про него уже несколько раз писали на хабре.
1. hcodes
  28.03.2016 12:59
  #8825606
  А почему GA, а не Метрику?
  Цель у show-js-error лишь одна — выводить приметное сообщение при возникновении js-ошибки.