Rastrea ralentizaciones y fallos en tus aplicaciones de React

Rate this content
Bookmark

En esta charla relámpago, verás:

  • La falta de visibilidad en las aplicaciones de React
  • Cómo instalar el SDK de Sentry React
  • Cómo Sentry puede ayudarte a identificar errores y ralentizaciones dentro de tu aplicación de React para que puedas ver más rápido, resolver más rápido y aprender continuamente de tus aplicaciones

8 min
25 Oct, 2021

Video Summary and Transcription

Sentry es una herramienta para la observabilidad del código que admite múltiples lenguajes y frameworks. Permite monitorear errores y rendimiento en aplicaciones, como aplicaciones de React en un sitio de comercio electrónico. Con Sentry, los desarrolladores pueden investigar fácilmente errores utilizando herramientas de desarrollo y obtener un resumen del error. También proporciona trazas de pila legibles por humanos que resaltan la línea exacta del error.

Available in English

1. Introduction to Sentry and Code Observability

Short description:

Hola, soy Simon, un Ingeniero de Soluciones en Sentry. Nos enfocamos en la observabilidad del código, brindando soporte para todos los lenguajes y frameworks principales, incluyendo React. Con Sentry, puedes monitorear los errores y el rendimiento de tu aplicación. Echemos un vistazo a una aplicación de React en un sitio de comercio electrónico. Nos encontramos con un error, pero con Sentry, podemos investigarlo fácilmente utilizando las herramientas para desarrolladores y obtener un resumen del error.

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.

2. Understanding the Stack Trace with Sentry

Short description:

En un mundo sin Sentry, obtendríamos una traza de pila minificada, lo cual no es fácil de entender. Pero con Sentry, podemos cargar mapas de origen y obtener una traza de pila legible que resalta la línea exacta del error.

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.

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 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn