Monitorización de errores y ralentizaciones con un frontend de JS y un backend de Node

Rate this content
Bookmark

Tenemos un frontend de JavaScript que se conecta a un backend de Node (Express.js). Vamos a ver cómo saber qué parte es responsable de cada error, cuál es el impacto y todo el contexto necesario para resolverlo.

8 min
17 Feb, 2022

Video Summary and Transcription

Sentry es una herramienta de monitorización de código para desarrolladores, diseñada específicamente para la capa de aplicación. Ayuda a identificar detalles de errores, frecuencia, versión, información del usuario y traza de la pila. Se pueden subir mapas de origen para ver el código fuente original y se pueden identificar los commits sospechosos. La monitorización de rendimiento ayuda a identificar ralentizaciones y determinar la causa. La automatización de alertas y la investigación de errores ayudan a obtener contexto instantáneo y rastrear errores en diferentes proyectos.

Available in English

1. Introducción a Sentry y Monitoreo de Errores

Short description:

Soy Chris, un ingeniero de soluciones en Sentry. Hoy, discutiremos el monitoreo de errores y ralentizaciones en JavaScript. Sentry es un monitoreo de código para desarrolladores, diseñado específicamente para la capa de aplicación. Cubriremos el monitoreo de errores y el monitoreo de rendimiento. En nuestro sitio de demostración, nos encontramos con un punto final de productos lento y un error. Con Sentry, podemos identificar los detalles del error, incluyendo su frecuencia, versión, información del usuario y rastreo de la pila. Las migas de pan proporcionan información sobre el recorrido del usuario que lleva al error.

Hola a todos, mi nombre es Chris. Soy un ingeniero de soluciones en Sentry y estoy aquí para hablarles hoy sobre el monitoreo de errores y ralentizaciones en JavaScript. Sentry es un monitoreo de código para desarrolladores. Te avisamos cuando tu código está roto y te avisamos cuando tu código es lento. No somos un monitoreo de infraestructura, no somos un monitoreo de análisis, específicamente vivimos en la capa de aplicación, estamos diseñados para desarrolladores. Hoy vamos a hablar sobre dos áreas principales, el monitoreo de errores y el monitoreo de rendimiento. Vamos a ir a docs.sentry.io, echar un vistazo a la documentación de node, es una instalación simple de NPM, e inicializar el SDK con sentry.init y algunas opciones de configuración. Muy fácil de empezar. Aterrizamos aquí en nuestro sitio de demostración donde vamos a comprar algunos productos de comercio electrónico. Notamos que el punto final de productos tarda un poco en cargarse, así que volveremos a eso en un momento. Vamos a añadir algunos productos al carrito. Hacer el checkout y esperar a recibir nuestros productos, y vemos un error. Así que sin algo como Sentry no vamos a saber que algo estaba mal, tanto en términos de que el punto final de productos estaba lento, como también, y más importante, en términos de tener este error. Así que lo que veremos aquí es, en el momento actual solo obtenemos un error y aparece en Slack. Podemos ver que es un 500, podemos ver que está sucediendo en producción, podemos ver la versión en la que se lanzó, tal vez esto fue algo que se lanzó anteriormente hoy, recientemente. Pero sabemos que está sucediendo en producción, es importante, vamos a hacer clic para ver más detalles. Aquí estamos en la página del problema. Esto es el Quién, Qué, Cuándo, Dónde, Por qué del error. Podemos ver cuál es el error, es un 500, ha ocurrido 45 veces para 22 usuarios únicos. Ha ocurrido tantas veces en las últimas 24 horas, y tantas veces en los últimos 30 días. Se vio por primera vez hace cinco meses, y se vio más recientemente, comprensiblemente, porque lo acabamos de desencadenar hace unos segundos en esta versión más reciente. Podemos ver que el usuario estaba en Chrome, y estaba en Mac OS X. Obtenemos un poco de información sobre su dirección de correo electrónico y cualquier otra etiqueta personalizada que hayamos establecido aquí. Tenemos el rastreo de la pila que nos dice el tipo de error y el mensaje. Puedes ver, bien, si la respuesta no se guardó, y vamos a llamar manualmente a capture exception, SDK de Sentry. Sentry se adjunta al controlador de errores global y capturará automáticamente cualquier error no capturado o no manejado también. También puedes capturarlos manualmente, por ejemplo, si estás manejando errores, como en este caso, también puedes capturarlos manualmente. Las migas de pan nos dan una idea del recorrido del usuario que lleva al error. ¿Qué estaba haciendo el usuario justo antes de que ocurriera el error? Puedes ver que justo antes hubo una solicitud POST al punto final de checkout, algunas declaraciones de impresión, un CLICK. Lo otro que es realmente importante mencionar es que estamos viendo un mensaje legible por humanos

2. Análisis de Errores y Rendimiento

Short description:

