¿Cómo está funcionando mi JavaScript?

Rate this content
Bookmark

En esta sesión, mostraré contexto relevante sobre los fallos y problemas de rendimiento en mi aplicación web de JavaScript. Cubriré cómo investigar errores y señalar dónde se introduce la lentitud.

8 min
01 Jul, 2021

Video Summary and Transcription

Neil Manvar de Sentry habla sobre el monitoreo de aplicaciones de JavaScript en entornos desplegados, centrándose en el seguimiento de errores y el análisis de rendimiento. Explica cómo funciona Sentry, incluida su integración con SDK y la notificación automática de errores. La charla también aborda el análisis de errores y problemas de rendimiento, y los beneficios de integrar Sentry en las aplicaciones. El resumen concluye con una mención de una oferta promocional de tres meses gratis de Sentry.

Available in English

1. Introducción a la monitorización de aplicaciones JS

Short description:

Neil Manvar, Gerente de Ingeniería de Soluciones en Sentry, habla sobre la monitorización de aplicaciones JS en entornos desplegados. JavaScript es complejo, especialmente en el lado del cliente. Sentry proporciona información sobre aplicaciones JS rotas o lentas, con datos e información relevantes. Se explorarán y depurarán dos aspectos: errores y rendimiento.

Hola, mi nombre es Neil Manvar y soy Gerente de Ingeniería de Soluciones en Sentry. Hoy voy a hablar sobre cómo podemos monitorizar nuestras aplicaciones JS para averiguar cómo se comportan en los entornos desplegados y actuar en base a esa información y seguir adelante.

Primero, JavaScript es complicado, ¿verdad? Como se ejecuta en el navegador, está ofuscado y cuando algo sale mal, ya sea un error o una ralentización, no siempre tenemos la información que necesitamos. Al mismo tiempo, estamos lanzando cada vez más y más de estas aplicaciones, y estamos tratando de iterar en ellas cada vez más rápido porque así es como se hace el negocio ahora, a través de la capa de aplicación, y ahí es donde cada vez más lógica va a vivir. Y vamos a estar iterando en esta lógica de forma continua.

Las aplicaciones también se están volviendo más complejas. No solo hay back-ends y microservicios, sino que también hay más cosas sucediendo en el front-end, hay más trabajo pesado y incluso estamos haciendo cosas como micro front-ends para separar estas cosas. Y cuando las cosas van mal, es un problema para todos. Los desarrolladores se ven alejados de las cosas que necesitan hacer, trabajar en nuevas características, y luego luchar contra este problema. Los clientes potencialmente se van, y las métricas también se ven afectadas, ¿verdad? Para el equipo de desarrollo, los tiempos medios de detección y solución se ven afectados. Los desarrolladores quieren centrarse en la calidad del código y en la eficiencia con la que pueden implementarlo. Y el equipo de producto está mirando todo esto en una imagen general. Cuando los ingresos se ven afectados, quieren lanzar todas las nuevas características en el momento adecuado, y cuando se compromete la velocidad. Así que eso es un problema.

Entonces, ¿qué podemos hacer al respecto en el contexto de las aplicaciones JavaScript? Tenemos todo el monitoreo relacionado con nuestra infraestructura, pero el monitoreo de la aplicación, especialmente cuando se ejecuta en el lado del cliente, es muy deficiente. Ahí es donde entra Sentry. Te dirá cuando tu aplicación JS está rota, cuando es lenta y exactamente por qué eso está sucediendo, y toda la información y datos relevantes al respecto. Te llevaré a través de dos aspectos: errores y rendimiento, y los depuraremos.

2. Cómo funciona Sentry

Short description:

La integración del SDK de Sentry es sencilla. Habilita el seguimiento del navegador, la salud de la versión y el seguimiento automático de sesiones. Con Sentry, los errores se notifican automáticamente y se desofuscan. El problema de Sentry proporciona información detallada, incluyendo la traza de la pila. El código desofuscado muestra exactamente qué salió mal. Sentry también muestra el commit que causó el error.

Pero primero, ¿cómo funciona Sentry? Integras nuestro SDK. Es muy sencillo. Entonces, para JavaScript, puedes hacer una inclusión de CDN, o Yarn add, o NPM install, y luego Sentry.init. Y luego, para el seguimiento o el rendimiento, queremos habilitar la parte de seguimiento del navegador y la tasa de muestreo adecuada. Y la última parte es que también queremos habilitar la salud de la versión, que estará habilitada de forma predeterminada. Pero debes establecer auto session tracking en true para habilitarlo explícitamente.

Ya tengo esto configurado en mi aplicación, que te mostraré en breve, pero la configuración aquí es así, y también estoy subiendo los mapas de origen a Sentry. Ahora déjame causar un error. Aquí, vamos a comprobar. Parece que algo salió mal. Y si no estuviera usando Sentry, es posible que no tuviera esta información. Y puedes ver que está ofuscado, por lo que tendría que reproducirlo y debug desde ahí. Pero como estoy usando Sentry, ¿qué va a pasar? Y puedes ver que esto acaba de llegar. Se me notifica automáticamente que algo está roto. Y aquí está toda la información relevante.

Lo que estoy viendo aquí es el problema de Sentry y esto me dirá el quién, qué, cuándo, dónde, por qué del error. Sentry desofuscará automáticamente estos errores y los agregará en consecuencia. Así que echemos un vistazo. Parece que tenemos un 500 que ocurrió 70,000 veces afectando a 33K usuarios. Ha estado apareciendo durante los últimos 30 días. Parece que está ocurriendo en estos dos navegadores. Afectando a estos clientes y en producción en esta versión. Así puedo entender el impacto agregado de este error y los data a partir de ahí y puedo ver los data específicos del evento aquí mismo. Todos los atributos, especialmente la traza de la pila.

