Construyendo Mejor Depuración de React con Análisis de Replay

Rate this content
Bookmark

El modelo de componentes de React y el flujo de datos unidireccional nos proporcionan un excelente modelo mental para construir nuestras aplicaciones, pero la depuración de las aplicaciones de React todavía puede ser confusa. Los detalles internos de React son una caja negra, y a menudo es difícil entender por qué se renderizaron los componentes o qué causó los errores.


El depurador de viaje en el tiempo Replay facilita la depuración de las aplicaciones de React al permitirte inspeccionar lo que está sucediendo en cualquier momento. Pero, ¿y si pudiéramos ir más allá de las características habituales del depurador, y construir nuevas características de depuración que nos digan más sobre lo que está haciendo React? Veamos cómo la API de Replay hace eso posible.

Mark Erikson
Mark Erikson
31 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La charla de hoy se centró en construir mejores herramientas de desarrollo de React con análisis de viaje en el tiempo de Replay. Las DevTools de React proporcionan valiosos conocimientos sobre las aplicaciones de React, utilizando una estructura de datos de fibra para representar instancias de componentes. Replay es un depurador de viaje en el tiempo para React, con planes de hacer de Chrome su navegador principal de grabación. Extraen información de React de las grabaciones utilizando su API de viaje en el tiempo y han construido una interfaz de usuario para la depuración y la inspección del contenido. El objetivo a largo plazo es que Replay funcione sin conexión y en modo de grabación permanente.

1. Introducción a la Construcción de Mejores Herramientas de Desarrollo de React

Short description:

Hoy, hablaré sobre la construcción de mejores herramientas de desarrollo de React con análisis de viaje en el tiempo de reproducción. Redux Toolkit 2.0 está en beta, y agradecemos sus comentarios. Las DevTools de React son una herramienta valiosa para entender tu aplicación de React.

Muy bien, buenas tardes, muchas gracias. Mi nombre es Mark Eriksson, y hoy estoy muy emocionado de hablarles sobre la construcción de mejores herramientas de desarrollo de react con análisis de viaje en el tiempo de reproducción, los cambios de título, lo que sea. Gracias por estar aquí. Seré honesto, probablemente esta no será la charla más práctica. No hay muchas cosas. Es como si pudiera ir a casa e inmediatamente cambiar mi código.

Definitivamente vamos a profundizar hoy. Tendré las diapositivas en mi blog más tarde hoy, blog.i2software.com, y estaré muy contento de responder preguntas sobre esto más tarde. Un par de cosas rápidas sobre mí. Soy un ingeniero frontend senior en Replay, donde estamos construyendo un depurador de viaje en el tiempo para JavaScript, y hablaremos de eso. Responderé preguntas en cualquier lugar donde haya un cuadro de texto en internet. Recojo todo tipo de enlaces interesantes. Escribo publicaciones de blog ridículamente largas, y soy un mantenedor de Redux, pero la mayoría de la gente me conoce como el tipo con el avatar de Los Simpsons.

Por curiosidad, ¿cuántas personas... llegaremos a las cosas de React en un segundo. Una nota rápida. Redux Toolkit 2.0 está en beta. Realmente apreciaríamos que la gente lo probara y nos diera sus comentarios. Háganos saber cómo funciona la nueva característica. Danos feedback si deberíamos intentar cambiar algunos de los diseños de API antes de que sea definitivo. Por favor, pruébalo y déjanos saber cómo funciona. ETA pronto. ¿Cuántos de ustedes tienen la extensión DevTools de React instalada en su navegador? Bien, esas son la mayoría de las manos. Muy contento de ver eso. Las DevTools de React son una maravillosa ayuda para entender lo que está pasando en tu aplicación de React. Es una de las grandes ventajas que tienen sobre los frameworks anteriores como Backbone. ¿Qué son? Nos permiten inspeccionar el árbol de componentes en la página. Nos muestran las relaciones de parentesco, el orden de los componentes, y si seleccionas un componente, entonces te mostrará las props actuales, los hooks, el estado, incluso algo llamado el árbol del propietario, que es la cadena de componentes que lo renderizó. Es una herramienta extremadamente valiosa para entender tu aplicación de React.

