Регистрация ошибок для javascript на стороне клиента
Мой проект, который содержит много страниц с формами. Это база банковской системы CRM, поэтому любая ошибка во время рабочего процесса должна быть зафиксирована и исследована.
На стороне сервера у нас есть усовершенствованная система исключений java, но если ошибка возникает на стороне клиента - javascript, единственная информация, которую мы теперь получаем, - это окно js-error в IE или иногда скриншот страницы, сделанный продвинутым пользователем.
Javascript-код содержит как пользовательские расширения пользовательского интерфейса JQuery, так и встроенные обработчики и функции встроенного события.
Итак, я спрашиваю, можно ли использовать какой-либо подход для захвата js-ошибок любого типа?
некоторая дополнительная библиотека или что-то, что могло бы дать мне стек, как firebug в Mozilla или веб-консоль в Chrome?
Ответы
Ответ 1
Посмотрите window.onerror
. Если вы хотите зафиксировать какие-либо ошибки и сообщить о них на сервер, вы можете попробовать AJAX-запрос, возможно.
window.onerror = function(errorMessage, errorUrl, errorLine) {
jQuery.ajax({
type: 'POST',
url: 'jserror.jsf',
data: {
msg: errorMessage,
url: errorUrl,
line: errorLine
},
success: function() {
if (console && console.log) {
console.log('JS error report successful.');
}
},
error: function() {
if (console && console.error) {
console.error('JS error report submission failed!');
}
}
});
// Prevent firing of default error handler.
return true;
}
Ответ 2
Отказ от ответственности: я являюсь генеральным директором и создателем Sentry, с открытым исходным кодом и платной услугой, которая создает отчеты о сбоях для многих языков, включая Javascript.
Это может быть довольно сложно захватить исключения frontend. Технология стала лучше (браузерные JS-двигатели), но все еще существует множество ограничений.
- Вам понадобится конечная точка ведения журнала на стороне сервера. Это имеет несколько сложностей, так как можно злоупотреблять им (т.е. Тестеры PEN могут попытаться выявить в нем уязвимости). Вам также нужно иметь дело с CORS здесь. Я бы рекомендовал Sentry для этого, так как мы лучшие в классе, и если вы хотите, вы можете разместить сервер самостоятельно (как его открытый исходный код).
- Реализация фактического захвата ошибок в вашем коде довольно сложна. Вы не можете полагаться на
window.onerror
по разным причинам (главным образом потому, что браузеры исторически дают плохую информацию здесь). Что мы делаем в клиенте raven.js (который основан на TraceKit), является патчем для нескольких функций, чтобы обернуть их в заявления try/catch. Например, window.setTimeout
. С этим мы можем установить обработчики ошибок, которые будут генерировать полные стеки в большинстве браузеров.
- Вам нужно убедиться, что вы генерируете исходные коды для своего кода и что сервер, обрабатывающий данные, поддерживает их. Sentry делает это как путем автоматического скремблирования (по стандартам), так и для загрузки через API . Без этого, предполагая, что вы уменьшаете код, все становится практически непригодным.
- Последней главной проблемой является шум. Большинство расширений браузера будут вводиться непосредственно в ваши сценарии, поэтому вам нужно отфильтровать шум. Мы решаем это двумя способами: черный список шаблонов для игнорирования (т.е. "Script ошибка", являющийся самым бесполезным), а также белый список доменов для принятия (т.е. "Example.com" ). Мы обнаружили, что сочетание двух из них является достаточно эффективным для устранения большинства случайных шумов.
Некоторые вещи, о которых вы должны знать на сервере:
- Клиенты иногда остаются открытыми (то есть ботом или плохим пользователем) и вызывают большие количества бесполезных данных или простых старых ошибок.
- Ваш сервер должен иметь возможность обрабатывать каскад этих событий и терпеть неудачу изящно. Sentry делает это путем ограничения скорости и данных выборки.
- Исключения локализованы в язык браузера, и без централизованной базы данных вы будете зацикливаться, переведя их самостоятельно (хотя в целом это очевидно, что они означают).
Ответ 3
Если вы хотите сделать безболезненную реализацию, просто поставьте этот код JavaScript javascript в вашем приложении. Else Если вы хотите его реализовать, попробуйте this, чтобы получить стек на t20 > error
, и вы можете использовать ajax
для отчета ошибки. A хороший способ отслеживать ошибки, о которых сообщает olark
Ответ 4
http://exceptionhub.com
Должно к трюку.
http://errorception.com/
Не предоставляет столько информации для отладки, но также кажется приятным.
proxino, похоже, не знают, что они делают, они, где вносят полный jQuery в свой логический код для регистрации событий onerror в последний раз, когда я проверял. Я бы не стал доверять службе, которая так мало разбирается в JavaScript на стороне клиента, чтобы регистрировать мои ошибки JavaScript.
Ответ 5
Я рекомендую использовать JsLog.me сервис
Он может захватывать весь вывод консоли в дополнение к ошибкам и stacktraces. Мы используем его в наших проектах, регистрация журнала всей консоли помогает нашей команде контроля качества записывать способ воспроизведения проблем. Кроме того, он хорошо работает с крупными объектами JSON, такими как в консоли Chrome, и имеет поиск.
Ответ 6
Если ваш сайт использует 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 своих пользователей:
- В Google Analytics щелкните раздел
Behavior
, а затем отчет Top Events
.
- Вы получите список категорий событий. Нажмите
window.onerror
в списке.
- Вы увидите список трассировок стека Javascript и сообщений об ошибках. Добавьте в отчет столбец для версий ОС/браузеров своих пользователей, нажав кнопку
Secondary dimension
и введя Event Label
в появившемся текстовом поле.
- Отчет будет выглядеть как на скриншоте ниже.
- Чтобы перевести строки ОС/браузера в более понятные человеку описания, я скопировал и вставил их в https://developers.whatismybrowser.com/useragents/parse/
![enter image description here]()
Ответ 7
Atatus фиксирует ошибки JavaScript, а также фиксирует действия пользователя, предшествующие ошибке. Это поможет лучше понять ошибку. Atatus помогает вам контролировать внешний интерфейс, а не только за ошибки, но и за его производительность (Real User Monitoring)
https://www.atatus.com/
Отказ от ответственности: Im веб-разработчик Atatus.