Si tienes una traza de pila minificada en bruto, puedes subir mapas de origen para ver el código fuente original. Sentry se integra con herramientas de gestión de código fuente para identificar confirmaciones sospechosas. Rastrea eventos de error secundarios y proporciona información sobre diferentes proyectos. Una vez identificada la causa raíz, se puede prestar atención al rendimiento. El puntaje de miseria del usuario refleja un rendimiento lento y se pueden analizar las transacciones para identificar ralentizaciones. El contexto y las migas de pan ayudan a comprender las acciones del usuario, y las etiquetas proporcionan información adicional. La función de trazado de Sentry ayuda a localizar problemas en el backend, como consultas ineficientes a la base de datos. Al consolidar todo el contexto relevante, Sentry simplifica la solución de problemas de errores y rendimiento.

versión de esto. Entonces, si tienes una traza de pila minificada en bruto, porque tienes código JavaScript empaquetado que ha sido minificado, verás algo que no es útil como esto. Cuando subes mapas de origen, podrás ver el código fuente original legible por humanos. También tenemos integraciones con diferentes herramientas de gestión de código fuente, por lo que por ejemplo, puedes ver estas confirmaciones sospechosas, y esto nos da una idea de quién podría haber cometido el código que causó este problema. También podemos ver que hay un evento de error secundario, y podemos rastrearlo en todos los proyectos. Hay otro proyecto, en este caso nuestra aplicación Node Express, y podemos ver que hay un mensaje de error diferente. No hay suficiente inventario para el producto.

Ha ocurrido 87,000 veces para 85,000 usuarios únicos, por lo que claramente este no es un problema nuevo. Ha ocurrido con mucha más frecuencia en las últimas 24 horas y 30 días que el problema anterior, considerándolo como el más recientemente visto y el primero visto. Todo lo mismo, el quién, qué, dónde, por qué, cuándo. Entonces no hay suficiente inventario para el producto, y lanzamos un nuevo error. En este punto, lo hemos rastreado hasta la causa raíz. Podemos considerar esto resuelto y dirigir nuestra atención al rendimiento. Entonces, si recuerdas, estamos aquí, hicimos clic en el punto final de productos, y vimos que había un rendimiento lento. Ahora, también podemos ver eso reflejado dentro de Sentry mismo. Puedes ver varios indicadores web de Google, solo las cosas estándar relacionadas con el SEO, como cuánto tiempo tarda en aparecer la cosa más grande en la página, la primera cosa en aparecer en la página, y también podemos ir a ver específicamente nuestras transacciones generales. Puedes ver que hay un puntaje de miseria del usuario que es bastante alto aquí para el punto final de productos. Entonces, si no supiéramos qué estábamos buscando, podríamos ver esto. Esto también es configurable. Si tienes puntos finales, ya sabes, que van a llevar mucho tiempo. Pero básicamente, es una forma de ver de manera útil qué transacciones están tardando mucho más de lo esperado. Haré clic aquí, echaré un vistazo a algunas de nuestras transacciones recientes. Y también podemos ver esto muestra muchos recursos y activos que los navegadores cargan, podemos ver que los componentes de React se montan, se actualizan, podemos expandir esto y ver que en un proyecto de backend hubo una solicitud HTTP que tardó aproximadamente 7.2 segundos de los 7.8 totales. Entonces, en este caso, hay una ralentización, parece que la mayoría de estas cosas no están contribuyendo a ello, pero este es el culpable aquí en esta página, también obtenemos contexto, tenemos migas de pan similares. ¿Qué estaba haciendo el usuario durante el tiempo previo a este punto? ¿Alguna información adicional aquí? Tenemos un montón de etiquetas diferentes a las que podemos acceder, además también podemos utilizar la función de trazado de Sentry para ir de nuevo a nuestro proyecto de nodo en el backend y darnos cuenta de que aquí es donde realmente están ocurriendo los problemas. Parece que hay algunas consultas a la base de datos que están sucediendo aquí. Y en este caso, parece que estamos haciendo algunas de forma secuencial. Entonces estamos obteniendo identificadores de productos individuales en lugar de todos los productos al mismo tiempo o un conjunto de identificadores de productos. Por lo tanto, esta podría ser un área donde hay margen para mejoras. Lo rastreamos desde el frontend hasta el backend, sin tener que buscar en los registros de ambas aplicaciones. El objetivo de Sentry es básicamente consolidar todo el contexto que necesitas para resolver errores y problemas de rendimiento y ponerlos en el

3. Automatización de Alertas e Investigación de Errores

Short description:

Automatiza tareas y configura alertas para recibir notificaciones en Slack. Crea alertas directamente desde la página de productos para monitorear el rendimiento de las transacciones. Envía correos electrónicos al equipo y notificaciones en Slack según el estado crítico o de advertencia. Muestra errores y obtén contexto instantáneo. Investiga los detalles de los errores, su frecuencia de aparición e impacto. Rastrea errores en diferentes proyectos. El monitoreo de rendimiento ayuda a identificar ralentizaciones y determinar la causa.

