Debugging What React DevTools Can’t See

Hola a todos, espero que estén muy bien. Así que pensé en contarles una pequeña historia antes de comenzar. Estoy contando la historia no porque sea única y sospecho que cada uno de ustedes tendrá una versión de ella. Sino porque esta es la razón por la que esta charla existe hoy.

Así que hace un tiempo estaba trabajando en una aplicación de comercio electrónico. El problema era que los pedidos se quedaban atascados. No fallaba. No arrojaba ningún error. No hacía nada dramático ni nada por el estilo. Simplemente se quedaba allí en el estado de procesamiento. Seguía procesando, procesando como para siempre. Simplemente estaba allí sin hacer nada y cualquier desarrollador, cualquier ingeniero que estuviera en esa situación hice lo más natural.

Abrí mis React DevTools. Miré la estructura de componentes. Estaba bien. Miré las props. Estaban geniales. Los hooks, todo estaba perfecto. Todo parecía estar bien. Y así es como mis React DevTools estaban reaccionando. Luego hice lo, ya sabes, lo segundo más natural que haría cualquier desarrollador. Comencé a poner registros de consola cada 10 líneas. Hola, ¿estás aquí? Hola error, ¿estás aquí? Y luego eventualmente lo logré de todos modos. No estoy orgulloso de ello, pero eso fue lo que realmente pasó.

Así que después de que resolví el problema, finalmente encontré el error, que estaba en una máquina de estados personalizada que estaba completamente fuera de cualquier cosa, mis React DevTools o cualquier herramienta de depuración que pudiera ver. Así que todo estaba perfecto. Pero aún así, no puedo depurar eso eficientemente. Una vez que eso estuvo hecho, eso se concluyó. Seguí pensando en eso. ¿Por qué me tomó tanto tiempo? Era un problema muy pequeño, ya sabes, si hubiera una manera de monitorear la lógica de negocio, si hubiera una manera, entonces este sería el error muy sencillo que podría resolver.

Ninguna herramienta nos mostró lo que la máquina de estados estaba haciendo. {{^}}Ninguna herramienta me mostró por qué falló la transición. Estábamos depurando a ciegas en una parte del sistema que importaba más. Y eso es lo que vamos a ver hoy.

Así que les contaré cómo construí mis propios paneles de DevTools personalizados para depurar esto, sus propias cosas específicas de lógica de negocio, cómo pueden construir los suyos. Y de eso vamos a hablar hoy.

Así que mi nombre es Vishnu. Soy ingeniero de producto en GetStack. Trabajo con el equipo de front end que construye VoiceTag. VoiceTag es un sistema telefónico potenciado por IA. Sí, cuando no estoy codificando, como cuando estoy fuera del teclado, me encanta viajar a muchos lugares. Soy como un tipo con ansias de viajar, ya saben, luego me gusta leer algunas cosas de texto, estar en contacto con lo que está sucediendo en la industria tecnológica. Y sigo experimentando con estas cosas raras como esta y eventualmente hablo en conferencias sobre esto. Sí, así que esto es lo que vamos a cubrir hoy.

Así que comenzaremos desde por qué existe el problema y por qué deberíamos y cuándo deberíamos realmente invertir en resolver esto. Luego la profundidad técnica, veremos cómo funcionan realmente estos React DevTools y veremos cómo construí mi propio inspector de dominio. Por inspector de dominio, quiero decir, puedes considerar eso como una lógica de negocio. Eso es lo que quiero decir con dominio. Y luego cómo podemos mantenerlo activo, cómo podemos mantenerlo vivo después de que lo construyas. Sabes, creo que esta es la parte más subestimada, pero es algo a lo que debemos prestar mucha atención. Así que comencemos.

Lo primero es que React DevTools son suficientes. Sí, repito, React DevTools son realmente suficientes, sabes. Y puedes pensar que React DevTools son suficientes? Estás sentado aquí un martes por la noche diciendo que React DevTools son suficientes en una charla sobre DevTools personalizados de React. Puedo escucharte. Pero la cosa es que React DevTools son una herramienta excelente. Quiero decir esto claramente antes de pasar los próximos 10 minutos describiendo lo que no hace. El inspector de componentes que tiene, el profiler, el panel de hooks, son realmente útiles. El equipo que lo ha construido ha puesto mucho esfuerzo en mantenerlo excelente hoy.

