Подтвердить что ты не робот

Регистрация ошибок для javascript на стороне клиента

Мой проект, который содержит много страниц с формами. Это база банковской системы CRM, поэтому любая ошибка во время рабочего процесса должна быть зафиксирована и исследована. На стороне сервера у нас есть усовершенствованная система исключений java, но если ошибка возникает на стороне клиента - javascript, единственная информация, которую мы теперь получаем, - это окно js-error в IE или иногда скриншот страницы, сделанный продвинутым пользователем.

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

Итак, я спрашиваю, можно ли использовать какой-либо подход для захвата js-ошибок любого типа? некоторая дополнительная библиотека или что-то, что могло бы дать мне стек, как firebug в Mozilla или веб-консоль в Chrome?

4b9b3361

Ответ 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 своих пользователей:

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

enter image description here

Ответ 7

Atatus фиксирует ошибки JavaScript, а также фиксирует действия пользователя, предшествующие ошибке. Это поможет лучше понять ошибку. Atatus помогает вам контролировать внешний интерфейс, а не только за ошибки, но и за его производительность (Real User Monitoring)

https://www.atatus.com/

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