Depurando un Bloqueo No Reproducible

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

POV: Tu aplicación tiene un bloqueo que afecta a miles de usuarios, pero por más que lo intentas, no puedes reproducirlo y no tienes idea de qué lo está causando. Escucha la historia de una lucha épica para vencer un error no reproducible y aprende qué hacer (y qué no hacer) cuando te enfrentes a un enemigo así.

This talk has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

Native es una aplicación que en su versión 4.3 cubría un evento en vivo el 11 de octubre, añadiendo características esenciales para mejorar la experiencia del usuario.

La versión 4.3 de la aplicación Native enfrentó un aumento significativo en la tasa de bloqueos, principalmente debido a un error de excepción de argumento ilegal en JavaScript que afectaba a todos los dispositivos Android.

Sentry, la herramienta de informes de bloqueos utilizada por Native, ayudó a identificar que los bloqueos ocurrían cada vez que un usuario iniciaba la aplicación, facilitando así el diagnóstico y la resolución del problema.

Una de las estrategias consideradas fue retroceder a una versión anterior de la aplicación, aunque esto no era directamente posible y requería lanzar una nueva versión con el código antiguo.

La causa raíz se identificó analizando las dependencias nativas actualizadas, en particular un fork de una biblioteca de navegación de Airbnb y React Native SVG, que introdujeron cambios que causaron los bloqueos al inicio de la aplicación.

Se parcheó React Native localmente en colaboración con el contribuyente principal de React Native y los mantenedores de React Native SVG, desplegando inicialmente la solución al 10% de los usuarios para verificar su efectividad antes del lanzamiento completo.

Las lecciones aprendidas incluyen la importancia de utilizar herramientas de informes de fallos exhaustivamente, monitorear la salud de las versiones lanzadas, y la ventaja de lanzar nuevas versiones inicialmente a un pequeño porcentaje de usuarios para proteger a la mayoría en caso de fallos.

Alexandre Moureaux
Alexandre Moureaux
20 min
25 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla trata sobre un error grave que causó 20,000 bloqueos en una aplicación de JS. El error fue una excepción de índice fuera de límites en la clase SimplePool. El equipo utilizó un depurador para analizar el error y descubrió una condición de carrera causada por una actualización de React Native SVG. Colaboraron con los contribuyentes de React Native para solucionar el problema y desplegaron una versión parcheada. La charla enfatiza la importancia de utilizar una herramienta de informes de bloqueos, monitorear la salud de las versiones y aprender de los errores y el análisis del código fuente.

1. The Story of the Vicious Bug

Short description:

Hoy les contaré una historia, la historia de un error y nuestra lucha contra este error. Un error tan cruel y despiadado que causó nada menos que 20,000 bloqueos. Nuestra tasa de bloqueo aumentó significativamente y nuestra herramienta de informes de bloqueos está reportando una excepción cada minuto. Es un error de excepción de argumento ilegal en una aplicación JS mientras se actualiza una propiedad de estilo en un nodo de sombra de un componente React Native. Esto ocurre para cada usuario, en cada dispositivo Android, y todos los dispositivos Android se ven afectados.

Native. Y nuestra historia comienza en octubre. Somos un equipo de nueve personas y estamos muy felices y orgullosos de lanzar la versión 4.3 de nuestra aplicación. ¿Por qué estamos tan felices y orgullosos? Bueno, porque nos estábamos preparando para nuestro evento en vivo del 11 de octubre que la aplicación estaba cubriendo, y estábamos agregando muchas características esenciales a la aplicación. ¡Genial! Estamos súper felices.

Pero luego, sucede lo inesperado. De repente, nuestra tasa de bloqueo aumenta significativamente. Nuestra herramienta de informes de bloqueos que estamos utilizando, Sentry, está bajo fuego intenso. Está reportando una excepción cada minuto, luego muchas excepciones cada minuto. Básicamente, es una excepción cada segundo y se está volviendo abrumador. Todas esas excepciones son un poco diferentes, pero todas tienen la misma forma. Son así. Básicamente, es un error de excepción de argumento ilegal en una aplicación JS mientras se actualiza una propiedad de estilo en un nodo de sombra de un componente react Native.

