Sentry: Captura los errores de Javascript y envíalos a un servidor

14/May/2018 debug

El código de Javascript se ejecuta en el navegador de cada usuario, por eso si desarrollas una aplicación que use JS, posiblemente nunca vas a enterarte de algunos errores que los usuarios experimenten. No puedes esperar que los usuarios te reporten en detalle que errores ven, los pasos para reproducirlo y que te ayuden a probar. No, esto es algo de lo que debes hacerte cargo tu mismo, y para eso necesitas las herramientas adecuadas.

Puedes pensar en poner un formulario para reportar errores, o revisar algún lugar en donde coloquen reseñas de tu aplicación, pero pronto te encontrarás con que eso, no ayuda mucho, las personas pondrán reportes o reseñas como esta:

Guardar errores de js

Ves? eso no te ayuda en nada. En lugar de eso debes capturar cualquier error y toda la información que puedas y guardarla en un servidor en donde puedas analizarla y probar esos casos en que tu aplicación falla. Quizá tu código de javascript solo falla cuando usas Firefox o Chrome, pero como saberlo?

Modificar tu programa para que guarde toda esta información parece ser un trabajo muy difícil, pero afortunadamente existe Sentry, es una aplicación web que hace todo el trabajo sucio, y ademas tiene un plan gratis que puedes usar para capturar y analizar hasta 10,000 errores por mes.

Voy a mostrarte como se usa, primero crea una cuenta gratuita, y cuando entres con tu usuario, vas a ver una pantalla como esta:

Crear proyecto sentry

Ahí seleccionas Javascript, luego le das un nombre a tu proyecto y presionas el botón Create Project. Ahora ya esta todo casi listo, verás otra pantalla con instrucciones como esta:

Configurar sentry

Las dos lineas que he marcado, son las que debes de copiar en tu aplicación, ambas debes colocarlas en la pagina principal de tu aplicación, por ejemplo en index.html o cualquier pagina web que ejecute javascript. La segunda linea (que esta distorsionada en esta imagen) contiene el código necesario para conectarse al proyecto que creaste, asi la aplicación sabe a donde enviar los errores.

Este es un ejemplo de como debe de quedar tu página web:

Lo importante en el archivo anterior son estas lineas

En la primera linea se carga la librería necesaria, y en las siguientes lineas, se inicia el servicio para la captura de errores. El otro código de JS que se muestra en el primer archivo es solo para generar un error, el cual va a capturarse y registrarse en un servidor.

Ahora cuando ejecutes el código, vas a recibir un email, por cada nuevo error que se registre. Esto es solo para un nuevo error, si ejecutas la pagina varias veces solo vas a recibir un email la primera vez, a menos que se registre un nuevo código con error. El email que vas a recibir es algo como este:

Capturar errores de js

Como vez, te dice el archivo en que se genero el error y la linea y columna en donde esta el código defectuoso. También te da otra información como el navegador, el sistema operativo y todo lo que se encuentre en la consola.

Te recomiendo que agregues información sobre variables usando console.log() esto va darte mucha información valiosa para detectar y corregir errores.

Y si entras en tu cuenta de Sentry, también puedes ver el listado de errores y las veces que han ocurrido, de esta forma puedes priorizar en los errores más recurrentes.



Ir a la barra de herramientas