Pero mientras tanto, React DevTools no son suficientes. ¿Cuándo no son suficientes y por qué no son suficientes? Mira, estas herramientas fueron diseñadas alrededor de un modelo mental específico de cómo se vería la aplicación genérica de React. Habrá componentes en un árbol, las props fluirán hacia abajo, los estados vivirán en hooks. El modelo es correcto. Y para la mayoría de las aplicaciones esto debería ser suficiente. Pero ¿es esta toda la historia para tu aplicación? Porque cuando tienes tu lógica de negocio que vive fuera de tu árbol de componentes, digamos que tienes tus propias herramientas de gestión de estado, tienes tus propias capas de orquestación, tienes tus propios motores de flujo de trabajo, React DevTools no tiene nada que decir al respecto. Tampoco es una brecha de calidad, porque nunca fue construido para hacer eso. Así que te contaré algunos escenarios cuando deberíamos realmente invertir en construir nuestras propias herramientas de desarrollo. Así que el primero, llamaría a esto como la cinta de correr de registro. Al igual que yo hice, sigues agregando registros de consola cada 10 líneas y depuras el problema. Sé que este es un problema muy obvio para resolver un problema, como resolver un error. Pero el problema es que, de vez en cuando está bien. Si es un tipo de problema que no puedes resolver de una sola vez, entonces entiendo que esta es la única manera. Pero si esto sigue repitiendo un patrón, entonces construir herramientas de desarrollo para mejorar tu productividad es algo que deberías considerar. Y este escenario.

Así que la fricción de incorporación que no desaparece. Como cuando alguien entra en una nueva base de código, la curva de aprendizaje inicial es normal. Pero vamos a esa persona senior que está allí para preguntar sobre la base de código. Y sí, ahora también tenemos IA. Pero sí, eso está ahí. Pero si sigue ocurriendo una y otra vez, con el tiempo, entonces necesitamos tener algo que nos explique la lógica de negocio. Debería haber un sistema que nos explique la lógica de negocio. Y si eres ese senior que ayuda a los juniors, sabes, en cualquier problema, mi respeto para ti. Y sí, cuando tienes tu propia herramienta de gestión de estado, cuando decides, ya sabes, construir tus propias cosas, tus propias cosas, entonces en ese caso, las herramientas de desarrollo de React o algunas herramientas de desarrollador no tienen visibilidad sobre ello. Así que deberíamos invertir en desarrollar nuestras propias herramientas de desarrollo allí.

Ahora veremos cómo se construye realmente una herramienta de desarrollo de React, ¿verdad? Así que una vez que miras este diagrama aterrador, no voy a explicarte este profundo interno de React y todo, pero recomiendo encarecidamente pausar aquí, tomarte el tiempo para entender qué está pasando aquí. Pero este mecanismo que React expone para esto es realmente muy simple. Te lo diré con la arquitectura mucho más simplificada, ya sabes. Luego veremos el código de cómo lo hice. Así que cuando tu aplicación React se inicia antes de que algo se renderice, verifica una variable global en la ventana. Y se llama react dev tools global hook. Sí, React lo usa como un canal de comunicación. Así que cada commit, cada actualización, lo que sea que hagas, ya sabes, cada cambio de estado, todo React realmente transmite esta información a través de este hook solamente. Y así es como también funciona la extensión oficial de React dev tools.

Así que se bombean en una extensión. Y una vez que estás en tus herramientas de desarrollo, verás una nueva, ya sabes, nueva cosa, un nuevo panel llamado como sea que tengan, como tienen componentes, tienen profiler y un montón de Sí, ahora aquí está la parte que nos abre la puerta. Este hook no es solo un objeto en una ventana. No hay nada especial en él, quien lo pone allí, podemos poner nuestro propio listener en él. Esa es la gran parte. Así que junto con las herramientas de desarrollo oficiales, trabajamos con React y no alrededor de él. Así que esta arquitectura tiene básicamente cuatro piezas. Así que construimos nuestra propia extensión de inspector personalizada, tenemos nuestra propia lógica allí. Luego en nuestra UI, veré veremos lo que sea que hayamos construido como sí. Así que veamos cómo podemos construir esta UI personalizada. Herramientas de desarrollo, te mostraré mi código.

Primero, quería decir que esto es básicamente una interfaz de usuario codificada en blanco. Esta es una aplicación de React, esta es una aplicación de React muy simple que intentó reproducir el problema que tuve en mi, ya sabes, en mi aplicación de comercio electrónico. ¿Verdad? Así que esta es una aplicación codificada en blanco, codificada en blanco, va a parecer algo así. Así que esto es algo simple. Y esta es una extensión de herramienta de desarrollo. Esta es una extensión de herramienta de desarrollo muy normal que construimos con este manifiesto y todo.

