Monitoreo de Errores y Ralentizaciones en Aplicaciones JS

Rate this content
Bookmark

Aprende sobre herramientas para rastrear datos desde el frontend hasta el backend y aumentar la visibilidad de errores y rendimiento. Repasaremos cómo saber qué equipos son responsables de cada error, cuál es su impacto y todo el contexto necesario para resolverlo.

8 min
24 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Sentry es una plataforma de monitoreo de errores que ayuda a los desarrolladores a optimizar la experiencia del cliente al alertarlos sobre errores y ralentizaciones. Admite todos los lenguajes y frameworks principales, con un enfoque en el monitoreo de errores, el monitoreo de rendimiento y la salud de las versiones. La charla explora cómo Sentry organiza y representa los datos de errores, analiza los detalles y etiquetas de errores, e investiga problemas en el backend, problemas de rendimiento y la salud de las versiones. Se enfatiza la colaboración con los equipos de backend para resolver problemas y optimizar el tiempo de transacción. La charla también destaca la importancia de analizar gráficos, problemas y regresiones para identificar áreas de mejora en la salud de las versiones.

Available in English

1. Introduction to Sentry and Error Monitoring

Short description:

Hola, soy Simon, un ingeniero de soluciones en Sentry. Monitoreamos errores y ralentizaciones en aplicaciones JS, conectando a los desarrolladores con la experiencia del usuario final. Con el SDK de Sentry, alertamos a los miembros del equipo y desarrolladores sobre errores y ralentizaciones, optimizando la experiencia del desarrollador y del cliente. La plataforma de Sentry se enfoca en el monitoreo de errores, el monitoreo de rendimiento y la salud de las versiones. Soportamos todos los lenguajes y frameworks principales, con Node.js como punto de partida. Generaremos datos de transacciones y errores para demostrar cómo Sentry los organiza y representa. Veamos cómo se representan los errores en Sentry, incluyendo la frecuencia, los datos contextuales y la información de etiquetas.

Hola, mi nombre es Simon. Soy un ingeniero de soluciones en Sentry, y hablaremos sobre el monitoreo de errores y ralentizaciones en aplicaciones JS. Sentry está diseñado específicamente para desarrolladores. Te diremos cuando tu código es lento, cuando está roto y te daremos pistas sobre por qué. Estamos conectando la experiencia del usuario final lo más cerca posible de los desarrolladores que hacen que esas experiencias sucedan. Con el SDK de Sentry en tus aplicaciones, alertaremos a los miembros del equipo y desarrolladores necesarios cuando ocurran esos errores y ralentizaciones. Permíteles hacer esos commits y los cambios para optimizar esa experiencia del desarrollador y del cliente. La plataforma de Sentry se divide en estos cinco pilares aquí. Nos enfocaremos en los primeros tres a la izquierda, es decir, el monitoreo de errores, el monitoreo de rendimiento y la salud de las versiones de Sentry.

Ahora, para comenzar, estaremos en la página de documentación de Sentry. Soportamos todos los lenguajes principales y frameworks. Pero probablemente el lugar donde tenemos Node.js en la página principal para comenzar con eso, la instalación de los paquetes necesarios con un comando Yarn o NPM y configurar con Sentry init, incluyendo ese DSN. Ese es un nombre de origen de datos. Le dirá a tu aplicación a dónde enviar eventos de errores y transacciones, y ese es tu proyecto en Sentry. Ahora, tengo una aplicación aquí para que la veamos juntos. Generaremos algunas transacciones y algunos datos de errores, y veremos cómo se representan en Sentry, cómo se organizan por versiones también. Ahora, para comenzar, haremos clic en explorar productos para ver las cosas disponibles para comprar. Y está tomando unos segundos aquí. Veremos esa ralentización en breve, pero voy a terminar con este flujo de usuario, agregando un par de elementos a nuestro carrito, y procediendo a comprarlos, ¿verdad? Nos encontramos con un error, sorpresa, sorpresa, pero veamos cómo se representa en Sentry. Ahora, tengo una alerta de Slack configurada. Así que en unos segundos, recibiremos una notificación sobre el error que acabamos de desencadenar en ese proceso de compra. Haz clic en esta notificación con, ya sabes, algo de contexto detrás de escena también de lo que acaba de suceder, pero veamos más a fondo. Desde ese enlace, se me lleva a quién, qué, cuándo y dónde ocurrió el error que acabamos de experimentar juntos, ¿de acuerdo? Este error, este error 500, ha ocurrido 160 veces para 60 usuarios. Algunos detalles sobre su frecuencia en el último día, 30 días, primera y última vez visto en las versiones. Eso es realmente útil. Y también alguna información de etiquetas agregadas aquí a la derecha. Hemos tomado las 160 veces que ha ocurrido este error, obtenido algunos datos contextuales y los hemos organizado en un mapa de calor. Como puedes ver aquí, el tipo de cliente es plan pequeño, grande, mediano, empresa. Está afectando a todos nuestros usuarios. Así que queremos investigar más a fondo eso.

2. Error Details and Analysis

Short description:

Enfoquémonos en los detalles de una de las 160 veces que ocurrió este error. Analizaremos las etiquetas, la traza de la pila y la línea de tiempo de las actividades que llevaron al error.