Entonces, bueno, el primer pensamiento es, bueno, ya sabes, probamos esta versión, lo probamos mucho. ¿Por qué no vimos que esto estaba sucediendo? Y también, si buscas un poco más sobre este error, tiende a ocurrir si estableces un valor incorrecto para un estilo. Por ejemplo, si establezco el relleno superior como NAN, no es un número, esto es lo que ocurriría. Parece algo bastante fácil de detectar. Entonces, bueno, tal vez solo sucede en ciertos casos extremos que no hemos probado adecuadamente antes. Pero resulta que Sentry está informando que ocurre para cada usuario, cada dispositivo Android, por lo que esto es solo un problema de Android, pero todos los dispositivos Android se ven afectados. Y también en nuestra aplicación puedes favorecer al equipo, por ejemplo, para cambiar un poco la experiencia de la aplicación. Pero no importa qué equipo estés favoreciendo, esto no tiene impacto. Sigues obteniendo el bloqueo.

2. Analyzing the Crash and Reproduction Attempts

Short description:

Tenemos un gran bloqueo al iniciar que afecta a cualquier dispositivo y usuario. No pudimos reproducirlo, así que analizamos la traza de la pila y encontramos una excepción de índice fuera de límites en la clase SimplePool. Retroceder la versión no era una opción, ya que tenía un alto valor para los usuarios. Con una tasa de bloqueo del 10%, intentamos reproducir el problema en varios dispositivos pero no obtuvimos ningún bloqueo.

De acuerdo. Bueno, tenemos un gran bloqueo, tenemos un gran problema que resolver, así que empecemos intentando reproducir el bloqueo, ¿de acuerdo? Afortunadamente, configuramos Sentry o una herramienta de informes de bloqueos para que nos diga qué estaba haciendo el usuario antes de desencadenar el bloqueo. Aquí vemos que el usuario está abriendo la aplicación, iniciando la primera pantalla de la aplicación, que se llama Inicio. Y boom, se bloquea instantáneamente.

De acuerdo, básicamente me estás diciendo que afecta a cualquier dispositivo, se bloquea al iniciar, afecta a cualquier usuario y no podemos reproducirlo. Nunca lo hemos visto antes, ¿cómo es eso posible?

De acuerdo, bueno, supongo que el segundo paso, si no puedes reproducirlo realmente, es analizar la traza de la pila. Así que echemos un vistazo. Vale, dije que tenemos varios errores diferentes. Supongo que veamos el primero. Este es una excepción de índice fuera de límites. Es un error de Java. Ocurre en la clase llamada SimplePool y es una clase de la biblioteca de soporte de Android v4. Y ocurre en SimplePool.release, en la línea 116 de pools.java. Para ser honesto, en este punto ni siquiera sé qué es SimplePool. Ni siquiera sé por qué estoy en el código fuente de Android. Hay un gran problema que resolver y parece que va a llevar mucho tiempo entender qué está pasando porque realmente no entiendo esto. Así que supongo que busquemos una solución más fácil para resolver el problema.

Una idea sería, bueno, ¿podríamos simplemente retroceder nuestra versión? Bueno, si eres un desarrollador de aplicaciones móviles, sabes que no podemos retroceder realmente la versión. En realidad, tenemos que implementar una nueva versión con el código antiguo. Es un poco molesto y significa que ciertos usuarios, ya sabes, los usuarios obtendrán una actualización de la aplicación que revierte todo. En este momento, sabemos que nuestra tasa de bloqueo es del 10%. Parece que básicamente un usuario que abre la aplicación tiene una probabilidad de 1 de cada 10 de bloquear la aplicación. Pero parece que cuando intentan restaurarla, funciona. Además, esta versión tiene un gran valor para los usuarios. Resultó ser una de las versiones con mejor calificación a pesar de este bloqueo excepcional. Así que pensamos, bueno, no retrocedamos. No es el fin del mundo. Es extremadamente grande tener una tasa de bloqueo del 10%, pero intentemos solucionarlo de otra manera. De acuerdo, sabemos que la tasa de bloqueo es del 10%, así que estoy pensando, bien, puedo idear un plan de batalla. Voy a tomar seis dispositivos Android, voy a desencadenar con un script 10 lanzamientos de la aplicación por dispositivo, así que estadísticamente debería obtener entre cinco y diez bloqueos, ¿verdad? Y al menos eso sería algún tipo de reproducción. Finalmente podría ver el problema y si obtengo una solución, podría probarla. El resultado fue que no obtuve ningún bloqueo.

3. Investigando las Dependencias Nativas y las Pruebas

Short description:

Nuestra versión anterior no se bloqueaba, esta versión se bloquea. Actualizamos dos dependencias nativas: React Native SVG y navegación nativa. Sospechamos que la navegación nativa es la culpable de los bloqueos. Podemos lanzar una nueva versión al 10% de nuestros usuarios para probar si la nueva versión soluciona el bloqueo. Si no lo hace, podemos retroceder la biblioteca SVG. Si ninguna de las soluciones soluciona el bloqueo, podría llevar a desinstalaciones potenciales.

