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

17

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

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

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

    
задан shershen 29.06.2012 в 08:53
источник
  • обратитесь по этой ссылке: openmymind.net/2012/4/4/You-Really-Should-Log-Client-Side-Error –  Vishal Suthar 29.06.2012 в 09:02
  • Я не пробовал это самостоятельно, но такие решения могут выглядеть интересными: proxino.com –  Alexander Beletsky 29.06.2012 в 09:11
  • Спасибо Тамилу и Александру, но в моем случае я не могу использовать аутсорсинг и не расположен внутри своих сетевых сервисов –  shershen 29.06.2012 в 09:25
  • мы можем это сделать? stackoverflow.com/questions/43134563/... –  Khawaja Asim 31.03.2017 в 09:25

6 ответов

24

Посмотрите на 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;
}
    
ответ дан voithos 29.06.2012 в 09:06
источник
  • Вы должны добавить к этому функцию дросселирования. Если клиент попадает в цикл, который генерирует ошибки, клиенты быстро дойдут до вашей конечной точки ведения журнала. Проверьте этот репо на отличный пример. github.com/TrackJs/Tech-Demo –  Todd Gardner 28.10.2013 в 15:05
  • dataType: "json" –  0fnt 22.11.2014 в 12:26
  • contentType должно быть «application / json» –  Kildareflare 11.05.2015 в 01:52
  • данные должны быть сжаты JSON: данные: JSON.stringify –  Kildareflare 11.05.2015 в 01:52
12

Отказ от ответственности: я являюсь генеральным директором и создателем Sentry , с открытым исходным кодом и платной услугой, которая создает отчеты о сбоях на многих языках, включая Javascript .

Это может быть довольно сложно захватить исключения frontend. Технология стала лучше (браузерные JS-движки), но все еще есть много ограничений.

  1. Вам понадобится конечная точка ведения журнала на стороне сервера. Это имеет несколько сложностей, так как можно злоупотреблять им (т. Е. Тестеры PEN могут попытаться выявить в нем уязвимости). Вам также нужно иметь дело с CORS здесь. Я бы рекомендовал Sentry для этого, так как мы лучшие в классе, и если вы хотите, вы можете разместить сервер самостоятельно (как его открытый исходный код).
  2. Реализация фактического захвата ошибок в вашем коде довольно сложна. Вы не можете полагаться на window.onerror по разным причинам (главным образом потому, что браузеры исторически дают плохую информацию здесь). Что мы делаем в клиенте raven.js (который основан на TraceKit), является патчем для ряда функций, try / catch. Например, window.setTimeout . С этим мы можем установить обработчики ошибок, которые будут генерировать полные стеки в большинстве браузеров.
  3. Вам нужно убедиться, что вы генерируете исходные коды для своего кода и что сервер, обрабатывающий данные, поддерживает их. Sentry делает это, читая их автоматически (по стандартам) или позволяя загружать их через API . Без этого, предполагая, что вы уменьшаете код, все становится практически непригодным.
  4. Последней главной проблемой является шум. Большинство расширений браузера будут вставляться непосредственно в ваши сценарии, поэтому вам необходимо отфильтровать шум. Мы решаем это двумя способами: черный список шаблонов для игнорирования (т. Е. «Ошибка скрипта», являющийся самым бесполезным), а также белый список доменов, принимаемых (то есть «example.com»). Мы обнаружили, что сочетание двух из них является достаточно эффективным для устранения большинства случайных шумов.

Некоторые вещи, о которых вы должны знать на сервере:

  • Клиенты иногда остаются открытыми (то есть ботом или плохим пользователем) и вызывают большие количества бесполезных данных или простых старых ошибок.
  • Ваш сервер должен иметь возможность обрабатывать каскад этих событий и терпеть неудачу изящно. Sentry делает это путем ограничения скорости и данных выборки.
  • Исключения локализованы в язык браузера, и без централизованной базы данных вы будете зацикливаться, переведя их самостоятельно (хотя в целом это очевидно, что они означают).
ответ дан David Cramer 25.06.2015 в 03:26
источник
2

Если вы хотите сделать безболезненную реализацию, просто разместите этот javascript-код для парней в своем приложении. Else Если вы хотите его реализовать, попробуйте это , чтобы получить stacktrace на window error , и вы можете использовать ajax для сообщения об ошибках. хороший способ отслеживать ошибки, о которых сообщает olark     

ответ дан Tamil 29.06.2012 в 09:12
источник
2

Ссылка Должно к трюку. Ссылка Не предоставляет столько информации для отладки, но также кажется приятным.

proxino, похоже, не знают, что они делают, они, где вносят полный jQuery в свой логический код для регистрации событий onerror в последний раз, когда я проверял. Я бы не стал доверять службе, которая так мало разбирается в JavaScript на стороне клиента, чтобы регистрировать мои ошибки JavaScript.

    
ответ дан Allan Ebdrup 01.07.2012 в 19:28
источник
  • Стоит отметить, что Proxino также имеет версию сценария без jQuery, хотя по-прежнему требуется загрузить jQuery на вашу страницу. proxino.com/documentation –  Joshua Clanton 18.07.2012 в 20:43
1

Я рекомендую использовать службу JsLog.me

Он может захватывать весь вывод консоли в дополнение к ошибкам и stacktraces. Мы используем его в наших проектах, регистрация журнала всей консоли помогает нашей команде контроля качества записывать способ воспроизведения проблем. Кроме того, он хорошо работает с крупными объектами JSON, такими как в консоли Chrome, и имеет поиск.

    
ответ дан Alexey Petushkov 25.11.2014 в 17:31
источник
1

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

Ссылка

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

    
ответ дан Fizer Khan 08.07.2015 в 16:40
источник