Capture todos los errores de JavaScript y envíelos al servidor

232

Me preguntaba si alguien tenía experiencia en el manejo de errores de JavaScript a nivel mundial y los enviaba desde el navegador del cliente a un servidor.

Creo que mi punto es bastante claro, quiero saber cada excepción, error, error de compilación, etc. que ocurre en el lado del cliente y enviarlos al servidor para informarlos.

Principalmente estoy usando MooTools y head.js(para el lado JS) y Django para el lado del servidor.

Olivier Girardot
fuente
20
No veo por qué esta pregunta no está clara.
Michael Hilus
3
Votó dos veces para volver a abrir la pregunta, pero sin suerte. No está del todo claro por qué esta pregunta está cerrada como incierta.
Muhammad Usman
77
@ andrew-barber: si tantos usuarios consideran que esta pregunta es lo suficientemente relevante como para votarla, ¿quizás no te quede claro si el problema es tuyo?
isapir
55
Esta pregunta no solo es clara, también está subestimada :)
Teoman shipahi el

Respuestas:

16

Recientemente probé Sentry en producción y funciona bien (JS y otros lenguajes como PHP)

1- Es de código abierto (puede instalarlo en su propio servidor) 2- Puede usar el plan gratuito (100 informes / día)

O instálelo en su servidor: github.com/getsentry

Tarek
fuente
Tenga en cuenta que tienen un plan gratuito ilimitado para instituciones educativas
christianvuerings
8
Ya no parece ser de código abierto, todas las opciones están pagadas?
David Cumps
44
@DavidCumps Todavía ofrecen el servicio gratuito (Prueba), pero solo obtiene 7 días de historial de errores o puede instalarlo en su propio servidor desde su código abierto ( github.com/getsentry )
Tarek
1
Google Tag Manager tiene un detector de errores de Javascript, quizás valga la pena echarle un vistazo, especialmente si ya está utilizando GA
Adrian Gunawan
También debe verificar TrackJS para esto. Es un servicio pago, pero proporciona mucho contexto sobre cómo el usuario se metió en la situación de error para la depuración. Soy uno de los desarrolladores y he corregido toneladas de errores con él :)
Todd Gardner
318

Verificaría window.onerror

Ejemplo:

window.onerror = function(message, url, lineNumber) {  
  //save error and send to server for example.
  return true;
};  

Tenga en cuenta que devolver verdadero evitará la activación del controlador predeterminado, y devolver falso permitirá que se ejecute el controlador predeterminado.

Mike Lewis
fuente
99
Desea asignar window.onerror preferiblemente antes de que se ejecute cualquier otra cosa. Entonces, donde quiera ponerlo, solo asegúrese de que se ejecute antes que cualquiera de sus otros códigos / archivos js.
Mike Lewis
17
Tenga en cuenta que Mozilla recomienda: "Tenga en cuenta que algunos / muchos eventos de error no activan window.onerror, debe escucharlos específicamente".
Adam Naylor
88
Sí, me encanta cómo dice algunos / muchos , muy descriptivo, gracias Mozilla.
Daniel Mendel
55
Mozilla expone GlobalEventHandlers.onerror: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…
roland
1
¿Qué sucede si el código que maneja window.onerror mismo arroja un error? ¿Existe la posibilidad de un bucle infinito?
Martin Brown
15

Si su sitio web utiliza Google Analytics, puede hacer lo que yo hago:

window.onerror = function(message, source, lineno, colno, error) {
  if (error) message = error.stack;
  ga('send', 'event', 'window.onerror', message, navigator.userAgent);
}

Algunos comentarios sobre el código anterior:

  • Para los navegadores modernos, se registra el seguimiento de la pila completa.
  • Para los navegadores más antiguos que no capturan el seguimiento de la pila, el mensaje de error se registra en su lugar. (La mayoría de las versiones anteriores de iOS en mi experiencia).
  • La versión del navegador del usuario también se registra, por lo que puede ver qué versiones del sistema operativo / navegador arrojan qué errores. Eso simplifica la priorización de errores y las pruebas.
  • Este código funciona si usa Google Analytics con "analytics.js", como este . Si está utilizando "gtag.js" en su lugar, así , necesita ajustar la última línea de la función. Ver aquí para más detalles .

