Monitoreo de errores en el cliente: un enfoque práctico para aplicaciones web

monitoreo-errores-en-el-cliente

Hace unos días atendí a la presentación en Hamburgo del radar tecnológico 2014 de Thoughtworks. Este documento, que publica la empresa Thoughtworks cada año, contiene una colección de tecnologías que el consejo técnico de la empresa considera interesantes; ya sea por haber servido para desarrollar mejores soluciones en los proyectos de sus clientes o por haber causado problemas.

Una de las técnicas que se encuentra este año en la lista de recomendaciones es la captura de errores de javascript que suceden en el cliente con el fin de identificar problemas de incompatibilidad entre navegadores o problemas con plugins y extensiones de navegador.

Impacto en la experiencia de usuario (UX)

Es imposible probar una aplicación web en todas las combinaciones de sistemas operativos, navegadores, versiones de navegadores, hardware, etc. En algunas ocasiones los problemas (bugs) son reportados por los usuarios mismos, pero la mayoría de las veces los usuarios no reportan los problemas que experimentan.

El empleo de esta técnica tiene un impacto muy grande en la experiencia de usuario. Ya que reduce el tiempo necesario para identificar problemas que experimentan los usuarios y por ende reduce el tiempo en que estos errores son corregidos.

Bajo costo, alto impacto

La implementación de un monitoreo de este tipo resulta muy sencilla. Si se piensa en la relación costo-beneficio de esta técnica, resulta muy atractiva.

Una implementación simple incluye:

  • Capturar errores globales javascript.
  • Enviar un reporte de cada error vía HTTP.
  • Escribir información del error en un log para analizarlo después.
  • Configurar una herramienta de monitoreo para analizar los logs.

Capturar errores globales javascript

Utilizando el ‘event handler’ window.onerror se puede registrar una función que será llamada cada vez que se produce un error (siempre y cuando no haya sido atrapado explícitamente en un bloque ‘try-catch’). Aquí esta un ejemplo que reporta los primeros 5 errores ocurridos:

Consideraciones para reportar todos los errores:

  • Restringir el número de errores a reportar.
  • Eliminar dependencias a otras librerías (ya que pueden incluir errores).
  • Asegurar que este código sea el primero en ser incluido en todas las páginas.
  • Asegurar que ‘window.onerror’ no sea sobrescrito nuevamente.

Enviar un reporte de cada error vía HTTP

Es muy importante asegurar la compatibilidad entre navegadores  sin depender librerías externas. Aquí un ejemplo:

Consideraciones:

  • Eliminar dependencias a librerías externas.
  • Asegurar compatibilidad entre navegadores.
  • Enviar la petición de manera asíncrona y sin esperar respuesta (fire and forget).

Agregar información del contexto de los errores con ‘stacktrace.js’

Una limitación del uso de ‘window.onerror’ es que no se tiene acceso al contexto en el que sucedió el error. Sólo se cuenta con información sobre el punto exacto en que sucedió y muchas veces no es suficiente para identificar el tipo del problema que se está reportando.

Una librería muy útil para esta tarea es stacktrace.js con la cual se puede obtener información del estado de la pila de llamadas en el momento en el que sucede un error. Esta información, mejor conocida como “stack-trace”, contiene información muy completa que puede ser enviada en un reporte de error para ser después analizada. Aquí un ejemplo en el que nuestro código explícitamente detecta errores y los reporta:

Un ejemplo del reporte de error con pila de llamadas (ver Request Payload):

Ejemplo de reporte de error con pila de llamadas

Ejemplo de reporte de error con pila de llamadas

Consideraciones:

  • Nuevamente restringir el número de errores a reportar.
  • Asegurarse de siempre incluir la librería stacktrace.js.
  • Combinar esta técnica con el uso de la captura global de errores con “window.onerror”.

Escribir reporte de error en un log para su posterior análisis

Aquí no hace falta dar ejemplos. Sólo una lista de consideraciones importantes:

  • Incluir en el log información del navegador incluida en los encabezados HTTP.
  • Utilizar alguna tecnología no bloqueante para procesar las peticiones.
  • Siempre responder a las peticiones con el código HTTP 200-OK.
  • Se pueden utilizar servicios externos como NewRelic.

Configurar alguna herramienta de monitoreo para analizar los logs

Si se utiliza un servicio externo, estos normalmente incluyen muy buenas herramientas de monitoreo y alarmas. En caso de utilizar una implementación propia, se pueden configurar herramientas como splunk o logstash para este fin.

En conclusión

Vale la pena considerar el empleo de esta técnica por su simplicidad en la implementación y su grande impacto en la experiencia de usuario. Un ejemplo más completo de la parte “javascript” descrita en este artículo se puede encontrar en este repositorio en github.

Etiquetado , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: