Cómo rastrear errores de JavaScript front-end

Especialmente en el caso de aplicaciones de una sola página, es crucial que encuentre los errores de JavaScript rápidamente y los corrija antes de que tengan un impacto negativo en el rendimiento del usuario final.

La supervisión del rendimiento de Dynatrace facilita la búsqueda de errores de JavaScript y proporciona números de línea y seguimientos de pila que se pueden utilizar para corregirlos. En una sola infografía puede tener una visión general de:

  • El número de errores para un período de tiempo particular
  • El número de acciones del usuario efectuadas por los errores.
  • La distribución de navegadores (con versión) en los que los usuarios finales los están experimentando

¡Espero que esto ayude!

PD: Podría ser parcial, trabajo para Dynatrace.

El seguimiento de errores de JavaScript es más que una preferencia. De hecho, el seguimiento de que se produjo un error es la parte fácil. Hay toneladas de herramientas de código abierto para hacerlo.

La parte difícil es (1) Saber qué errores son importantes y deben corregirse de inmediato y (2) Comprender suficiente contexto sobre el error para recrearlo y solucionarlo.

Ayudé a construir {Track: js} Error de Javascript y registro de eventos. TrackJS muestra grupos agregados y tendencias de error, para que pueda ver qué errores están ocurriendo más y cuántos usuarios únicos se ven afectados. Los errores también incluyen una línea de tiempo de telemetría, que muestra todas las cosas que el usuario, la aplicación y la red estaban haciendo antes del error. Hace que recrear problemas sea realmente fácil.

Puede consultar Atatus, donde puede rastrear todos sus errores de JavaScript y filtrar errores en varias dimensiones, como navegadores, usuarios, URL, etiquetas, etc. Atatus desglosará las acciones específicas del usuario que conducen a un error, para que pueda ver qué lo hicieron antes de que ocurriera el error. Esto te ayudará a reproducir fácilmente el problema al final.

Atatus también admite la supervisión de usuarios reales mediante la cual puede supervisar el rendimiento de su aplicación. También puede rastrear el tiempo de carga de la página, las solicitudes de AJAX y el rendimiento de sus transacciones (por ejemplo: Pago, Registro).

https://www.atatus.com/

Hay muchas herramientas en línea para rastrear sus errores, agruparlos, filtrarlos, recibir notificaciones, etc. Mi favorito es Trackets: seguimiento de errores de JavaScript para su sitio web porque es fácil e intuitivo de usar, es muy confiable con buenas características y es barato.

Otras opciones (pero a veces realmente caras) son Sentry, Qbaka, Trackjs, Debugiffy, Airbrake, Raygun, … Solo puedo elegir cuál prefieres 🙂

Puede probar SessionStack (hay un plan gratuito ).

SessionStack registra las sesiones de los usuarios en su aplicación web: cómo interactúan con el producto y qué sucede en la aplicación web.

Luego puede reproducir las sesiones grabadas (o incluso verlas en tiempo real ) y ver todo lo que sucedió en el navegador (junto con una línea de tiempo de todos los errores JS, solicitudes de red fallidas, registros de consola).

Divulgación: soy cofundador de SessionStack.

Chrome Dev Tools, Firebug proporcionan excelentes características para la depuración de JavaScript front-end.