Lo que habrías visto en el navegador se vería algo así. Sentry lo desofuscó y luego te mostró los frames relevantes y las líneas de contexto para que podamos ver exactamente qué salió mal en el código. Parece que no obtuvimos un 200 desde el backend, por lo que se lanzó un error. Luego parece que el cliente estaba agregando varias cosas al carrito, hizo clic en el botón de pago, nuestro backend devolvió un 500 que se propagó a window.onerror, y toda la otra información que el SDK considera útil, la adjuntará y también puedes adjuntar personalmente. El punto es que ahora sé el quién, qué, cuándo, dónde y por qué justo cuando sucedió, no tuve que buscar o preguntar y no nos quedamos ahí. Incluso te mostraremos el commit que causó el error.

3. Analyzing Errors and Performance

Short description:

El commit escrito por Will causó el error. Queremos que llegue a las personas adecuadas y solucionarlo rápidamente. Ahora pasemos al rendimiento. Hay una desaceleración en la aplicación y necesitamos averiguar si es un problema de front-end o back-end. Analizaremos la solicitud HTTP y rastrearemos la desaceleración. También podemos ver todas las transacciones e identificar errores y áreas lentas.

Entonces aquí, lo que esto dice es que este commit aquí escrito por Will causó este error. Por lo tanto, Will debería ser asignado a este problema y él puede solucionar este problema en cinco minutos en lugar de tener que entender este código, iterar en él y luego, ya sabes, solucionarlo y luego publicarlo, lo que llevaría horas o días.

Eso es todo para los errores. Queremos que llegue a las personas adecuadas, obtener todos los detalles y solucionarlo para que puedas arreglarlo. Y ya estás dentro y fuera de aquí.

Lo siguiente que quiero explicar es el performance. Entonces, si echo un vistazo aquí mismo, el mismo tipo de aplicación, lo que va a ser diferente aquí es que hay una desaceleración como viste. Permíteme hacer un poco de limpieza de pestañas. Una vez más. Entonces, cuando hago clic en cargar, cuando voy a la página, tarda un tiempo en cargar el resultado. ¿Es un problema en el front-end? ¿Es un problema en el back-end? No lo sé, pero vamos a averiguarlo.

Lo otro es que cuando hago clic en pagar, parece que también está roto. Y hay un problema. Así que voy directamente a Sentry. Voy a performance. Vamos a ver nuestro proyecto de front-end. También estamos obteniendo la información vital de la web. Podemos ver el más grande. La pintura contemporánea es bastante mala aquí, pero déjame abrir la herramienta aquí. Mire uno de estos y veamos exactamente qué está sucediendo.

Parece que el 81% del tiempo se gasta en la solicitud HTTP. Podemos ver cuándo se carga la primera pintura completa del contenido y toda la otra información que adjuntaríamos a un evento. Y también puedo rastrear esto hasta el back-end si quiero ver ese conjunto de data si estoy usando Sentry también. Pero ahora sé exactamente dónde está la desaceleración. ¿Está en el mundo de react? ¿Está en el mundo del navegador? ¿Está en la solicitud HTTP? Y otro caso de uso aquí es que quiero ver todas las transacciones. Así que veamos el pago y puedo ver los problemas relacionados aquí mismo. Esta es la vista agregada. Pero por cuestiones de tiempo, solo voy a sumergirme y puedo ver que hubo un error asociado con esta transacción. Entonces, en el lado derecho, vemos lo que está roto. En el lado izquierdo, vemos lo que es lento.

4. Sentry Integration and Conclusion

Short description:

Como desarrollador, integrar Sentry en tu aplicación proporciona información valiosa. Ver perspectivas de lanzamiento, incluyendo recesiones de fallos y tasas de adopción. Consultar el conjunto de datos utilizando Discover y consultas de panel. Sentry informa a los desarrolladores sobre aplicaciones rotas o lentas, lo que les permite centrarse en construir nuevas características. Obtén tres meses gratis de Sentry con el código sentry.io.

Y como desarrollador, tengo toda la información que necesitaría para actuar sobre esto y tal vez ni siquiera tenga que reproducirlo, así que puedo solucionarlo. Así que intégrate a tu aplicación Sentry. Obtendrás esta perspectiva.

E incluso veremos estas cosas desde una perspectiva de lanzamiento. Por ejemplo, este lanzamiento se hizo público. Puedo ver las recesiones de fallos, todas las tasas de adopción apropiadas y demás, y luego profundizar en esto en consecuencia para encontrar cualquier problema y transacción que pueda tener que ver con cualquiera de las experiencias que pueden haber sido deficientes.

También puedes consultar este conjunto de data. Tenemos Discover, y también puedes crear paneles con cualquiera de esas consultas. En resumen, Sentry es lo que le dirá a los desarrolladores que su aplicación está rota, es lenta, les dará todos los detalles al respecto para que puedan actuar y centrarse en construir nuevas características.

Lo último que quiero mostrarles es que estamos ofreciendo tres meses gratis de Sentry. Adelante, usa este código sentry.io. Gracias a todos por su tiempo. Sé que esto fue rápido, pero quería cubrir todo el material técnico. Les agradezco. Adiós.

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

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.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Workshops on related topic

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.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.