Ahora, centrémonos en el panel central aquí. Estos son los detalles de una de las 160 veces que ocurrió este error. Podemos pasar a otras ocasiones. En cualquier caso, echemos un vistazo a estas etiquetas. Estos son los pares clave-valor para esta ocasión específica: MacOS Chrome, fue un cliente grande, entre otros detalles. Pero lo que más nos importa en este momento es probablemente la traza de la pila. Sin Sentry, estaríamos lidiando más con una traza de pila minificada, no legible por humanos. Pero como hemos subido nuestros mapas de origen durante la compilación, vemos esta traza de pila muy hermosa y legible por humanos, y podemos ver la línea de código exacta donde ocurrió. Parece que la respuesta del backend no fue correcta, así que podemos profundizar un poco más en eso. También tenemos una línea de tiempo de las actividades que llevaron al error.

3. Backend, Performance, and Release Health

Short description:

Ahora vamos a adentrarnos en el backend y ver la traza de la pila y los detalles del error. Podemos trabajar con nuestro equipo de backend para resolver el problema de inventario. Pasando al rendimiento, analizamos las métricas web y los detalles de la transacción. Identificamos un problema con la métrica web de mayor contenido visible y lo investigamos más a fondo. Al examinar el desglose de la transacción, encontramos una operación lenta del cliente HTTP debido a consultas secuenciales a la base de datos. Podemos colaborar con el equipo de backend para optimizar y mejorar el tiempo de transacción. Por último, exploramos la salud de las versiones, incluyendo las tasas de fallos y detalles específicos. Podemos analizar gráficos, problemas y regresiones para identificar áreas de mejora.

nuestro error, que también podemos filtrar. Ahora, volviendo a la parte superior de esta página de problemas, veo que hay un conector a un evento secundario. Así que ese es nuestro nodo backend. Ahora, al hacer clic en eso, podemos ver todo lo que acabamos de revisar, pero ahora desde el backend. El quién, qué, cuándo y dónde. Con la traza de la pila también, tenemos nuestra traza de pila del nodo y obtuvimos un error porque no había suficiente inventario para nuestro producto, porque el recuento de elementos y las cantidades del inventario simplemente no estaban en sintonía. De acuerdo, así que podemos trabajar con nuestro equipo de backend para resolver eso. Genial, ese es el primer elemento aquí, el monitoreo de errores. Pasemos al rendimiento. Volviendo a nuestro frontend y nuestra pestaña de rendimiento, tenemos nuestras métricas web de inmediato. Así conectamos esa experiencia del usuario final a lo que nosotros como desarrolladores nos importa y lo que es accionable para nosotros. Nuestra transacción de productos, que tardó unos segundos en cargarse como notamos antes, está fallando en nuestra métrica web de mayor contenido visible (LCP). Así que profundicemos un poco más en eso. Tenemos nuestra tabla de transacciones, veamos un resumen de cómo ha estado funcionando en el último día. Podemos ajustar el período de tiempo o este es un gráfico realmente interesante para trabajar y resaltar un período específico. Pero en cualquier caso, lo que nos importa es entrar en los detalles de una transacción específica. Al hacer clic en eso, tenemos el desglose de la operación de lo que acaba de suceder o cómo está funcionando en relación a nuestras métricas web. Así que está fallando en ese LCP, con aproximadamente 10.6 segundos de los 11.18 segundos totales de tiempo de transacción. Muy problemático, pero muchas de las operaciones que se ven a continuación no están tomando mucho tiempo. Vemos una operación del cliente HTTP que está tomando alrededor de 10 segundos y medio. Así que profundicemos en eso y veamos qué operaciones están ocurriendo, ¿verdad? Aquí podemos ver que hay algunas consultas a la base de datos, algunas declaraciones SELECT que son secuenciales, y podemos trabajar con nuestro equipo de backend para descubrir cómo optimizar eso, reducir ese problema de LCP y mejorar el tiempo de transacción. Genial. Así que eso es dos puntos que hemos cubierto aquí. Ahora echemos un vistazo a la salud de las versiones. Así que organizamos los detalles de nuestros proyectos en versiones. También podemos ordenar por propiedades específicas. Y admitimos el versionado semántico. Aquí los hemos organizado por versiones 22.x, y podemos ajustar para ver los detalles de nuestro entorno de producción en los últimos 14 días en términos de sesiones, o también están disponibles los usuarios. En cualquier caso, una vez que filtres según eso, obtendremos todos los detalles sobre estas versiones. Así que nuestra tasa de sin fallos en la última versión es del 84%. Se adoptó el 7% del tiempo, eso está bien. Los fallos no son demasiado graves, pero al profundizar en uno específico, obtenemos los detalles específicos sobre estas versiones. Así que podemos organizar por diferentes series de gráficos, echar un vistazo a los problemas y los problemas que han regresado, los no gestionados, descubrir cuáles investigar y volver a donde comenzamos con la página de problemas, y también echar un vistazo a cómo se ajusta a las transacciones detrás de escena también. En este caso, dos transacciones, dos errores, todo encaja perfectamente con Sentry en cuanto a ir a una versión, echar un vistazo a los errores detrás de escena, y también los detalles de rendimiento todo conectado. Genial. Muchas gracias por pasar tiempo conmigo, echando un vistazo a estos errores y ralentizaciones en mis aplicaciones de JS.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.

Workshops on related topic

Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
WorkshopFree
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.