Попробуйте Atatus, который обеспечивает расширенное отслеживание ошибок и мониторинг реальных пользователей для современных веб-приложений.
https://www.atatus.com/
Позвольте мне объяснить, как получить трассировки стека, которые достаточно полны во всех браузерах.
Обработка ошибок в JavaScript
Современные Chrome и Opera полностью поддерживают проект спецификации HTML 5 для ErrorEvent и window.onerror. В обоих этих браузерах вы можете либо использовать window.onerror, либо правильно связать с событием 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
// sendError(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
console.log(e.error.message, "from", e.error.stack);
// You can send data to your server
// sendError(data);
})
К сожалению, Firefox, Safari и IE все еще существуют, и мы также должны их поддерживать. Поскольку трассировка стека недоступна, window.onerrorнам нужно проделать немного больше работы.
Оказывается, что единственное, что мы можем сделать, чтобы получить трассировки стека от ошибок, - это обернуть весь наш код в try{ }catch(e){ }блок, а затем посмотреть e.stack. Мы можем несколько упростить процесс с помощью функции wrap, которая принимает функцию и возвращает новую функцию с хорошей обработкой ошибок.
function wrap(func) {
// Ensure we only wrap the function once.
if (!func._wrapped) {
func._wrapped = function () {
try{
func.apply(this, arguments);
} catch(e) {
console.log(e.message, "from", e.stack);
// You can send data to your server
// sendError(data);
throw e;
}
}
}
return func._wrapped;
};
Это работает. Любая функция, которую вы переносите вручную, будет иметь хорошую обработку ошибок, но в большинстве случаев оказывается, что мы можем сделать это автоматически.
Изменяя глобальное определение addEventListenerтак, чтобы оно автоматически оборачивало обратный вызов, мы можем автоматически вставлять try{ }catch(e){ }вокруг большей части кода. Это позволяет существующему коду продолжать работать, но добавляет высококачественное отслеживание исключений.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Нам также нужно убедиться, что removeEventListenerпродолжает работать. На данный момент это не так, потому что аргумент к addEventListenerизменен. Опять же, нам нужно только исправить это на prototypeобъекте:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Передайте данные об ошибках в свой бэкэнд
Вы можете отправить данные об ошибке с помощью тега изображения следующим образом
function sendError(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;
}
Отказ от ответственности: я веб-разработчик на https://www.atatus.com/ .
