Prova Atatus che fornisce il monitoraggio avanzato degli errori e il monitoraggio degli utenti reali per le app Web moderne.
https://www.atatus.com/
Lascia che ti spieghi come ottenere stack stack ragionevolmente completi in tutti i browser.
Gestione degli errori in JavaScript
Chrome e Opera moderni supportano completamente le specifiche di bozza HTML 5 per ErrorEvent e window.onerror. In entrambi questi browser è possibile utilizzare window.onerroro associare correttamente l'evento "errore":
// 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);
})
Purtroppo Firefox, Safari e IE sono ancora in circolazione e anche noi dobbiamo supportarli. Dato che stacktrace non è disponibile in, window.onerrordobbiamo fare un po 'più di lavoro.
Si scopre che l'unica cosa che possiamo fare per ottenere stacktraces dagli errori è racchiudere tutto il nostro codice in un try{ }catch(e){ }blocco e quindi guardare e.stack. Possiamo semplificare un po 'il processo con una funzione chiamata wrap che accetta una funzione e restituisce una nuova funzione con una buona gestione degli errori.
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;
};
Questo funziona Qualsiasi funzione che avvolgi manualmente avrà una buona gestione degli errori, ma si scopre che possiamo effettivamente farlo automaticamente per te nella maggior parte dei casi.
Modificando la definizione globale di in addEventListenermodo da avvolgere automaticamente il callback, possiamo inserire automaticamente la try{ }catch(e){ }maggior parte del codice. Ciò consente al codice esistente di continuare a funzionare, ma aggiunge il monitoraggio delle eccezioni di alta qualità.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Dobbiamo anche assicurarci che removeEventListenercontinui a funzionare. Al momento non lo sarà perché l'argomento addEventListenerè cambiato. Ancora una volta dobbiamo solo risolvere questo problema prototypesull'oggetto:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Trasmetti i dati di errore al tuo back-end
È possibile inviare i dati di errore utilizzando il tag immagine come segue
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;
}
Disclaimer: sono uno sviluppatore web su https://www.atatus.com/ .
