Спробуйте Atatus, який забезпечує розширене відстеження помилок та реальний моніторинг користувачів для сучасних веб-додатків.
https://www.atatus.com/
Дозвольте мені пояснити, як отримати стек-треки, які достатньо повні у всіх браузерах.
Помилка керування в JavaScript
Сучасні Chrome і Opera повністю підтримують специфікацію проекту HTML 5 для ErrorEvent і window.onerror. В обох цих веб-переглядачах ви можете або window.onerrorправильно використовувати прив'язку до події "помилка":
// 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. Ми можемо зробити процес дещо простішим за допомогою функції під назвою обгортка, яка приймає функцію і повертає нову функцію з хорошим поводженням з помилками.
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/ .
