Identificar Problemas y Prevenir Ralentizaciones en tus Aplicaciones Vue.JS

Rate this content
Bookmark

En esta charla relámpago, verás:

1. La falta de visibilidad en las aplicaciones Vue.js.

2. Cómo instalar el SDK de Sentry Vue.js.

3. Cómo puedes utilizar Sentry para identificar errores y ralentizaciones dentro de tu aplicación Vue.js.

8 min
20 Oct, 2021

Video Summary and Transcription

Hola, soy Simon, un ingeniero de soluciones en Sentry. Nos enfocamos en la observabilidad del código, brindando soporte para todos los principales lenguajes y frameworks. Con el SDK de Sentry, puedes monitorear errores y rendimiento. Comienza con un proceso de instalación sencillo. Sentry proporciona información detallada sobre errores, incluyendo la traza de la pila y la información contextual. También admite sistemas de control de código fuente e integra con herramientas de seguimiento de problemas. La función de traza distribuida te permite ver las relaciones entre errores en el front-end y back-end. Podemos optimizar las consultas para mejorar la experiencia del usuario y reducir el sufrimiento del usuario.

Available in English

1. Introducción a Sentry y Observabilidad de Código

Short description:

Hola, soy Simon, un ingeniero de soluciones en Sentry. Nos enfocamos en la observabilidad del código, brindando soporte a todos los lenguajes y frameworks principales. Con el SDK de Sentry, puedes monitorear errores y rendimiento. Comienza con un proceso de instalación sencillo.

Hola. Mi nombre es Simon. Soy un ingeniero de soluciones en Sentry. Nos enfocamos en la observabilidad del código. Con Sentry, puedes entender 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 a todos los lenguajes principales y frameworks, incluyendo Vue. Con el SDK de Sentry en tu aplicación, puedes alertar a los miembros del equipo necesarios y permitir que tus desarrolladores optimicen la experiencia del desarrollador y del cliente. La plataforma de Sentry proporciona múltiples perspectivas sobre la salud de tu aplicación. Pero hoy nos enfocaremos en el monitoreo de errores y el monitoreo de rendimiento. Para comenzar con Sentry, vamos al sitio de documentación de Sentry, buscamos Vue, o hacemos clic para ver las 99 plataformas compatibles. Y en esta sección de JavaScript, tenemos un enlace a Vue. El proceso de instalación es muy sencillo. Es una instalación de NPM y unos pocos

2. Monitoreo y Análisis de Errores de Sentry

Short description:

Lo que esto hará es conectar Sentry a tu manejador global de errores. A medida que los usuarios interactúan con tu aplicación, se envían eventos y transacciones a Sentry. Puedes configurar alertas para recibir notificaciones de errores en tiempo real. Sentry proporciona información detallada sobre los errores, incluyendo la traza de la pila e información contextual. También admite sistemas de control de código fuente e integra con herramientas de seguimiento de problemas. La función de traza distribuida te permite ver las relaciones entre los errores en el front-end y el back-end.