Así que la parte principal aquí es primero, tenemos que verificar nuestra máquina de estados. Así que en mi caso, esta tienda, esta tienda de orquestación de pedidos es mi gestor de estado. Sí. Así que en este caso, te mostraré primero esto es esto es como, esto es un gestor de estado personalizado muy normal que he construido. Estos son solo inicializadores. Estos son para suscripciones. Estos son para obtener los valores derivados. Así que básicamente, estas cosas son como cualquier IA puede generar esto.

Así que sí, te mostraré un método interesante aquí. Tengo un método llamado notify. Y lo que hace esto, es enviar cada instantánea de estado a las herramientas de desarrollo cada vez que el estado cambia. Así que cada vez que el estado está cambiando, podemos realmente ver eso en vivo en nuestras propias herramientas de desarrollo. Así que llamo a esto emitir instantánea de estado. Te mostraré dónde funciona esto. Así que hay un puente de herramientas de desarrollo. Así que este es el corazón de esta aplicación, diría yo. Así que este es un tipo de puente que, ya sabes, debería funcionar solo en el entorno de desarrollo. Así que nunca olvides tenerlo solo dentro de tu entorno de desarrollo. Y para eventos de dominio, mira el proceso de pagos y todo. Así que lo que sucede es, justo antes, como, cada vez que esta llamada termina, te mostraré mi imagen instantánea de estado. Cada vez que esta llamada termina, llamamos a este evento completo con el lado. Una vez que obtenemos eso, esa es la duración que obtenemos la línea de tiempo.

Eso es todo. Y el censo todos los datos, hay solo una función un objeto, tu máquina de estados no sabe nada al respecto, sobre tu extensión de herramientas de desarrollo o no. Simplemente emite un evento en el puente y sigue adelante. {{^}}Eso es todo. Así que sí.

Y también tengo una función. Mi dominio, así que hay una función para emitir mis dominios también. Así que esto es como un bus de nuestra cosa, como nuestras herramientas de desarrollo. Así que tu código de dominio llama a la función emitir y este script de contenido llamado suscribirse. ¿Verdad? Sí, estará aquí. Suscribirse. Sí.

Este es básicamente este bus de mi aplicación. Nunca se hablan entre sí. El transporte es windows.thisPostMessage. Lo que hace esto, si la extensión de herramientas de desarrollo está abierta y escuchando, lo captura. Incluso si no está abierta, no pasa nada y no tiene costo para nosotros. Así que también va a ser eficiente. Y todo este puente, esto es, ya sabes, envuelto alrededor de este entorno para que tus usuarios nunca lo vean. Y te mostraré cómo yo. Bien.

Esto es lo que hay. Esta es una función que envía este mensaje estructurado a mi panel de DevTools. Hace una cosa. Escucha este window.PostMessage, captura mensajes de nuestro puente, y los reenvía a este mensaje de envío de tiempo actual para enrutarlo al panel. El panel, el panel. Esto es nuevamente una UI de código blanco. Esto simplemente captura cada estado y me da una cosa ordenada, ordenada y perfecta, perfecta. Así que esta es toda la arquitectura. Ahora vamos.

Así que si miras aquí, esto explica cómo funciona la arquitectura simple de nuestra aplicación. Así que tenemos nuestro pago de pedido, nuestras propias reglas personalizadas. Como nuestra propia máquina de estados y todo. Esto se emite a este puente de herramientas de desarrollo que es un bus de eventos ligero. Y que publica este mensaje a este panel de Chrome DevTools. Así que hay muchas cosas que puedes hacer alrededor de esto. Ahora veamos la implementación.

Así que lo primero que tienes que hacer, tienes que, ya sabes, desempaquetar esta extensión. Solo tienes que hacer clic, solo tienes que seleccionarlo. Como ya he hecho esto, no lo voy a hacer de nuevo. Y esto es lo que hay aquí. Esto es DevTools como la extensión oficial de React DevTools. Así que abrí mis DevTools. Así que estos son los componentes que muestra DevTools. Así que podemos ver cómo funcionan estos props, lo que es renderizado por todo lo que se muestra aquí, ¿verdad? Así que todo está para mí aquí. Sí. Y también tengo este profiler. Comenzaré a grabarlo. Y la parte mágica, tenemos nuestro propio inspector de dominio que construimos aquí en este React en este panel de Chrome DevTools. Así que voy a limpiar todo. Voy a empezar de nuevo.

