Rastrea ralentizaciones y fallos en tus aplicaciones de React

Nos enfocamos en la observabilidad del código. Con Sentry, puedes comprender la salud de tu aplicación desde el front-end hasta el back-end. Sentry está diseñado para todos los desarrolladores, lo que significa que brindamos soporte para todos los lenguajes y frameworks principales, incluyendo y especialmente React.

Con el SDK de Sentry en tu aplicación, puedes alertar a los miembros del equipo necesarios y permitir que los desarrolladores optimicen esa experiencia tanto para los desarrolladores como para los clientes. La plataforma de Sentry proporciona múltiples perspectivas sobre la salud de tu aplicación, pero hoy nos centraremos en el monitoreo de errores y el monitoreo de rendimiento.

Con eso en mente, tengo una aplicación de React para que la veamos, y está en este sitio de comercio electrónico. Así que hagamos clic y naveguemos por nuestros productos, y naveguemos por nuestros productos. Vale, está tardando mucho en cargar. Tendremos que investigar eso un poco más tarde, pero por ahora continuaremos con el flujo del usuario. Vale, agregaré un par de elementos a nuestro carrito aquí, procederé a pagar, y creo que procederemos a pagar. Vale, este es un sitio de demostración horrible, obviamente. Nos encontramos con un error, sorpresa, sorpresa. Pero dejemos de lado nuestro sombrero de usuario final por un momento, pongamos nuestro sombrero de desarrollador y veamos qué está pasando. Abramos nuestras herramientas para desarrolladores, veamos la consola, reproduzcamos el error. Veamos la pestaña de red, hagamos referencia cruzada con nuestro código fuente. Quiero decir, hay muchas cosas que podemos hacer y se vuelve un poco tedioso. Afortunadamente, tenemos Sentry configurado y podemos hacerlo todo en un solo lugar. Te mostraré cómo empezamos. Eso está en la página de documentación de Sentry, docs.sentry.io. Apúntalo. En cualquier caso, tenemos nuestras plataformas compatibles en este botón aquí. En un lugar destacado, tenemos React en la página principal, así que no tienes que ir muy lejos. Haz clic en eso, es una instalación fácil, NPM install o Yarn add y unas pocas líneas de código para configurarlo.

Lo que esto hará es colocar Sentry en tu aplicación, conectándolo a tu controlador de errores global. A medida que los usuarios interactúan con tu aplicación, los eventos y transacciones se envían a Sentry y ahí es donde podemos ver y comprender la salud de nuestra aplicación. Así que durante ese desastre en el pago, recibimos una notificación a través de una alerta que configuramos. No tenemos tiempo hoy en esta charla rápida para hablar sobre las alertas, pero solo sepan que están ahí. Tenemos un resumen de nuestro error de inmediato, incluyendo la magnitud, cuántas veces ha ocurrido, a cuántos usuarios, también etiquetas contextuales.

Esa es la traza de pila. En un mundo sin Sentry, obtendríamos una traza de pila minificada, lo cual no es lo más divertido de entender. Pero durante nuestro proceso de compilación, hemos cargado nuestros mapas de origen y Sentry puede tomar nuestros mapas de origen y compararlos con la traza de pila proporcionada para desminificar esta hermosa traza de pila que tenemos aquí, legible para humanos, resaltando la línea exacta en la que ocurrió este error. Incluso tenemos detalles de la declaración if en eso, y la respuesta que obtuvimos fue falsa. Así que eso no es bueno, pero lo tendremos en cuenta y continuaremos examinando más contextos. También tenemos una línea de tiempo de los eventos que podemos filtrar. Podemos cambiar el marco de tiempo a un estilo más estilo T menos, y también podemos agregar nuestras propias migas de pan. Eso nos ayudará a comprender qué condujo a este error. Dado que este error ocurrió varias veces, alrededor de 60 veces, hemos recopilado las etiquetas de todos los errores en este mapa de calor a la derecha. También tenemos todas nuestras integraciones de seguimiento de problemas configuradas aquí, donde podemos vincular a tickets existentes o crear un nuevo ticket desde aquí también. Ahora que tenemos todo el contexto y contenido de nuestra traza de pila desde la perspectiva del front-end, quiero llamar su atención sobre el seguimiento distribuido, esta característica que tenemos ya que también tenemos Sentry configurado en nuestro servicio de backend. Al hacer clic aquí, podemos ver que hay un error relacionado. Hay esta excepción que ocurrió en nuestro backend, por lo que es posible que queramos trabajar con nuestro equipo de backend para averiguar qué estaba sucediendo. Solo les daré una pista ya que no tenemos mucho tiempo. Es un problema sin suficiente inventario y no había una buena manera de lidiar con eso, por lo que ocurrió un error en el backend, ocurrió en el front-end, blah. En cualquier caso, cambiemos de tema y vayamos a nuestra página de performance. Esto nos dará la salud de performance de nuestra aplicación. Los indicadores web se enumeran en la parte delantera, cuánto tiempo tardó en cargar la primera cosa, la cosa más grande en cargarse, el retraso de entrada, la distribución de latencia y con el tiempo podemos ajustar el marco de tiempo desde el día anterior a otro marco de tiempo. Pero recordemos que la página de productos tardó mucho en cargarse. Podemos ver esa evidencia en el alto puntaje de miseria del usuario también. Puedes resaltar cada una de estas métricas y te dará más detalles sobre cómo se calculó, pero sigamos nuestro instinto, vayamos a la página de productos. Tenemos el desglose de duración, cuánto tiempo tomó para estas transacciones. Este es un gráfico interactivo, por lo que puedo ajustar el marco de tiempo resaltando o cambiándolo aquí también. Pero lo que creo que podría ayudar más es echar un vistazo a la duración de la operación. Está resaltado en este rojo HTTP, cubre prácticamente todo, así que eso es muy curioso. El rojo HTTP no es un color oficial, pero así es como lo llamo, y al hacer clic en un evento específico, podemos ver la duración de la operación en este tipo de gráfico de cascada. Si solo tuviéramos Sentry instalado en nuestro front-end, esto es exactamente lo que veríamos. Pero también tenemos este signo más que indica que también tenemos Sentry configurado en el back-end, y podemos ver cómo se llevó a cabo la transacción desde una solicitud de front-end al back-end para obtener los detalles de nuestros productos y devolverlos en el front-end. Muchos de los detalles están en estas consultas de database, y podemos ver que es secuencial. No es lo más óptimo. Es posible que queramos trabajar con nuestro equipo de database, nuestro equipo de backend, para optimizar estas consultas de database, tal vez procesamiento asíncrono. En cualquier caso, tenemos una forma de avanzar. Para resumir, nuestra aplicación de React fue lenta al cargar los productos, y también obtuvimos un error en nuestro proceso de pago. Como fuimos notificados, pudimos ver todos los detalles en el lado del backend y en el lado del front-end con ese seguimiento distribuido. En cuanto al performance, nuestra salud de performance y los indicadores web se enumeran en nuestra página de performance, seguimos nuestro instinto, y vimos ese alto puntaje de miseria del usuario, y eso nos llevó a esta página donde tenemos nuestro desglose de operaciones, y sabemos que podemos mejorar nuestras consultas de database. Muchas gracias por recorrer estos problemas en nuestro sitio de demostración conmigo. Que tengan un maravilloso resto de su conferencia. Muchas gracias.