JavaScript Error Tracking Essentials

Hola a todos, es un placer unirme a ustedes hoy aquí. Vamos a hablar sobre el seguimiento de errores de JavaScript de próximo nivel con Sentry. Mi nombre es Ebenezer Dunn y soy un defensor del desarrollo en CodeGiant, una plataforma de desarrollo integrada de DevSecOps y mejores prácticas incorporadas que ayuda a tu equipo a entregar más rápido y de manera más segura.

Estamos hablando de nuestro seguimiento, pero ¿qué es exactamente el seguimiento de errores? Y por cierto, esta es la tercera vez que grabo esta charla para esta conferencia en particular, porque intenté la primera vez después de grabar. Y pensé, sí, ya terminé. Y descubrí que mi cámara se congeló mientras grababa. Así que la segunda vez, la computadora portátil y todo se apagaron mientras grababa. Y esta es la tercera vez y espero que todo salga bien esta vez. Y voy a intentar sonreír. Así que un poco frustrado.

¿Qué es el seguimiento de errores? Ahora, es un proceso de identificar, registrar y gestionar errores que ocurren en una aplicación web. En nuestro caso, una aplicación web porque estamos usando JavaScript para la web en esta instancia en particular. Pero el seguimiento de errores básicamente identifica, registra y gestiona errores que ocurren en tu aplicación. Así que este es un proceso de seguimiento de errores. En primer lugar, tiene que haber descubrimiento. Así que tienes que descubrir el error y luego diagnosticarlo. Así que no solo descubres el error, como `oh, descubrimos que hubo un error` y todos se sientan. No, tienes que diagnosticar el error. Y cuando diagnosticas el error, sabes, descubrir qué está causando realmente el error. ¿Por qué? ¿Por qué hay este error? ¿Qué es este error? ¿Dónde está este error? Diagnosticar el error y no aplaudir y decir, `OK, ahora descubrimos el error`. Sabemos todo sobre este error y vamos a casa. No, tienes que solucionar los errores. Así que encuentras los errores. Solucionas los errores. Esas son partes importantes del proceso de seguimiento de errores. No solo descubres eso sin sentido. Te sientas y ya está. Así que tienes que solucionar los errores.

Ahora, componentes del seguimiento de errores. Esto es como una versión más detallada de lo que ya hemos hablado.

Entonces, el proceso de detección de errores, al igual que la detección de errores, luego debes registrar el error. Esto es importante. No solo descubres el error o detectas el error y dices, oh, sí, descubrimos ese error. No, es importante que registres este error. Es importante que almacenes este error en una database o, por ejemplo, en CodeGiant, usamos Clickhouse para el registro. No estoy seguro de qué usa Sentry, pero en la plataforma de Sentry también se registra. Así que no solo descubres el error y luego lo desechas.

Entonces, debes registrar el error y, ya sabes, necesitas un sistema de notificación para que no te quedes en la oscuridad. No te detienes solo en detectar ese error. Lo siento por eso. No te detienes solo en detectar y registrar el error. Así que debes ser notificado sobre este error, oh, hay un error. Sí. Necesitas ser notificado de que hubo un error. Entonces, dijimos que lo haríamos con Sentry, ya sabes, que viene con un sistema de notificación. Una vez que un usuario encuentra un error o una vez que encuentras un error, una vez que hay un error en tu aplicación, recibes una notificación y eso viene con toda la información del error. Y luego, después de recibir la notificación, revisas el error y luego analizas el error. Sabes, descubres qué está causando el error, dónde, ya sabes, y cómo y por qué. Ya sabes, todos los detalles sobre el error vendrán con una configuración de Sentry donde hacemos eso ahora. Cuando hay un error, viene con información del navegador, información del dispositivo del usuario, dirección IP, todo lo que necesitas para resolver. Para analizar el error. Y luego, nuevamente, no aplaudes y te vas a casa. Debes resolver el error.

Entonces, en resumen, encuentras un problema, solucionas un problema. Es importante tener la resolución de errores como parte de tu proceso de seguimiento de errores. Entonces, ¿cuáles son los beneficios del seguimiento de errores? Reduce el tiempo de inactividad. Si no estás rastreando los errores, sabes cuando algo está mal, sabes que tus usuarios están luchando, sabes que tu aplicación web está luchando o tu aplicación de JavaScript, sabrás que estás luchando. Y si no lo sabes, seguirá sucediendo y seguirás teniendo tiempo de inactividad. Entonces, si estás rastreando los errores, puedes obtener información sobre este error, conocerlo, resolver el error y reducir el tiempo de inactividad. Mejora la experiencia del usuario.

Además, si los usuarios tienen problemas y tú no lo sabes, la mayoría de las veces ni siquiera se molestarán en decírtelo. Lo primero que hará el usuario es buscar alternativas a menos que su vida dependa de tu aplicación. Si voy a una aplicación y tengo problemas con un error, simplemente busco una alternativa que haga lo mismo. Solo si puedo encontrar una alternativa y la tuya es mi única esperanza o tal vez ya te he pagado y necesito que me brindes el servicio por el que pagué, entonces el usuario se pondría en contacto contigo y te diría: `Oye, me encuentro con este error`. Así que ves que si no estás rastreando errores, perderás muchos usuarios porque muchas personas ni siquiera se molestarán en decirte que busques algo más. Y, ya sabes, estamos rastreando áreas donde necesitamos que tus usuarios estén contentos, tú estés contento, todos estén contentos y asistir a la experiencia del usuario proporciona información sobre el rendimiento de la aplicación. Sí. Entonces, si no estás rastreando los errores, no sabrás cómo está funcionando tu aplicación. También cubriré. Con suerte, deberíamos poder con el tiempo que tenemos la aplicación, cómo puedes rastrear transacciones, el rendimiento de la aplicación y todo eso. Pero si no estás rastreando errores en tu aplicación, no sabrás cómo está funcionando tu aplicación y también ayuda a priorizar los esfuerzos de desarrollo. Lo siento, estoy apurando esto porque estoy mirando la hora y ayuda a priorizar los esfuerzos de desarrollo para que tu equipo sepa en qué trabajar y qué dejar para después.

A continuación. Sí. Existe un método tradicional de seguimiento de errores en JavaScript. Incluso si no has trabajado antes con Sentry o una plataforma similar, muchos de nosotros o todos deberíamos haber hecho seguimiento de errores en JavaScript. Está la declaración console.log. Ya sabes, esa es una forma de rastrear los errores. Tiene sus desventajas, lo que significa que solo tú sabes que hiciste una declaración console.log y solo tú lo verás. Y solo afecta a tu propia experiencia al usar la aplicación. Pero esto a veces se utiliza en desarrollo en lugar de producción. Quiero decir, eso es lo que se recomendaría de todos modos, si vas a usar console.log, pero tiene muchas desventajas. Y luego están las alertas, que no son tan geniales. Ya sabes, simplemente muestran una ventana emergente de error con la función alert. No es realmente genial y, ya sabes, tienes todas esas cosas que interrumpen todo lo que el usuario está haciendo. Pero, ya sabes, esa es una forma de hacer seguimiento de errores de manera tradicional.

Mostrar el mensaje completo de error en pantalla. Esto no es nada genial y he usado algunas aplicaciones o aplicaciones web donde simplemente se muestra un mensaje de error completo en la pantalla. Como si fuera solo un galimatías que el usuario no entiende. Y luego hay un mensaje que dice: toma este mensaje de error y envíalo al desarrollador de la aplicación. Entonces, si estás haciendo un seguimiento de errores adecuado, ni siquiera necesitarías hacer eso. Estarías enviando a tus usuarios un error. Y cuando ocurre un error, lo verás y verás lo que el usuario estaba haciendo. Entonces, ya sabes, antes de que lleguen a ese error, verás detalles sobre el dispositivo. No tendrás que preguntarle al usuario qué dispositivo está utilizando y qué navegador está utilizando. ¿Has realizado una actualización? Verás todo eso. Así que tienes toda la información. Ya sabes, no necesitas enviar al usuario un galimatías.

Y sí. Limitaciones del seguimiento tradicional de errores. Careces de contexto. No sabes nada sobre el dispositivo. No sabes nada sobre el usuario.