Ninguna en absoluto. Bastante desafortunado. Bueno, supongo que necesitamos encontrar algo más. Otra idea fue qué cambió realmente. Nuestra versión anterior no se bloqueaba, esta versión se bloquea. Entonces, ¿qué introdujimos entre las dos versiones que realmente bloqueó la aplicación?

Entonces, mi idea en este punto fue echar un vistazo a las dependencias nativas que actualizamos. Porque bueno, esta es una excepción de Java, por lo que ocurre en el código nativo, por lo que probablemente el culpable sea una dependencia nativa que actualizamos. Resulta que actualizamos dos dependencias nativas desde la última versión. La primera fue React Native SVG, y la segunda fue la navegación nativa. Probablemente no conozcas la navegación nativa. En realidad, es un fork que hicimos de una biblioteca de navegación de Airbnb, que utiliza, bueno, navegación nativa. Resulta que nosotros mismos agregamos algunas características para mejorar el rendimiento al inicio, ¿verdad? Suena como un buen culpable, ya sabes, lo actualizamos para mejorar el rendimiento al inicio, obtenemos bloqueos al inicio. Vale, parece que este debería ser el culpable detrás de nuestros bloqueos.

Como sabrás, en Play Store, puedes lanzar una nueva versión de tu aplicación solo para un subconjunto de tus usuarios. Por ejemplo, puedes lanzar la nueva versión solo para el 10% de tus usuarios. Esto nos permite idear un nuevo plan de batalla. Si la navegación nativa es realmente la culpable, podemos probarlo. No creamos la navegación nativa. Lanzamos una nueva versión que lanzamos solo para el 10% de nuestros usuarios. Volvemos a verificar, deberíamos poder ver en aproximadamente una hora si la nueva versión es exitosa. Y si tiene éxito, luego la lanzamos para todos, la nueva versión porque, bueno, el bloqueo está solucionado, ¡yay! Pero, ¿qué pasa si en realidad no soluciona el bloqueo? Bueno, supongo que en este caso, retrocedamos la otra, la biblioteca SVG, y bueno, hacemos lo mismo. Lanzamos para el 10% de nuestros usuarios. Volvemos a verificar. Si es exitoso, yay, lanzamiento completo, ok, genial, ganamos. Pero, ¿qué pasa si nuevamente eso no soluciona el bloqueo? Esto significaría que si aún no soluciona el bloqueo, significaría que actualizamos dos veces nuestra aplicación y cada vez, cada vez, el 10% de nuestros usuarios obtuvo una actualización que en realidad no hizo nada y no solucionó el bloqueo. Eso es realmente una fuente de desinstalación potencial, como cuando un usuario recibe muchas actualizaciones de su aplicación pero no hace nada por él. A veces sucede que un usuario desinstala la aplicación debido a esto. Para ser honesto, ese plan es sí, es un poco tonto.

4. Analyzing the Bug and Using the Debugger

Short description:

Nuestro error fue una excepción de índice fuera de límites en la clase SimplePool. Intentamos acceder a un array en el índice mPoolSize, que era -1. El único lugar donde mPoolSize cambia es en la función acquire, y está protegido para que no sea inferior a cero. Decidimos utilizar el depurador para investigar más a fondo.

De acuerdo. Supongo que en este punto, sí, necesitamos ir más profundo. Realmente necesitamos entender el error y analizarlo. Así que echemos otro vistazo. Nuestro error, como recordarás, fue una excepción de índice fuera de límites en un array. De acuerdo. Veamos dónde estaba ocurriendo. Estaba ocurriendo, como quizás recuerdes, en una clase llamada SimplePool dentro del código de la biblioteca de soporte Android v4. Y básicamente el error fue este. Tenemos un array de objetos llamado mPool y tenemos un índice llamado mPoolSize y estamos intentando acceder a este array en el índice mPoolSize que aparentemente es igual a menos uno. Así que ahora no necesitas ser un experto desarrollador de Java para saber que acceder a un array en el índice menos uno no es una buena idea. Así que puedes entender de dónde viene el bloqueo. El valor de mPoolSize es menos uno, lo cual no es bueno. Entonces la pregunta ahora es qué puede modificar realmente mPoolSize. mPoolSize solo se modifica en este lugar. Se inicializa en diez y luego solo se reduce en esta función llamada acquire dentro de SimplePool. Este es el único lugar donde mPoolSize realmente cambia en esta función y se reduce pero puedes notar algo allí, en realidad hay una condición para protegerlo de ser inferior a cero. Aquí está, si mPoolSize es mayor que cero, entonces se reduce mPoolSize. Así que suena imposible que mPoolSize se convierta en menos uno porque si mPoolSize es cero, no puedes reducirlo aún más, así que eso realmente suena imposible.