Una vez que el código está en su lugar, así es como ve los errores de Javascript de sus usuarios:

  1. En Google Analytics, haga clic en la Behaviorsección y luego en el Top Eventsinforme.
  2. Obtendrá una lista de categorías de eventos. Haz clic window.onerroren la lista.
  3. Verá una lista de seguimientos de pila de Javascript y mensajes de error. Agregue una columna al informe para las versiones del sistema operativo / navegador de sus usuarios haciendo clic en el Secondary dimensionbotón e ingresando Event Labelen el cuadro de texto que aparece.
  4. El informe se verá como la captura de pantalla a continuación.
  5. Para traducir las cadenas del sistema operativo / navegador a descripciones más legibles para los humanos, las copio y pego en https://developers.whatismybrowser.com/useragents/parse/

ingrese la descripción de la imagen aquí

Martin Omander
fuente
3
Esto no atrapa todos los errores, solo los bloques try-catch, aunque es algo genial de explicar y no creo que merezca votos negativos.
Nick Steele
Gracias Nick! Actualicé mi respuesta con un código probado en batalla que funciona bien en mi sitio web y que captura todos los errores, no solo los que atrapa con try ... catch.
Martin Omander
2

No intente utilizar servicios de terceros, en su lugar, intente con los suyos.

Los controladores de errores pueden detectar los siguientes escenarios,

  1. TypeError no capturado no se puede capturar
  2. ReferenceError no capturado no se puede capturar, por ejemplo: var.click ()
  3. TypeError puede ser capturado
  4. El error de sintaxis puede ser capturado
  5. ReferenceError puede ser capturado

Para detectar errores de Javascript:

window.addEventListener('error', function (e) {
  //It Will handle JS errors 
})

Para capturar errores de AngularJS:

app.config(function ($provide) {
$provide.decorator('$exceptionHandler', function ($delegate) {
   return function (exception, cause) {
       //It will handle AngualarJS errors
      }
   })
})
Sam Ruben
fuente
0

Además, el servicio http://jslogger.com puede ayudar con eso:

Registrar errores y eventos de Javascript en la nube

de http://jslogger.com/features :

A partir de ahora puede espiar todos los errores que rompen la experiencia del usuario de su sitio. Cada error de Javascript será detectado y presentado para su posterior depuración.

DESCARGO DE RESPONSABILIDAD: no está afiliado al servicio / empresa.

Ivan Kurmanov
fuente
1
Servicio 503 no disponible
Rax
0

Puedes probar Atatus : es un nuevo servicio de seguimiento de errores de JavaScript junto con Real User Monitoring (RUM) para aplicaciones web modernas.

No solo capturamos los errores, sino también los eventos del usuario que activaron el error. Esto le brinda pasos para reproducir el error al finalizar.

Junto con la captura de errores, también capturamos el tiempo de carga de la página y lo mostramos en diferentes perspectivas: Geo, navegador, desglose de página, histograma de página, monitoreo de Ajax y monitoreo de transacciones.

https://www.atatus.com/

Documentos disponibles: https://www.atatus.com/docs

Descargo de responsabilidad: soy desarrollador web en Atatus.

Fizer Khan
fuente
1
Integré Ataus, y luego probé algo como foo.bar = '' que causó una excepción. Pero no puedo ver nada en el tablero de Atatus.
vmachacek
¿Podrías enviarnos un correo electrónico?
Fizer Khan
55
Enchufe descarado. Los anuncios deben limitarse al lado derecho.
Será el
0

El uncaught biblioteca es buena captura de forma gratuita todos los errores JS, incluyendo rechazos no controladas.

LeeGee
fuente
-2

Es posible que desee consultar este nuevo servicio, http://rescuejs.com/ .https://bugsnag.com/

Le permite registrar todos sus errores de JavaScript sin escribir usted mismo el código del lado del servidor. También rastrea las versiones del navegador, etc.

No estoy seguro de considerarlos 100% "listos para la empresa", pero definitivamente vale la pena echarle un vistazo.

lillesand
fuente
8
Ha sido cerrado Si intenta registrarse ahora, recibe el mensaje "Gracias por su interés, lamentablemente ya no se está trabajando activamente en Rescue.js".
Día