No sabes nada sobre sus acciones antes del error. Sabes, es manual. Es reactivo. Así que todo tiene que ser manual. Y siempre react. Y, ya sabes, si haces una implementación adecuada con Sandro, por ejemplo, puedes automatizar las cosas. Y luego no tienes que esperar a que las cosas se pongan realmente mal para actuar sobre ello. Y luego, en el seguimiento tradicional, hay ineficiencia en la agregación de data. Así que realmente no estás registrando. No lo estás haciendo bien. Ya sabes, almacenando esa información para que puedas ver todo y puedas incluso rastrear el performance de tu aplicación o saber qué está sucediendo en tu aplicación. Sí. Y ahora aquí estamos. Seguimiento de errores con Sentry. Entonces, ¿qué es Sentry? Sentry es una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Sí. Entonces, ¿cómo lo llamo? ¿Qué es eso, por cierto? Porque trato de apresurarme antes de que algo más salga mal con esta grabación. Pero esto es Sentry, es una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Vamos a ver eso en acción. Voy a mostrártelo a través de una aplicación. Ahora, para configurar Sentry en un proyecto JavaScript, utilizas Sentry como un SDK. Eso lo hace realmente fácil y lo configuras con el DSN. Es realmente sencillo. Te lo voy a mostrar ahora mismo, como lo vamos a hacer juntos. Así que ahí tienes el SDK de Sentry, solo tienes que ejecutar npm install, escribir npm install y lo agregas a tu aplicación. Luego obtienes tu DSN, nombre de origen de datos, y eso es todo. Comienzas a rastrear tus errores. Así de simple. OK, quedémonos aquí y luego vayamos al navegador. Esto es Sentry.io.

Así que haz clic en crear un proyecto y elige qué tipo de proyecto quieres crear. Busquemos React aquí y luego haz clic en React con JavaScript. Establece la frecuencia de alerta, avísame en cada nuevo problema o cuando haya más de 10 ocurrencias, o puedes crear una alerta más tarde. Así que como prefieras hacerlo. Esa es la parte de notificación del seguimiento de errores. Luego, nombra tu proyecto y asígnalo. Así que JavaScript reacciona aquí. Lo mismo con CodeGiant. Así que acabo de crear la cuenta y luego me pide una empresa y tengo CodeGiant ahí. Así que creemos el proyecto. Y luego, lo siguiente que tienes es que es muy sencillo a partir de aquí.

Ejecutas npm install, dash dash save our Sentry slash React. Y configuremos el SDK aquí mismo. Así que te mostraré mi base de código. Esta es mi aplicación de React. Esta aplicación ahora mismo es solo una aplicación simple de lista de mercado. Y este es el código base. Entonces, lo que ves aquí es lo que tengo en el archivo index.js de mi aplicación de React. Lo que realmente necesitamos es instalar Sentry npm install. Y luego tenemos nuestro Sentry slash React. Y lo importamos en la línea tres aquí mismo.

Importa las importaciones necesarias de nuestro Sentry/React y en la línea siete. Esto es lo que realmente necesitamos. Sentry.init inicializa y luego en la línea ocho aquí está el DSN. Esto es lo que es importante ahora mismo. Este DSN y este es un DSN para mi configuración con CodeGiant. Pero lo que voy a hacer es venir aquí y tomar este DSN de este nuevo proyecto que creé en Sentry. Y voy a reemplazarlo aquí en la línea ocho. Así que tenemos la configuración. Esto es lo que es importante aquí. El DSN y luego tenemos la configuración de la línea 10 a la línea 22 aquí.

Una vez que tengamos eso, lo siguiente que tenemos aquí es esto. Así que lo que voy a hacer, lo que hicimos a continuación en la línea 34 de Sentry, tenemos Sentry.errorBoundary. Y luego envolvemos nuestros componentes de la aplicación en Sentry.errorBoundary. Esto va a ayudar a capturar errores por defecto. Así que déjame mostrarte un ejemplo ahora mismo. Si vas al componente de prueba de errores que creé y estos son diferentes tipos de errores. Voy a dejar un enlace a este repositorio o puedes ir a mi GitHub. Voy a mostrarte mi enlace de GitHub al final de esta charla. Y solo busca la aplicación de lista de mercado.

Verás este repositorio con la base de código. Estos son diferentes tipos de errores que creé. No creo que podamos cubrir todo debido al tiempo. Solo nos queda muy poco tiempo. Pero este es un error, por ejemplo, en el error cien. Esto es capturado por Sentry.errorBoundary en index.js. Este límite captura automáticamente los errores lanzados en el árbol de componentes de React. Así que dejé comentarios en este código para que puedas revisarlo y simplemente leerlo y entenderlo. Así que este límite captura automáticamente los errores cien en el árbol de componentes de React. Disculpa por eso. Así que probemos esto. Por ejemplo, ya he importado todos estos diferentes componentes de error en el archivo app.js.

Aquí mismo, el archivo app GS. Todo lo que necesito hacer es descomentar los componentes de error sinc. En realidad, creo que nuestra empresa hace uno de los errores que probé. Y luego vamos a probar esto con cien errores. Lo que vamos a hacer es esto. Es importante aquí en la línea cuatro. Y luego lo tengo en la línea. Setenta y cuatro. Guardemos esto. ¿Y dónde está nuestro navegador? Volvamos a nuestro navegador. Esta es la aplicación React y se recarga. Mira eso. Tenemos este error aquí. Error de prueba de error de los componentes de prueba de error. A continuación, volvemos a sentry y hagamos clic en llevarme a los problemas. O simplemente puedes hacer clic en problemas aquí. Y dice que no pudimos encontrar errores que coincidan con algunos. Me pregunto por qué. Recarguemos y veamos. Obtendremos lo mismo. Sí. Así que tenemos eso. A veces solo necesitas recargar. Creo que algunas cosas no están instanciadas en esta plataforma de sentry. Pero mira eso. Este es el mensaje de error. Así que recuerda, todo lo que necesitamos para enviar esto a nuestra cuenta de sentry es este DSN en el archivo index GS. Así que este DSN, lo vimos. Esto determina dónde se enviará la información de error. Este es el que vino con nuestro proyecto de sentry.

Tenemos el proyecto Sentry y revisamos el mensaje de error. Así que haces clic en el mensaje de error justo aquí. Haz clic en la flecha aquí y luego en el error de prueba de error cien del componente de error. Y esto viene con toda la información para el usuario. Entonces también puedes configurar esto cuando estés configurando la forma en tu código más bien puedes configurar lo que quieres obtener del error de la información de error o el informe de error.

Así que aquí tenemos el ID del evento y luego la etiqueta. Esto me dice la dirección IP. Realmente no puedes usar mi dirección IP para hacer nada porque cambia cada diez minutos aproximadamente. Esta es la versión de Chrome y esto es lo que estoy usando macOS. Así que esto muestra que estoy usando el navegador Chrome. Estoy usando macOS X. Y este es el error con más información y el tipo de transacción del navegador. Porque si estás en tu localhost tres mil muestra producción ambiental, nombre del navegador y todo eso. Así que creo que hay uno condescendiente. Vamos a revisar ese rápidamente. Así que ves que podemos tener un error con contexto de usuario. También volvamos al código base. Así es básicamente eso, mira la información de error justo aquí con esto, sabes exactamente qué hacer y cómo resolver el error. Pero volvamos al código base. Se nos acabó el tiempo. En realidad, creo que nos quedan unos cuatro minutos y error de prueba. Así que tengo un ejemplo de error con contexto de usuario para que si hay un usuario y quieres saber el contexto del usuario en particular que encuentra el error, puedes hacerlo. Así que como 96 aquí, tengo sentry que establece el usuario y luego, ya sabes, el ID del usuario, correo electrónico del usuario, hay un comando y el nombre de usuario. Una vez que tienes esto aquí, tu error, el error que se muestra en todas partes, eso sabes, que sentry envía o la aplicación envía al DSN. Sentry viene con este contexto de usuario justo aquí. Así que como 99 aquí se muestra este error. Y todo lo que necesitamos hacer es, así que volvamos al archivo app.js. Y este es el componente de contexto de usuario. Y eliminemos el error no controlado justo aquí. Así que guardemos esto.

Vuelve a nuestro navegador y recarga para probar el contexto del usuario, verifica Sentry para obtener detalles. Entonces, si volvemos a Sentry y hacemos clic en problemas, deberíamos ver la nueva información sobre errores. Deberíamos verlo, en realidad. Así que creo que necesitaremos recargar nuevamente. Es básicamente un botón de recarga. No. Así que necesitamos recargar eso, pero eso debería estar aquí ya. Así que no te preocupes. Todo está bien. Y aún no está aquí. ¿Por qué es eso? ¿Por qué es eso? No lo sé. Pero se nos acabó el tiempo. Aún no está aquí. Ese es un error de los componentes de error, y no sé por qué. Pero voy a intentar, simplemente funciona. Así que sí sé exactamente por qué. Pero se nos acabó el tiempo. Y quiero mostrarte cómo hacer esto con código. Estos son los diferentes tipos de errores. Voy a dejar esto en el repositorio. Tal vez cuando regresemos, lo veremos. Pero esto aquí es si vamos a CodeGiant.io y te registras. Así que ve a CodeGiant.io, inicia sesión. Y esta es una forma en que puedes usar Sentry con otras plataformas. Por ejemplo, haz clic en crear un nuevo elemento para el espacio de trabajo y ve a error y rastreo de APM justo aquí. Y vamos a tener Sentry. No, solo vamos a tener seguimiento de errores también.