5. Analyzing the Bug with the Debugger

Short description:

Utilizamos el depurador en Android Studio para analizar la función acquire en el código de React Native. Descubrimos que la función dynamic de map create podía ser llamada desde diferentes hilos, lo que provocaba una condición de carrera. La actualización de SVG causó el error.

De acuerdo, supongo que es hora de sacar nuestra arma definitiva y, por supuesto, estoy hablando del depurador, el arma definitiva contra los errores. Así que bien, abramos Android Studio y veamos la famosa función que en realidad disminuye mPoolSize, que es la función acquire, y en las trazas de pila que estábamos viendo, veíamos que esta función era llamada desde el código de React Native en la clase llamada dynamic de map y la función create. Exactamente esta línea, así que, bien, pongamos un punto de interrupción ahí. La primera vez que se activó el punto de interrupción, básicamente ejecuté la aplicación y bueno, llegué al primer punto de interrupción bastante rápido y me está diciendo básicamente que, en realidad, dynamic de map es utilizado por React Native para almacenar propiedades de estilo de componente. Aquí estamos actualizando el ancho de un cierto componente. Así que puedes imaginar que esto va a suceder mucho porque, básicamente, cada vez que modificamos un estilo, llegamos al punto de interrupción. Así que sí, el segundo punto de interrupción fue bastante similar y en realidad, sí, hice clic básicamente 34 veces en el botón de reproducción y obtuve resultados similares pero, oh, en realidad, una revelación en el clic número 34 porque desde el primer clic hasta el 33, estoy obteniendo algo como esto, en el clic 34, estoy obteniendo algo como esto. Hay una diferencia muy sutil en esos puntos de interrupción porque desde el primer clic hasta el 33, los hilos que Android Studio estaba reportando son MQT native modules y bueno, este es el hilo que que React Native suele usar para trabajar con código nativo a través del puente.

6. Analyzing the Bug and Fixing the Issue

Short description:

En el hito 34, se utilizó el hilo principal, lo que dio una gran pista. La función dynamic de map create puede ser llamada desde diferentes hilos. El error fue causado por la actualización de SVG, donde ocurrió una condición imposible debido a la seguridad del hilo. Lo solucionamos colaborando con los contribuyentes de React Native y desplegando una versión parcheada para el 10% de nuestros usuarios. Lección aprendida: Utiliza tu herramienta de informes de errores de manera exhaustiva y configúrala para capturar las acciones del usuario.

Pero en el hito 34, el hilo que se utilizó fue el hilo principal, por lo que básicamente esto significa que en este caso no estaba activando el error, pero esto me dio una pista muy importante. Esta función dynamic de map create podría ser llamada desde diferentes hilos. Si observamos el hito 34, en realidad notamos que en este caso la propiedad que se estaba actualizando era una propiedad llamada fill, y bueno, esto realmente no suena como una propiedad de estilo de React Native, ¿verdad? De hecho, es una propiedad de SVG. Así que fue la actualización de SVG la que causó este error. Veamos qué puede suceder.

Entonces, React Native SVG, lo actualizamos a la versión 7 y comenzaron a utilizar este código dynamic de app create para mejorar el rendimiento de las animaciones SVG nativas. Pero lo estaban utilizando desde el hilo principal mientras que React Native lo estaba utilizando desde los módulos nativos MQT. Entonces, ¿qué puede suceder en realidad? Esta condición imposible, bueno, cuando tienes algo imposible sucediendo en Java, generalmente es debido a la seguridad del hilo. Como desarrolladores de JavaScript, no estamos acostumbrados a lidiar con múltiples hilos, pero cuando usas React Native, también tienes Java en la mezcla. Así que tienes seguridad de hilos en la mezcla. Aquí, esta condición imposible, podría suceder que dos hilos, hilo A y hilo B, pudieran ir prácticamente al mismo tiempo en la condición si amplesize es mayor que cero y pensar que es mayor que cero, y luego ambos ingresan a la condición al mismo tiempo, lo que significa que ambos lo disminuyen. Es algo así. El hilo A ve que amplesize es mayor que cero, genial, pero no tiene tiempo para disminuirlo aún, no tiene tiempo para salir de la función porque el hilo B también está ingresando a la condición y verificando que amplesize es mayor que cero. Y si al principio amplesize es uno, entonces vuelve a ser uno cuando verificamos la condición para el hilo B. Y luego, lo que sucede es que ambos disminuyen amplesize, por lo que se convierte en cero y luego en menos uno. ¡Vaya, realmente sabemos de dónde viene esto y por eso fue tan difícil de reproducir, porque esta es una condición de carrera que fue muy difícil de activar! Así que arreglemos esto.