2. Entendiendo las Herramientas de Desarrollo de React

Short description:

Las herramientas de desarrollo de React tienen un panel de perfil que muestra el número de renders, los componentes renderizados y su tiempo de renderizado. Utiliza una estructura de datos llamada fibra para representar instancias de componentes. React se comunica con la extensión del navegador a través de un objeto de gancho global, lo que le permite enviar información sobre los renders. El árbol de fibras tiene punteros a la versión anterior, lo que permite a la extensión comparar los árboles actuales y anteriores durante la fase de compromiso.

Las herramientas de desarrollo de React también tienen un panel de perfil. Puedes presionar el botón de grabar, usar la aplicación durante un minuto, y te mostrará una lista o un recuento de todas las veces que la aplicación se renderizó, y para cada renderizado, te mostrará qué componentes en el árbol se renderizaron, y cuánto tiempo tardó cada uno de ellos. El gráfico de llama te da una idea relativa de este componente que tardó el doble que aquel. Muy valioso para entender el rendimiento general de tu aplicación.

Pero, ¿cómo funciona esto? Magia. Bueno, no es realmente magia, sino un montón de ingeniería muy cuidadosa. Entonces, sabemos que los componentes de función y los componentes de clase existen. Pero en muchos aspectos, estos son solo una especie de fachadas sobre los datos reales. Internamente, React tiene una estructura de datos llamada fibra. Y cada fibra representa una instancia de componente en el árbol. Así que React almacena el tipo de componente, literalmente la función o la clase. Almacena las props actuales. Tiene una lista enlazada que apunta a los padres, hermanos e hijos, y un montón de otros metadatos internos. Y así, este es realmente el árbol real de los componentes. Cada vez que React termina un renderizado, tiene este árbol de fibras que representa las instancias de componentes. Entonces, cuando instalas la extensión del navegador, React, que se carga en todas las páginas e inyecta algo de JavaScript. Y esto crea una variable global, doble guión bajo React DevTools gancho global, doble guión bajo. Y así es como React en la página va a hablar con la extensión del navegador. Entonces, este objeto de gancho global, que por cierto, no tiene nada que ver con los ganchos, como usar lo que sea, es solo una colisión de nombres. Almacena referencias a cada copia diferente de React que está en la página. Tiene algunas capacidades de emisor de eventos y tiene algunos callbacks que React ejecutará cada vez que haya renderizado. Entonces, cuando cargas React en la página, una de las primeras cosas que hace, es buscar, ¿existe este objeto de gancho global? Y si es así, sabe que la extensión del navegador está allí y tratará de enviar la información más tarde. Entonces, cada vez que React termina de renderizar al final de la fase de compromiso, hablará con el gancho global y ejecutará este método on commit fiber root. Y pasa por encima de la fibra de nivel superior que representa el componente raíz para todo el árbol. Y ahora, en ese punto, la extensión del navegador tiene algún código que se ejecuta dentro de la página, y puede mirar el árbol de componentes y ver qué hay allí y cómo se veía el árbol antes de eso. Entonces, ¿cómo sabe cómo se ve el árbol de componentes? Quiero decir, es obvio. Está justo allí. Todos podemos leer esto, ¿verdad? Entonces, el árbol de fibras en realidad tiene punteros a la versión anterior del árbol del último compromiso también. Y así, durante la fase de compromiso, cuando ejecuta este callback, el código de la extensión en la página puede recorrer el árbol y hacer un diff para comparar aquí estaba el árbol la última vez versus aquí está el

QnA

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
The Future of Performance Tooling
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.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
Remix Flat Routes – An Evolution in Routing
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – An Evolution in Routing
Top Content
This talk introduces the new Flat Routes convention that will most likely be the default in a future version of Remix. It simplifies the existing convention as well as gives you new capabilities.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
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, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
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.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
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.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
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
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.