líneas de código para configurar Vue en tu aplicación. Lo que esto hará es conectar Sentry a tu manejador global de errores. Y a medida que los usuarios interactúan con tu aplicación, se envían eventos y transacciones a Sentry. Aquí tengo una aplicación de demostración Vue muy básica. Echemos un vistazo juntos. Acabo de actualizarla porque la he configurado para que se envíe una solicitud HTTP al cargar la página. Revisaremos lo que eso significa en el lado del performance, pero por ahora hagamos clic en estos botones de error. Y a medida que estos errores ocurren, también se envían a Sentry. He configurado algunas alertas para nosotros. Así que en realidad estamos recibiendo notificaciones de estos errores mientras ocurren. Así que en Slack, acabo de hacer clic en una notificación que nos llevará directamente a este error. Y todos estos detalles del error se muestran frente a mí. Tenemos el error, el mensaje de error, la magnitud de este error, cuántas veces ocurrió y cuántos usuarios se vieron afectados. También integramos con sistemas de control de código fuente, por lo que tenemos detalles sobre el commit que pudo haber causado esto, enlaces a esos commits, información contextual a través de estas etiquetas como los detalles del usuario, el entorno en el que se encuentran. Podemos agregar nuestras propias etiquetas, pero lo que probablemente nos importa más en este momento es la traza de la pila. Así que está justo debajo. Y en un mundo sin Sentry, estaríamos lidiando más con una traza de pila minimizada, óptima para el performance, pero no muy legible para los humanos. Pero afortunadamente, Sentry nos ayuda con eso. Así que durante nuestro proceso de compilación, hemos subido nuestros mapas de origen, Sentry tomó eso, tradujo el mapa de origen, la traza de la pila para nosotros, y tenemos esta hermosa traza de pila legible para los humanos, incluyendo el resaltado de la línea donde ocurrió el error. Y vemos que la respuesta fue falsa. También sabemos qué archivo revisar. Así que tengamos todo eso en mente, cosas muy interesantes. Pero justo debajo de eso, tenemos más contexto, una línea de tiempo de las actividades en nuestras migas de pan. También podemos agregar nuestras propias migas de pan si queremos. Y todo esto está instrumentado automáticamente. Podemos ajustar el tiempo a un formato más de cuenta regresiva donde cuando lleguemos a tiempo igual a cero, obtendremos ese error interno del servidor. Así que todo esto es genial para obtener más contexto. Y si eso no fuera suficiente, este error ha ocurrido unas 50 veces. Así que hemos recopilado todas las etiquetas de todos estos errores en esta sección de mapa de calor a la derecha. Con toda esta información, el contexto y el contenido desde la perspectiva del front-end, podemos considerar crear un nuevo ticket o vincularlo a un ticket existente a través de estas integraciones con herramientas de seguimiento de problemas. También quiero llamar la atención sobre la función de traza distribuida que tenemos en Sentry. Dado que tenemos Sentry instalado en nuestro back-end

3. Análisis de Eventos y Rendimiento

Short description:

Vemos un evento secundario y un error relacionado desde la perspectiva del back-end. La salud del rendimiento proporciona métricas web y un índice de sufrimiento del usuario. Al hacer clic en la transacción de la página de inicio, se muestra el desglose de la duración y de las operaciones. La mayor parte del tiempo de operación proviene de solicitudes del cliente HTTP y consultas secuenciales a la base de datos. Podemos optimizar estas consultas para mejorar la experiencia del usuario y reducir el sufrimiento del usuario. Gracias por revisar la aplicación Vue conmigo.

También vemos una relación en el back-end. Vemos que hay un evento secundario y un error relacionado que debemos revisar. Esto se refiere a la respuesta que indica que OK fue falso proveniente de nuestro back-end. Si hacemos clic aquí, podemos ver las etiquetas del back-end, la traza de la pila del back-end, las migas de pan del back-end, todo lo que vemos aquí, pero desde la perspectiva del back-end. Cambiemos de tema por un momento. Hay mucho en el lado de los problemas y tenemos tiempo suficiente para ver la salud del rendimiento que proporciona Sentry. De inmediato, vemos nuestras métricas web. Eso es cuánto tiempo tarda en cargar la primera cosa, la cosa más grande en cargar, la demora de entrada, la estabilidad de nuestra página, la latencia a lo largo del tiempo y la distribución en las últimas 24 horas. Eso fue rápido, ¿verdad? Charla relámpago. Pero lo que destaca aquí es el índice de sufrimiento del usuario. Al resaltarlo, nos da una definición de esta métrica. Lo mismo ocurre con todas estas otras métricas también. Pero sigamos nuestro instinto, hagamos clic en la transacción de la página de inicio aquí y podrás ver el desglose de la duración, cuánto tiempo tardaron estas transacciones en completarse en el pasado, en este caso, 24 horas. Podemos interactuar con este gráfico resaltando una sección diferente. Eso actualizará el marco de tiempo, por supuesto, y también los eventos que aparecen. La mayor parte de la operación está cubierta en este rojo HTTP. Al hacer clic en un ID de evento, podemos ver el desglose de la operación en este tipo de gráfico en cascada. Tomó 15 segundos para esta transacción, y la mayor parte del tiempo de operación provenía de esta solicitud del cliente HTTP. Y esto va a nuestro back-end, y podemos ver eso porque tenemos este ícono de suma aquí. Tenemos configurada la traza distribuida. Si no lo tuviéramos, simplemente no veríamos este ícono de suma y no podríamos expandirlo. Afortunadamente, podemos hacerlo, y podemos ver que gran parte de este tiempo se debe a estas consultas secuenciales a la base de datos. Ahora tenemos una forma de avanzar, trabajar con nuestro equipo de back-end, optimizar estas consultas a la base de datos, hacerlo como una situación de procesamiento asíncrono, y eso mejorará la experiencia del usuario y reducirá el sufrimiento del usuario también. Así que solo para recapitular por un momento aquí. En nuestra aplicación Vue, hicimos clic en algunos de estos botones de error. Recibimos notificaciones a través de nuestra integración con Slack para llegar a nuestra página de errores. Al observar el contexto y el contenido completo desde la perspectiva del front-end y con la traza distribuida, también podríamos hacerlo desde la perspectiva del back-end. En cuanto a la salud del rendimiento, tenemos un resumen de esa salud a través de estas métricas web, seguimos nuestro instinto a través del índice de sufrimiento del usuario en esa transacción de la página de inicio, vimos el desglose de la operación y podemos hacer algunas mejoras en estas consultas subóptimas a la base de datos. En cualquier caso, muchas gracias por revisar esta aplicación Vue conmigo. Que tengas un maravilloso resto de tu conferencia. Muchas gracias. Transcrito por https://otter.ai

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

Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Vue.js London Live 2021Vue.js London Live 2021
20 min
One Year Into Vue 3
Top Content
Vue 3 may still sound new to many users, but it's actually been released for over a year already. How did Vue 3 evolve during this period? Why did it take so long for the ecosystem to catch up? What did we learn from this process? What's coming next? We will discuss these questions in this talk!
Vue.js London Live 2021Vue.js London Live 2021
8 min
Utilising Rust from Vue with WebAssembly
Top Content
Rust is a new language for writing high-performance code, that can be compiled to WebAssembly, and run within the browser. In this talk you will be taken through how you can integrate Rust, within a Vue application, in a way that's painless and easy. With examples on how to interact with Rust from JavaScript, and some of the gotchas to be aware of.
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.

Workshops on related topic

Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
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.
Vue.js London Live 2021Vue.js London Live 2021
117 min
Using Nitro – Building an App with the Latest Nuxt Rendering Engine
Top Content
Workshop
We'll build a Nuxt project together from scratch using Nitro, the new Nuxt rendering engine, and Nuxt Bridge. We'll explore some of the ways that you can use and deploy Nitro, whilst building a application together with some of the real-world constraints you'd face when deploying an app for your enterprise. Along the way, fire your questions at me and I'll do my best to answer them.
Vue.js London 2023Vue.js London 2023
137 min
TresJS create 3D experiences declaratively with Vue Components
Workshop
- Intro 3D - Intro WebGL- ThreeJS- Why TresJS- Installation or Stackblitz setup - Core Basics- Setting up the Canvas- Scene- Camera- Adding an object- Geometries- Arguments- Props- Slots- The Loop- UseRenderLoop composable- Before and After rendering callbacks- Basic Animations- Materials- Basic Material- Normal Material- Toon Material- Lambert Material- Standard and Physical Material- Metalness, roughness - Lights- AmbientLight- DirectionalLight- PointLights- Shadows- Textures- Loading textures with useTextures- Tips and tricks- Misc- Orbit Controls- Loading models with Cientos- Debugging your scene- Performance
Vue.js London Live 2021Vue.js London Live 2021
176 min
Building Vue forms with VeeValidate
Workshop
In this workshop, you will learn how to use vee-validate to handle form validation, manage form values and handle submissions effectively. We will start from the basics with a simple login form all the way to using the composition API and building repeatable and multistep forms.

Table of contents:
- Introduction to vee-validate
- Building a basic form with vee-validate components
- Handling validation and form submissions
- Building validatable input components with the composition API
- Field Arrays and repeatable inputs
- Building a multistep form
Prerequisites:
VSCode setup and an empty Vite + Vue project.