Cuando investigamos, encontramos que había una solicitud de extracción en React Native que trataba esto, tratando la seguridad del hilo en dynamic de map create. Y así, en colaboración con el contribuyente principal de React Native que presentó la solicitud de extracción y los mantenedores de React Native SVG, ideamos un plan de batalla final. Parcheamos React Native localmente, desplegamos esta versión para el 10% de nuestros usuarios solo para verificar, y luego, por supuesto, verificamos nuevamente. ¿Fue exitoso? Sí. Finalmente. Lo arreglamos y nuestra tasa de fallos volvió a la normalidad. ¡Hurra! Muy bien. Esto fue fantástico. Pero tal vez algunas lecciones aprendidas de esto. La primera es esta. Debes utilizar tu herramienta de informes de fallos de manera exhaustiva y configurarla para poder utilizarla, porque vas a tener fallos en producción y probablemente vas a tener fallos que no puedes reproducir. Por lo tanto, debes saber qué está haciendo el usuario antes de activar el fallo. Por defecto, es posible que no tengas esto en tu herramienta de informes de fallos, así que debes configurarlo para que sea fácil ver, por ejemplo, las pantallas a las que está navegando tu usuario.

7. Detalles del Usuario, Salud de la Versión y Aprendizaje

Short description:

Debes agregar detalles sobre el usuario, monitorear la salud de la versión y proteger a tus usuarios. Implementar versiones a un 10% de los usuarios permite monitorear y minimizar el impacto. Profundizar en los errores y el código fuente brinda valiosas experiencias de aprendizaje.

También debes agregar tantos detalles sobre el usuario como sea posible, por supuesto, de manera compatible con el RGPD. Por ejemplo, en nuestro caso, agregar qué equipos el usuario estaba marcando como favoritos para cambiar su experiencia, porque a veces activas errores solo en ciertos casos en tu aplicación, por supuesto.

Luego, por supuesto, debes monitorear la salud de tu versión. Una tasa de fallos del 10%, por supuesto, es excepcional. Es realmente, realmente malo. Una tasa de fallos del 0.2% es un poco mejor. El estándar del mercado es de aproximadamente 0.3, 0.4 para Android. Es aún más bajo para iOS.

Y si realmente haces eso, también te permite hacer una cosa, proteger a tus usuarios. Y eso es lo que hicimos después de esto. Cada vez que implementamos una nueva versión, en realidad la lanzamos para el 10% de nuestros usuarios. Por supuesto, nunca deberíamos tener fallos, fallos excepcionales como este en esos 10%, pero en caso de que realmente suceda, al menos solo afectamos al 10% de nuestros usuarios. Entonces, el resto de los usuarios no tienen impacto. Y, por supuesto, eso significa que puedes saber si la versión fue exitosa, por lo que puedes monitorear la salud de tu versión.

Y, por supuesto, tienes tiempo entre la implementación inicial y, por ejemplo, en nuestro caso, tuvimos el evento en vivo el 11 de octubre. Hicimos la implementación el 9 de octubre. No fue realmente una buena idea.

El último punto es este. Puedes aprender mucho profundizando. Nunca he aprendido tantas cosas como cuando estaba investigando un error que no podía reproducir, y me sumergí más profundamente en el código fuente de las bibliotecas que estaba usando, y cada vez, aprendí mucho.

Y eso es todo. Gracias por ver, y contáctame si tienes alguna pregunta en el canal de Discord o en Twitter. 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

No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
El Epic Stack
React Summit US 2023React Summit US 2023
21 min
El Epic Stack
Top Content
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top ContentPremium
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Masterclass Web3 - Construyendo Tu Primer Dapp
React Advanced 2021React Advanced 2021
145 min
Masterclass Web3 - Construyendo Tu Primer Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js.
Tracing: Frontend Issues With Backend Solutions
React Summit US 2024React Summit US 2024
112 min
Tracing: Frontend Issues With Backend Solutions
Top Content
Featured WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.
Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM