Как мы отслеживаем ошибки Javascript? Действительно ли существующие инструменты работают?

сегодня я нахожу необходимость отслеживать и извлекать ошибку Javascript stacktrace для их решения.

сегодня мы смогли захватить все вызовы rest, идея заключается в том, что как только вы получите ошибку, автоматически опубликует stacktrace этой ошибки плюс ответы остальных сохраненных сервисов, чтобы мы могли обнаруживать, воспроизводить и решать проблемы почти в идентичной среде/ситуации.

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

цель состоит в том, чтобы создать инструмент, который может быть включен в уже разработанную систему и отслеживать события ошибки (как консоли).

Я читал об этих трекерах логика:

  • errorception.com/
  • atatus.com/
  • trackjs.com/
  • тормоз.Ио/
  • jslogger.com/
  • getsentry.com/
  • bugsense.com/
  • qbaka.com/
  • muscula.com/
  • exceptionhub.com/
  • debuggify.net/
  • raygun.io / home

нам нужно сделать что-то подобное, отследить ошибку и отправить ее наш сервер.

Как говорит "Dagg Nabbit"... "трудно получить трассировку стека из ошибок, которые происходят" в дикой природе "прямо сейчас"...

Итак, мы получили много платных продуктов, но как они действительно работают?

в Airbrake они используют stacktrace и window.метод onerror:

window.onerror = function(message, file, line) {
  setTimeout(function() {
    Hoptoad.notify({
      message : message,
      stack   : '()@' + file + ':' + line
    });
  }, 100);
  return true;
};

но я не могу понять, когда stacktrace действительно использовался.

в какой-то момент stacktrace, raven.js и другие трекеры должны попробовать / поймать.

  1. что произойдет, если мы найдем способ сделать глобальную оболочку?
  2. мы можем просто позвонить stacktrace и ждать улова?

как я могу отправить трассировку стека на мой сервер, когда на клиенте возникает непредвиденная ошибка? Любые советы или передовая практика?

21
debugging frontend javascript stack-trace tracking

4 ответов

трудно получить трассировку стека из ошибок, которые происходят" в дикой природе " прямо сейчас, потому что объект ошибки недоступен window.onerror.

window.onerror = function(message, file, line) { }

также новая error событие, но это событие не раскрывает объект ошибки (пока).

window.addEventListener('error', function(errorEvent) { })

скоро window.onerror будет пятый параметр содержащий объект ошибки, и вы, вероятно, можете использовать stacktrace.js чтобы захватить трассировку стека во время window.onerror.

<script src="stacktrace.js"></script>
<script>
window.onerror = function(message, file, line, column, error) {
    try {
        var trace = printStackTrace({e: error}).join('\n');
        var url = 'http://yourserver.com/?jserror=' + encodeURIComponent(trace);
        var p = new printStackTrace.implementation();
        var xhr = p.createXMLHTTPObject();

        xhr.open('GET', url, true);
        xhr.send(null);
    } catch (e) { }
}
</script>

в какой-то момент API ошибок, вероятно, будет стандартизирован, но на данный момент каждая реализация отличается, поэтому, вероятно, разумно использовать что-то вроде stacktracejs для захвата трассировки стека, так как для этого требуется отдельный путь кода для каждого браузера.

8

Я соучредитель TrackJS, упомянутый выше. Вы правы, иногда получение трассировки стека требует немного работы. На каком-то уровне, асинхронные функции должны быть обернуты в try/catch блок, но мы делаем это автоматически!

В TrackJS 2.0+ любая функция, которую вы передаете в обратный вызов (addEventListener, setTimeout и т. д.) будет автоматически завернут в try / catch. Мы обнаружили, что можем поймать почти все.

для тех немногих вещей, которые мы могли бы теперь, вы всегда можете попробовать/поймать его самостоятельно. Мы предоставляем некоторые полезные обертки, чтобы помочь, например:

function foo() {
  // does stuff that might blow up
}

trackJs.watch(foo);
7

в последних браузерах есть 5-й параметр для объекта error в window.onerror. В addEventListener, вы можете получить объект ошибки event.error

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendData(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (event) {
    console.log(e.error.message, "from", event.error.stack);
    // You can send data to your server
    // sendData(data);
})

вы можете отправить данные с помощью тега изображения следующим образом

function sendData(data) {
    var img = newImage(),
        src = http://yourserver.com/jserror + '&data=' + encodeURIComponent(JSON.stringify(data));

    img.crossOrigin = 'anonymous';
    img.onload = function success() {
        console.log('success', data);
    };
    img.onerror = img.onabort = function failure() {
        console.error('failure', data);
    };
    img.src = src;
}

если вы ищете opensource, то вы можете оформить заказ TraceKit. TraceKit выжимает как можно больше полезной информации и нормализует ее. Вы можете зарегистрировать подписчика для отчетов об ошибках:

TraceKit.report.subscribe(function yourLogger(errorReport) {
    // sendData(data);
});

однако вы должны сделать backend для сбора данных и front-end для визуализации данных.

отказ от ответственности: я веб-разработчик в https://www.atatus.com/ где вы можете отслеживать все ваши ошибки JavaScript и фильтровать ошибки в различных измерениях, таких как браузеры, пользователи, URL-адреса, теги и т.д.

3

@Da3 вы спросили о appenlight и stacktraces. Да, он может собирать полные stacktraces, пока вы обертываете исключение в блоке try/catch. В противном случае он попытается прочитать информацию из окна.число которых очень ограничено. Это ограничение браузера (которое может быть исправлено в будущем).

0