Essayez Atatus qui fournit un suivi avancé des erreurs et une surveillance réelle des utilisateurs pour les applications Web modernes.
https://www.atatus.com/
Permettez-moi d'expliquer comment obtenir des traces de pile qui sont raisonnablement complètes dans tous les navigateurs.
Gestion des erreurs en JavaScript
Chrome et Opera modernes prennent entièrement en charge le projet de spécification HTML 5 pour ErrorEvent et window.onerror. Dans ces deux navigateurs, vous pouvez soit utiliser window.onerror, soit vous lier correctement à l'événement «erreur»:
// 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);
})
Malheureusement, Firefox, Safari et IE sont toujours là et nous devons également les prendre en charge. Comme le stacktrace n'est pas disponible danswindow.onerror nous devons faire un peu plus de travail.
Il s'avère que la seule chose que nous pouvons faire pour obtenir des traces de pile à partir d'erreurs est d'envelopper tout notre code dans un try{ }catch(e){ }bloc, puis de regarder e.stack. Nous pouvons rendre le processus un peu plus facile avec une fonction appelée wrap qui prend une fonction et renvoie une nouvelle fonction avec une bonne gestion des erreurs.
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;
};
Cela marche. Toute fonction que vous encapsulez manuellement aura une bonne gestion des erreurs, mais il se trouve que nous pouvons le faire automatiquement pour vous dans la plupart des cas.
En modifiant la définition globale de addEventListenerafin qu'il encapsule automatiquement le rappel, nous pouvons insérer automatiquement try{ }catch(e){ }autour de la plupart du code. Cela permet au code existant de continuer à fonctionner, mais ajoute un suivi des exceptions de haute qualité.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
Nous devons également nous assurer que cela removeEventListenercontinue de fonctionner. Pour le moment, ce ne sera pas le cas car l'argument de addEventListenerest modifié. Encore une fois, nous devons seulement corriger cela sur l' prototypeobjet:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Transmettez les données d'erreur à votre backend
Vous pouvez envoyer des données d'erreur à l'aide de la balise d'image comme suit
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;
}
Avis de non-responsabilité: je suis développeur Web sur https://www.atatus.com/ .
