Как мы отслеживаем ошибки 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 и другие трекеры должны попробовать / поймать.
- что произойдет, если мы найдем способ сделать глобальную оболочку?
- мы можем просто позвонить stacktrace и ждать улова?
как я могу отправить трассировку стека на мой сервер, когда на клиенте возникает непредвиденная ошибка? Любые советы или передовая практика?
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 для захвата трассировки стека, так как для этого требуется отдельный путь кода для каждого браузера.
Я соучредитель TrackJS, упомянутый выше. Вы правы, иногда получение трассировки стека требует немного работы. На каком-то уровне, асинхронные функции должны быть обернуты в try/catch блок, но мы делаем это автоматически!
В TrackJS 2.0+ любая функция, которую вы передаете в обратный вызов (addEventListener
, setTimeout
и т. д.) будет автоматически завернут в try / catch. Мы обнаружили, что можем поймать почти все.
для тех немногих вещей, которые мы могли бы теперь, вы всегда можете попробовать/поймать его самостоятельно. Мы предоставляем некоторые полезные обертки, чтобы помочь, например:
function foo() {
// does stuff that might blow up
}
trackJs.watch(foo);
в последних браузерах есть 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-адреса, теги и т.д.
@Da3 вы спросили о appenlight и stacktraces. Да, он может собирать полные stacktraces, пока вы обертываете исключение в блоке try/catch. В противном случае он попытается прочитать информацию из окна.число которых очень ограничено. Это ограничение браузера (которое может быть исправлено в будущем).