Pruebe Atatus, que proporciona seguimiento avanzado de errores y monitoreo de usuarios reales para aplicaciones web modernas.
https://www.atatus.com/
Permítanme explicar cómo obtener stacktraces que estén razonablemente completos en todos los navegadores.
Manejo de errores en JavaScript
Modern Chrome y Opera son totalmente compatibles con las especificaciones de borrador HTML 5 para ErrorEvent y window.onerror. En ambos navegadores, puede usar window.onerroro enlazar correctamente al evento '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);
})
Lamentablemente, Firefox, Safari e IE todavía existen y tenemos que apoyarlos también. Como el stacktrace no está disponible window.onerror, tenemos que trabajar un poco más.
Resulta que lo único que podemos hacer para obtener stacktraces de los errores es envolver todo nuestro código en un try{ }catch(e){ }bloque y luego mirarlo e.stack. Podemos hacer el proceso algo más fácil con una función llamada wrap que toma una función y devuelve una nueva función con un buen manejo de errores.
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;
};
Esto funciona. Cualquier función que ajuste manualmente tendrá un buen manejo de errores, pero resulta que en realidad podemos hacerlo automáticamente en la mayoría de los casos.
Al cambiar la definición global de addEventListenerpara que envuelva automáticamente la devolución de llamada, podemos insertar automáticamente try{ }catch(e){ }alrededor de la mayoría del código. Esto permite que el código existente continúe funcionando, pero agrega un seguimiento de excepciones de alta calidad.
var addEventListener = window.EventTarget.prototype.addEventListener;
window.EventTarget.prototype.addEventListener = function (event, callback, bubble) {
addEventListener.call(this, event, wrap(callback), bubble);
}
También debemos asegurarnos de que removeEventListenersiga funcionando. Por el momento no lo hará porque el argumento de addEventListenerha cambiado. De nuevo, solo tenemos que arreglar esto en el prototypeobjeto:
var removeEventListener = window.EventTarget.prototype.removeEventListener;
window.EventTarget.prototype.removeEventListener = function (event, callback, bubble) {
removeEventListener.call(this, event, callback._wrapped || callback, bubble);
}
Transmita datos de error a su backend
Puede enviar datos de error utilizando la etiqueta de imagen de la siguiente manera
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;
}
Descargo de responsabilidad: soy desarrollador web en https://www.atatus.com/ .