Así que intentemos seleccionar un cliente. Lo añadiré a mí. Así que esto es lo que ves. Literalmente hay de todo, ¿verdad? Pero si miramos estos componentes, puedes ver el catálogo de productos, como los estados, como los componentes, los props que están entrando. Y solo eso podemos ver. Puedes profundizar en el árbol y ver los valores. Pero si hacemos esta pregunta, ¿es este pedido de alto riesgo? ¿En qué fase está este pedido? Si el pago falla, ¿por qué falla? No puede responder a ninguna de esas preguntas, no porque esté roto, sino porque nunca fue construido para responderlas. Correcto.

Correcto. Ahora veremos nuestra pestaña de inspector de dominio. Así que tenemos nuestras cosas aquí. Así que tenemos en qué estado, en qué fase estamos. Me muestra literalmente cada estado de esta cosa. El estado bruto del negocio, el contenido del carrito, los detalles del cliente, el estado del pago. Es como no filtrarse a través de un árbol de componentes. Esta es la parte que quería que notaras. Una herramienta de desarrollo estándar te muestra lo que hay en la tienda, pero nuestros paneles calculan todo y muestran estados derivados específicamente para depuración, como prácticamente todo está ahí. Correcto. Intentaré. Aplicar esto.

Procederé al pago. Ahora, veamos. Veamos este evento también. Mira, la cosa es que aquí está monitoreando cada evento con la marca de tiempo. Así que cuando algo va mal, puedes mirar fácilmente la marca de tiempo y puedes simplemente averiguarlo. Así que intentaré pagar. Mi pago es rechazado. Ahora eso también se está registrando aquí perfectamente. Fallo, razón, carrito rechazado, todo, literalmente todo está ahí.

Así que te lo diré. Cuando sabes que algún pago se realiza. Intentaremos con algunos usuarios diferentes ahora. Provocaré un error. Mira. Mi contexto de dominio en el momento del error, como cuando hubo un error, cómo se veía mi estado como. Falló en la configuración estándar de React, estarías buscando en las pestañas de red. Estarías intentando a través de la solicitud, leyendo la respuesta de la API en bruto, todo. Pero aquí. Aquí como. Incluso si miras el evento, puedes, ya sabes, simplemente poner los pagos o depurar cosas como todo se puede filtrar y verificar en tiempo real.

Así que esto. Esta cosa aquí está ahí. Así que esto es lo que prácticamente nuestras herramientas de desarrollo de React pueden hacer. Así que volveremos a la diapositiva. Así que tenemos nuestras herramientas de desarrollo en acción. Ahora la parte más importante, mantenerlo vivo. Honestamente, construir esto es realmente la parte fácil. Mantenerlo vivo es donde la mayoría de las herramientas internas están fallando. Así que hay algunas cosas que tenemos que tener en cuenta cuando estamos tomando esta herramienta, ya sabes, realmente usándola y manteniéndola viva.

La primera cosa es la distribución. No pongas estas cosas en tu Chrome web store y todo eso. No necesitas enviarlo. No necesitas tenerlo con las cosas. Solo compromete la carpeta de extensión a tu monorepo. Eso debería ser suficiente. Tus ingenieros pueden cargarlo. Puedes cargarlo como una extensión sin empaquetar y tu script de incorporación puede automatizarlo. Ese paso también. Todo eso está hecho para que cualquiera tenga sus propias herramientas de desarrollo, también puedan modificarlas y ya sabes, pueden mejorarlas aún más.

Y está la seguridad en producción. Esto no es negociable. Este puente no debe hacer nada en producción. Como este, tenemos que asegurarnos muy bien. Necesita estar perfectamente envuelto solo para el entorno de desarrollo para que no afecte a tus usuarios.

Y la tercera cosa más importante, debe haber propietarios claros para ello. Esto es lo que realmente determina si las herramientas duran o no. Así que como persona, cada vez que se añaden nuevos eventos de dominio al sistema, actualizar el panel es parte de los criterios de aceptación también. No va a ser una tarea de seguimiento. No va a ser un, lo haremos más tarde. Así que esto es algo que también debería ser no negociable.

Y muy importante, mantenerlo útil. Sigue revisándolo. Cada trimestre pasa al menos 30 minutos con un par de ingenieros que realmente lo usan. ¿Realmente te está ayudando? ¿Realmente está haciendo su trabajo? Si el panel está respondiendo a las preguntas que la gente realmente tiene, lo usarán. Si está respondiendo a preguntas que pensaste que tenías hace seis meses, solo acumulará polvo. Así que no habrá nada útil. Así que eso es lo que quería cubrir en esta charla.