plan - ¿Cómo seguimos los errores de Javascript? ¿Las herramientas existentes realmente funcionan?

sentry javascript

Question

Hoy encuentro la necesidad de rastrear y recuperar un error de pila de errores de Javascript para resolverlos.

Hoy pudimos capturar todas las llamadas de descanso, la idea es que una vez que reciba un error, publique automáticamente el seguimiento de la pila de ese error más las respuestas de los servicios guardados del resto para que podamos detectar, reproducir y resolver los problemas en casi una misma Entorno / situación.

Como requisito, se nos pidió crear un módulo que se pueda incluir sin ser intrusivo, por ejemplo: Incluir el módulo que contiene la lógica de enlace en un JS, no sería invasivo, incluir varias líneas de código en varios archivos JS sería invasivo .

El objetivo es crear una herramienta que se pueda incluir en un sistema ya desarrollado y realizar un seguimiento de los eventos de error (como la consola).

He leído sobre esta lógica de rastreadores:

• errorception.com/
• atatus.com/
• trackjs.com/
• airbrake.io/
• jslogger.com/
• getsentry.com/
• bugsense.com/
• qbaka.com/
• muscula.com/
• exceptionhub.com/
• debuggify.net/
• raygun.io/home

Necesitamos hacer algo como eso, rastrear el error y enviarlo a nuestro servidor.

Como dice "Dagg Nabbit" ... "Es difícil obtener un seguimiento de la pila de los errores que ocurren" en la naturaleza "en este momento" ...

Entonces, tenemos muchos productos pagados, pero ¿cómo funcionaron realmente?

En Airbrake usan stacktrace y window.onerror:

window.onerror = function(message, file, line) {
  setTimeout(function() {
    Hoptoad.notify({
      message : message,
      stack   : ''()@'' + file + '':'' + line
    });
  }, 100);
  return true;
};

Pero no puedo averiguar cuándo realmente se utiliza el stacktrace.

En algún momento, stacktrace, raven.js y otros rastreadores necesitan try / catch.

1. ¿Qué pasa si encontramos una manera de hacer un contenedor global?
2. ¿Podemos simplemente llamar a stacktrace y esperar la captura?

¿Cómo puedo enviar un seguimiento de pila a mi servidor cuando ocurre un error inesperado en el cliente? ¿Algún consejo o buenas prácticas?

Answer 1

@ Da3 preguntaste sobre appenlight y stacktraces. Sí, puede recopilar todos los stacktraces siempre que envuelva la excepción en el bloque try / catch. De lo contrario, intentará leer la información de window.onerror, que es muy limitada. Esta es una limitación del navegador (que se puede arreglar en el futuro).

Answer 2

En los últimos navegadores, hay un quinto parámetro para el objeto de error en window.onerror . En addEventListener , puede obtener el objeto de error por event.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
    // sendData(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (event) {
    console.log(e.error.message, "from", event.error.stack);
    // You can send data to your server
    // sendData(data);
})

Puede enviar datos utilizando la etiqueta de imagen de la siguiente manera

function sendData(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;
}

Si está buscando OpenSource, puede TraceKit . TraceKit exprime la mayor cantidad de información útil posible y la normaliza. Puede registrar un suscriptor para informes de errores:

TraceKit.report.subscribe(function yourLogger(errorReport) {
    // sendData(data);
});

Sin embargo, tiene que hacer backend para recopilar los datos y front-end para visualizar los datos.

Descargo de responsabilidad: soy un desarrollador web en https://www.atatus.com/ donde puede realizar un seguimiento de todos sus errores de JavaScript y filtrar errores en diversas dimensiones, como navegadores, usuarios, URL, etiquetas, etc.

Answer 3

Es difícil obtener un seguimiento de la pila de los errores que ocurren "en libertad" en este momento, porque el objeto Error no está disponible para window.onerror .

window.onerror = function(message, file, line) { }

También hay un nuevo evento de error , pero este evento no expone el objeto Error (todavía).

window.addEventListener(''error'', function(errorEvent) { })

Pronto, window.onerror obtendrá un quinto parámetro que contiene el objeto Error, y probablemente pueda usar stacktrace.js para capturar un seguimiento de pila durante window.onerror .

<script src="stacktrace.js"></script>
<script>
window.onerror = function(message, file, line, column, error) {
    try {
        var trace = printStackTrace({e: error}).join(''/n'');
        var url = ''http://yourserver.com/?jserror='' + encodeURIComponent(trace);
        var p = new printStackTrace.implementation();
        var xhr = p.createXMLHTTPObject();

        xhr.open(''GET'', url, true);
        xhr.send(null);
    } catch (e) { }
}
</script>

En algún momento, la API de error probablemente estará estandarizada, pero por ahora, cada implementación es diferente, por lo que probablemente sea inteligente usar algo como stacktracejs para capturar el seguimiento de la pila, ya que hacerlo requiere una ruta de código separada para cada navegador.

Answer 4

Soy el cofundador de TrackJS, mencionado anteriormente. Usted está en lo correcto, a veces obtener el seguimiento de la pila requiere un poco de trabajo. En algún nivel, las funciones asíncronas tienen que estar envueltas en un bloque try / catch, ¡pero lo hacemos automáticamente!

En TrackJS 2.0+, cualquier función que pase a una devolución de llamada ( addEventListener , setTimeout , etc.) se ajustará automáticamente en un try / catch. Hemos encontrado que podemos atrapar casi todo con esto.

Por las pocas cosas que podemos hacer ahora, siempre puedes intentarlo / atraparlo tú mismo. Proporcionamos algunos envoltorios útiles para ayudar, por ejemplo:

function foo() {
  // does stuff that might blow up
}

trackJs.watch(foo);