Probieren Sie Atatus aus , das erweiterte Fehlerverfolgung und Überwachung realer Benutzer für moderne Webanwendungen bietet.
https://www.atatus.com/
Lassen Sie mich erklären, wie Sie Stacktraces erhalten, die in allen Browsern einigermaßen vollständig sind.
Fehlerbehandlung in JavaScript
Modern Chrome und Opera unterstützen die HTML 5-Entwurfsspezifikation für ErrorEvent und vollständig window.onerror. In beiden Browsern können Sie window.onerrordas Fehlerereignis entweder ordnungsgemäß verwenden oder ordnungsgemäß binden:
// 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);
})
Leider gibt es Firefox, Safari und IE immer noch und wir müssen sie auch unterstützen. Da der Stacktrace in nicht verfügbar ist, müssen window.onerrorwir etwas mehr arbeiten.
Es stellt sich heraus, dass das einzige, was wir tun können, um Stacktraces von Fehlern zu erhalten, darin besteht, unseren gesamten Code in einen try{ }catch(e){ }Block zu packen und dann zu betrachten e.stack. Wir können den Prozess mit einer Funktion namens wrap etwas vereinfachen, die eine Funktion übernimmt und eine neue Funktion mit guter Fehlerbehandlung zurückgibt.
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;
};
Das funktioniert. Jede Funktion, die Sie manuell umbrechen, hat eine gute Fehlerbehandlung, aber es stellt sich heraus, dass wir sie in den meisten Fällen automatisch für Sie erledigen können.
Indem Sie die globale Definition von addEventListenerso ändern , dass der Rückruf automatisch umbrochen wird, können wir den try{ }catch(e){ }größten Teil des Codes automatisch einfügen . Auf diese Weise kann vorhandener Code weiterarbeiten, es wird jedoch eine qualitativ hochwertige Ausnahmeverfolgung hinzugefügt.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Wir müssen auch sicherstellen, dass removeEventListenerdas weiter funktioniert. Im Moment wird es nicht, weil das Argument zu addEventListenergeändert wird. Wieder müssen wir dies nur am prototypeObjekt beheben :
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Übertragen Sie Fehlerdaten an Ihr Backend
Sie können Fehlerdaten mithilfe des Image-Tags wie folgt senden
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;
}
Haftungsausschluss: Ich bin ein Webentwickler unter https://www.atatus.com/ .