mismo lugar. Automatiza muchas de las tareas que te llevarían tiempo. En este punto, podríamos retroceder, incluso podríamos configurar una alerta de la misma manera para que recibamos notificaciones en Slack de la misma forma. Entonces, si volvemos a la página de productos, podemos crear una alerta directamente desde aquí. Eso nos dará una idea de la transacción slash productos. Digamos que si tarda más de ocho segundos, se considera crítico; si tarda más de cuatro segundos para esta transacción, y tal vez seis segundos, se considera advertencia. Se considera resuelto si es inferior a tres. Y puedes ver eso reflejado aquí. Entonces, lo que podemos hacer a continuación es agregar una acción, por ejemplo, en estado crítico o estado de advertencia, enviar un correo electrónico al equipo. Y en estado crítico, también enviar algo a través de Slack. Ahora hemos mostrado, nos ayudaremos a nosotros mismos a mostrar cualquier problema con este punto final, esta transacción en el futuro. Hemos mostrado un error. En este caso, se mostró en Slack. Tuvimos contexto instantáneo sobre si era importante o no. ¿Necesito hacer algo al respecto? Hicimos clic y obtuvimos el quién, qué, dónde, cuándo y por qué del error. Miramos cuántas veces había ocurrido, cuántas personas estaba afectando, y cuando decidimos que valía la pena resolverlo, investigamos, lo rastreamos hasta un proyecto diferente que teníamos que implementó Sentry, y encontramos la causa raíz. Esa función de rastreo se habilitará si solo tienes dos proyectos, dos aplicaciones que tienen Sentry inicializado y configurado correctamente. Pero eso es algo muy fácil de hacer.

Monitoreo de Rendimiento, mismo trato. Hemos mostrado una ralentización. Descubrimos qué salió mal. Gracias a todos por ver, y buena suerte eliminando esos errores allá afuera.

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

Node Congress 2022Node Congress 2022
26 min
It's a Jungle Out There: What's Really Going on Inside Your Node_Modules Folder
Top Content
Do you know what’s really going on in your node_modules folder? Software supply chain attacks have exploded over the past 12 months and they’re only accelerating in 2022 and beyond. We’ll dive into examples of recent supply chain attacks and what concrete steps you can take to protect your team from this emerging threat.
You can check the slides for Feross' talk here.
Node Congress 2022Node Congress 2022
34 min
Out of the Box Node.js Diagnostics
In the early years of Node.js, diagnostics and debugging were considerable pain points. Modern versions of Node have improved considerably in these areas. Features like async stack traces, heap snapshots, and CPU profiling no longer require third party modules or modifications to application source code. This talk explores the various diagnostic features that have recently been built into Node.
You can check the slides for Colin's talk here. 
JSNation 2023JSNation 2023
22 min
ESM Loaders: Enhancing Module Loading in Node.js
Native ESM support for Node.js was a chance for the Node.js project to release official support for enhancing the module loading experience, to enable use cases such as on the fly transpilation, module stubbing, support for loading modules from HTTP, and monitoring.
While CommonJS has support for all this, it was never officially supported and was done by hacking into the Node.js runtime code. ESM has fixed all this. We will look at the architecture of ESM loading in Node.js, and discuss the loader API that supports enhancing it. We will also look into advanced features such as loader chaining and off thread execution.

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.
Node Congress 2023Node Congress 2023
109 min
Node.js Masterclass
Workshop
Have you ever struggled with designing and structuring your Node.js applications? Building applications that are well organised, testable and extendable is not always easy. It can often turn out to be a lot more complicated than you expect it to be. In this live event Matteo will show you how he builds Node.js applications from scratch. You’ll learn how he approaches application design, and the philosophies that he applies to create modular, maintainable and effective applications.

Level: intermediate
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
JSNation 2023JSNation 2023
104 min
Build and Deploy a Backend With Fastify & Platformatic
WorkshopFree
Platformatic allows you to rapidly develop GraphQL and REST APIs with minimal effort. The best part is that it also allows you to unleash the full potential of Node.js and Fastify whenever you need to. You can fully customise a Platformatic application by writing your own additional features and plugins. In the workshop, we’ll cover both our Open Source modules and our Cloud offering:- Platformatic OSS (open-source software) — Tools and libraries for rapidly building robust applications with Node.js (https://oss.platformatic.dev/).- Platformatic Cloud (currently in beta) — Our hosting platform that includes features such as preview apps, built-in metrics and integration with your Git flow (https://platformatic.dev/). 
In this workshop you'll learn how to develop APIs with Fastify and deploy them to the Platformatic Cloud.
JSNation Live 2021JSNation Live 2021
156 min
Building a Hyper Fast Web Server with Deno
WorkshopFree
Deno 1.9 introduced a new web server API that takes advantage of Hyper, a fast and correct HTTP implementation for Rust. Using this API instead of the std/http implementation increases performance and provides support for HTTP2. In this workshop, learn how to create a web server utilizing Hyper under the hood and boost the performance for your web apps.