Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones

Rate this content
Bookmark

¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.


Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).

44 min
30 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass presenta Replay, una herramienta para resolver errores más rápido al proporcionar contexto a través de las reproducciones de sesiones. Demuestra la importancia del contexto en la resolución de errores y muestra las características de la reproducción de sesiones, como ver HTML, registros de consola, solicitudes de red y enlaces a errores del backend. El masterclass también cubre el uso de DOM virtual y observador de mutaciones para cambios de página eficientes. Las preocupaciones de privacidad se abordan reemplazando la información sensible en las reproducciones, y se destaca el poder de la reproducción de sesiones para identificar y comprender la secuencia de errores.

Available in English

1. Introducción a Replay y Solución de Errores

Short description:

Esta charla es una introducción a una nueva herramienta llamada Replay. Es una herramienta enfocada en desarrolladores que te ayuda a resolver problemas más rápido. El problema son los errores, y el taller describirá qué es un replay y demostrará cómo funciona. Habrá una demostración en vivo y documentación disponible para configurarlo en tu sitio web. El ejemplo de error mostrado es un error real que es difícil de resolver sin herramientas adicionales. El seguimiento de la pila proporciona información valiosa sobre el error.

De todos modos, mi nombre es Ryan Albrecht. Trabajo en Century como ingeniero principal de front-end en nuestro producto de replay de sesiones. Y esta charla o taller trata sobre cómo resolver el 100% de tus errores y encontrar la causa raíz de tus problemas más rápido. Básicamente es una introducción. Pero si hay algo que aprendas hoy, es que hay una nueva herramienta disponible llamada Replay. Hay muchas empresas que hacen el mismo tipo de herramienta, pero la nuestra es una de las únicas que está enfocada en desarrolladores y que puedes agregar a tu caja de herramientas para resolver problemas más rápido. Esa es la esencia de la charla. Si obtienes algo de esto, es que esta herramienta existe y espero que la investigues más a fondo.

Lo que quiero hacer es contarte sobre ella y emocionarte. Así que vamos a hablar sobre el problema, que son simplemente los errores, y luego describir qué es un replay. Y luego quiero mostrarte cómo funciona en realidad. Habrá una demostración en vivo. No vamos a ver mucho código, pero como hubo una pregunta, quiero mostrarles la documentación. Así que la pondremos aquí. Si quieres configurar esto en tu sitio web, puedes ir a la documentación y hay enlaces en el discord, creo. Y todo lo que tienes que hacer es copiar y pegar este tipo de cosa. Así que este es probablemente el único código que necesitamos ver. Y el resto es simplemente usar la herramienta y obtener algún valor de ella. Así que la documentación está ahí, los enlaces están ahí, ustedes pueden hacer más preguntas después. Pero solo quiero mostrar esto para que tengan algo de contexto.

Ok, ¿cuál es el problema? El problema son los errores. Nunca resolverás todos tus errores, pero existen y tenemos que resolver los más importantes. Este es un error, es un error real que creo que resolví. Probablemente lo resolví. Pero al verlo tal como está, es bastante imposible hacer algo con esto. Podemos ver en la parte superior que dice S printf esperando un número pero encontró un arreglo. Esto es y esta es la única parte útil en esta página completa aquí. Es un seguimiento de pila de JavaScript minificado. Lo que significa que es una instantánea en el tiempo donde algo sucedió, algo inesperado sucedió. Y el JavaScript lanzó un error.

2. Introducción a la Solución de Errores

Short description:

Esto es lo básico de los errores en JavaScript. A menudo tenemos un seguimiento de pila, pero aún es difícil resolver el error. Esperamos un número pero encontramos un arreglo dentro del formateador de mensajes. Desconocemos el origen del arreglo o la experiencia del usuario. No es ideal.

Y esto es más o menos desde donde partimos cuando pensamos en los errores en JavaScript y en lo que necesitamos hacer para resolverlos. Esto es lo básico, y es prácticamente imposible. A veces decimos, está bien, tenemos un seguimiento de pila, ¿no sería genial si fuera un ticket? Alguien podría ingresarlo en nuestro JIRA o algo así. Si lo hacen, es posible que obtengamos un seguimiento de pila no ofuscado. Aquí hay uno que es un poco más legible. Podemos ver que hay archivos como error boundary.tsx y message formatter.tsx. Entonces, esto hace que el seguimiento de pila sea un poco más fácil de leer. Pero en realidad, sigue siendo muy, muy difícil resolver este error. Esperamos un número, encontramos un arreglo, y esto ocurre dentro del formateador de mensajes. Ocurrió una vez, de todos modos. Podría haber ocurrido muchas veces. No sé qué era el arreglo. No sé de dónde vino. Podría poner una declaración if allí y simplemente decir, si es un arreglo, deja de hacer lo que estás haciendo. Eso evitará que ocurra este error. Pero no sé cuál será la experiencia del usuario. No es ideal. Aquí es desde donde partimos.

3. Depuración con Sentry y Replay

Short description:

Esta es la historia de la depuración y la importancia del contexto en la solución de errores. Sentry proporciona un contexto valioso y ayuda a depurar problemas. Las trazas de pila son limitadas, pero ¿qué pasaría si pudiéramos ver una serie de errores a lo largo del tiempo? Aquí es donde entra en juego Replay, permitiéndonos comprender las acciones del usuario que conducen a un error y lo que sucede después de que se desencadena.

Y lo que estoy tratando de decir es que no es genial. Esta es la historia de la depuración, el juego clásico en el que eres el detective, la víctima y también el asesino o el homicida. Porque escribí este código y ahora estoy aquí pensando en lo que podría estar saliendo mal.

Aquí es donde entra Sentry. Un pequeño plug para Sentry. Sentry es genial porque no solo muestra lo que estábamos viendo, sino mucho más contexto para ayudarte a descubrir qué es este error y si es importante. Intenta ayudarte a resolverlo.

Aún tenemos el mismo mensaje. Esperando un número, pero encontró un arreglo. No es lo más importante. Pero Sentry ha revisado mi repositorio de GitHub y dice que probablemente sea este commit porque el commit parecía tocar esas líneas. Puede haber aparecido recientemente. Relacionado con cuando, como, recientemente, justo antes de la primera instancia de este error. Puedes ver aquí en los últimos 30 días, comenzó hace aproximadamente una semana o dos semanas. Se vio por primera vez hace 13 días. Todo este contexto, junto con la traza de pila, te ayuda a depurar estos problemas.

Entonces, si piensas en la progresión de la solución de errores, hemos pasado de esta terrible traza de pila que te proporciona básicamente una pieza de información sobre una instrucción que se ejecutó en un momento en el tiempo. Y hemos podido actualizar y mejorar eso y tener toda esta otra información adicional. Así que esto es bastante genial. Y en realidad, es muy útil y ayuda a resolver muchos errores. Pero, ¿qué pasa si tomamos esta única instantánea y pensamos, ok, ¿qué sigue? Las trazas de pila siguen siendo una instantánea en el tiempo. Este error ocurrió una vez. ¿No sería genial si pudiéramos ver un montón de errores a lo largo del tiempo? ¿Qué pasaría si pudiéramos ver, como, no solo que esto sucedió en este momento, sino qué lo llevó a eso? Como un video. Hay muchos pasos que el usuario tomó. Y sería bueno si pudiéramos saber cuáles fueron para poder reproducir este caso y luego ver el error suceder nosotros mismos. Porque no es suficiente solucionar el problema solo agregando esa declaración if. En realidad, deberíamos reproducirlo para comprender por qué sucedió, qué datos se ingresaron y tal vez haya una solución aguas arriba o una experiencia del usuario que podría ser mejor en general.

Entonces, esta es la segunda parte ahora. ¿Qué es un replay? Un replay no es solo un video como insinué, sino que es una forma de hacer depuración en viaje en el tiempo, una forma de pensar en el error en el contexto de lo que hizo el usuario antes de un error y qué sucedió después de que se desencadenó un error. Aquí está la página de replay de sesión en Sentry.

4. Funciones de Reproducción de Sesión

Short description:

Esta parte presenta cinco características geniales de la reproducción de sesión. Te permite depurar errores en tu sitio web mostrando el HTML y los registros de la consola. También puedes ver las solicitudes y respuestas de la red, buscar reproducciones basadas en nodos del DOM y vincular errores del backend al frontend. La reproducción de sesión es una grabación del DOM HTML y funciona de manera similar a las implementaciones de virtual DOM.

Hay muchos otros productos como este y todos tienen las mismas partes fundamentales. Este es uno con el que estoy muy familiarizado porque tuve la oportunidad de trabajar en él. Lo vamos a ver en vivo, pero antes de hacerlo, quiero mostrar cinco características increíblemente geniales y señalar algunas cosas aquí. Así que aquí hay un reproductor de video. Pero no es solo un video como el que puedes ver en YouTube, este es el DOM real de tu sitio web. Entonces, la reproducción de sesión te ayuda a depurar errores que ocurren en tu sitio web mostrándote el HTML y permitiéndote inspeccionar y básicamente mirar por encima del hombro de tus clientes que tienen problemas. Tienes acceso a los registros completos de la consola. Entonces, si estuvieras depurando algo en tu computadora, abrirías el inspector y verías tu propia consola y tal vez te darías algunas pistas de depuración. Cuando se trata de una computadora remota, no puedes hacer eso a menos que tengas algo como la reproducción de sesión capturando esos mensajes del DOM y mostrándolos aquí. Entonces podemos ver que en esta aplicación de muestra, hay muchos registros de la consola, algunos errores de tipo que probablemente necesitemos depurar, y algunos mensajes de error como no se pueden leer propiedades de indefinido que tal vez hayamos agregado nosotros mismos. Solicitudes y respuestas de la red. Esta es una característica muy genial donde puedes ver, nuevamente, al igual que en las herramientas de desarrollo, lo que estaba sucediendo en la red. Entonces podemos ver que hubo una solicitud GET o varias solicitudes GET que todas devolvieron eso es genial. Y esta fue una solicitud fetch, y aquí podemos ver cuáles fueron los resultados. Entonces, en esta aplicación, que es mi aplicación de Pokémon, que veremos en un momento, parece que está cargando todos los Pokémon aquí, 1,200 de ellos. Y todo funciona muy bien. Las reproducciones son geniales, y encontrar errores y solucionarlos es genial, pero también es posible que desees encontrar reproducciones interesantes basadas en lo que el usuario estaba haciendo. Entonces, tenemos una característica genial que nos permite buscar reproducciones basadas en los nodos del DOM que se hicieron clic. Puedes buscar nodos del DOM según las etiquetas que tienen, las clases, los IDs, cualquiera de estos, creo, nueve selectores. Y eso es una forma fácil de acercarse y decir, ok, tenemos algunas reproducciones, tenemos algunos usuarios realizando algunas acciones, quiero saber quién está abriendo este modal? ¿Quién está haciendo clic en guardar? ¿Quién está haciendo clic en comprar ahora? Y cuáles son los errores o qué comportamientos están teniendo las personas en torno a esas características? Y finalmente, lo último es que la reproducción de sesión, aunque es una característica enfocada en la interfaz de usuario, grabando ese DOM, también puede vincular errores y transacciones del backend. Entonces, estas son cosas que pueden ocurrir en tu servidor de Python, y se pueden vincular al frontend. Y así puedes ver, hey, mi consulta a la base de datos tuvo un problema y eso devolvió un 500. ¿Qué vio el usuario cuando apareció ese 500? ¿Se manejó correctamente o simplemente mató la página? Estas son algunas de las características que tenemos para la reproducción de sesión. Y lo que quiero hablar a continuación es cómo funciona internamente. Entonces, la reproducción de sesión no es solo un video, en realidad es una grabación del DOM HTML en tu sitio web. Y cuando las personas encuentran un error, podemos usar esa grabación para decir, para mostrarte esto es lo que el usuario estaba viendo en el sitio web, esto es lo que se hizo clic y aquí es cuando ocurrió el error. Y si estás familiarizado con palabras clave como virtual DOM, o como React ha sido muy popular con su uso de virtual DOM y muchos otros frameworks, la implementación de esto es bastante similar. Lo que hacemos es si tenemos una página HTML como esta que se está cargando, ahora hay solo el div principal y h1 y un párrafo. Lo que podemos hacer es serializar toda esta página en JSON cuando se carga la página y cuando se carga el SDK de reproducción. Y así, todo este JSON cuando intentamos hacerlo por primera vez, pensamos que esto sería realmente costoso y muy malo.

5. Uso de Virtual DOM y Mutation Observer

Short description:

La magia de esto ocurre cuando la página cambia, todo lo que tenemos que hacer es crear un nuevo JSON para el nuevo contenido HTML utilizando el virtual DOM y el algoritmo de diferenciación. Podemos reproducirlo como una serie de commits con el JSON inicial y las mutaciones aplicadas sobre él. Esto se hace con el ampliamente compatible mutation observer, que es realmente eficiente.

Pero resulta que en realidad no es tanto contenido. Esto está ligeramente simplificado. Faltan cosas como estilos y cosas así. Pero realmente no es mucho data. Y luego, la magia de esto ocurre cuando la página cambia, cuando algo más se carga en la página o tal vez el usuario hace clic en un menú, o tienes una aplicación de una sola página y muchas cosas se vuelven a renderizar. Cualquier cosa que provoque que algo nuevo se agregue a la página como esto, todo lo que tenemos que hacer es utilizar ese virtual DOM y el algoritmo de diferenciación para crear un nuevo JSON para el nuevo contenido HTML. Y podemos usar los IDs de los padres y todos los IDs que tenemos dentro de nuestra implementación del virtual DOM para simplemente tener los nodos nuevos, ya sea insertados o eliminados, guardados en nuestra lista. Y luego podemos reproducirlo como si fuera una serie de commits donde tenemos nuestro JSON inicial y luego todas estas mutaciones aplicadas sobre él. Todo esto se hace con el mutation observer, que es ampliamente compatible en todo tipo de navegadores. Y resulta que es realmente, realmente eficiente. Tal vez incluso más eficiente porque podemos presionarlo en el frontend.

6. Demo en vivo de la aplicación Pokemon

Short description:

Esta es una masterclass donde se realizarán demostraciones en vivo. La aplicación Pokemon se utilizará como base para la demostración. Es muy popular y tiene una lista de Pokemon, la capacidad de ver sus datos y atraparlos. La aplicación también incluye una función de búsqueda. Pikachu es uno de los Pokemon populares que se pueden atrapar.

Así que esa es una descripción rápida de algunas de las cosas que quiero mostrar. Pero esta es una masterclass, así que vamos a hacer demostraciones en vivo. Creo que es mucho más divertido. Si hay alguna pregunta, pueden hacerla ahora o en cualquier momento. Pero primero, voy a mostrarles, si no hay ninguna, voy a mostrarles mi aplicación Pokemon , que será en lo que basaremos la demostración.

Vamos a recargar esta página aquí. Así es mi aplicación Pokemon. Es muy popular, como probablemente esperen. Pokemon es lo más popular en el mundo en este momento. La aplicación es bastante básica en este momento, pero se está volviendo cada vez más complicada cada día. Algunas de las características que tiene son, obviamente, hay una lista de Pokemon aquí, que es lo que estamos viendo. Así que puedes desplazarte y cargar más y encontrar tus Pokemon favoritos. Cuando haces clic en uno, probemos con este Sandshrew. Puedes ver todos sus data. Tiene algunos movimientos aquí, diferentes ángulos, mucha diversión. Y luego, por supuesto, atraparlo. La razón principal por la que estamos aquí, atraparlos a todos. Por supuesto, es un éxito. Lo he configurado para que sea aproximadamente un 90%. Así que este es el Pokemon número siete. ¿Qué es? Es el Shrewd Shrew. Suficiente. Una vez que atrapamos un Pokemon, podemos ir a nuestra lista de Pokemon y ver todas las cosas que hemos atrapado. Esto es básicamente lo básico de la aplicación. También tenemos una función de búsqueda. Así que podemos ver aquí, Pikachu, muy popular. Así que lo buscamos, lo cargamos, también podemos atrapar a Pikachu. Esperemos que funcione. He estado practicando mi brazo lanzador. Sí.

7. Reproducción de sesión y privacidad

Short description:

Con la reproducción de sesión, puedes ver repeticiones en tiempo real de las interacciones de los usuarios en tu sitio web, al tiempo que garantizas la privacidad al reemplazar la información sensible con estrellas. La reproducción de sesión es una herramienta valiosa para comprender el comportamiento del usuario y solucionar errores. Proporciona una representación visual de lo que los usuarios ven en la pantalla y ayuda a identificar problemas.

Así que este tipo debería ser Detective Pikachu. Y mientras navego por el sitio con la reproducción de sesión habilitada, lo que puedo hacer es ver las repeticiones de todos los usuarios mientras ocurren. Entonces, si cambio aquí a mi instancia de Sentry, voy al lugar correcto. Podemos ver aquí la repetición que acabo de iniciar hace dos minutos de mí mismo atrapando un montón de Pokemon. Y lo primero que notas es que todo está censurado. Esta es una función de privacidad porque muchos sitios web pueden tener información personal identificable, muy importante en Europa y en todo el mundo. No queremos tener esa información. No queremos saber cuáles son los números de tarjeta de crédito de las personas, cuáles son sus correos electrónicos, cuáles son sus direcciones, nada de eso. Por defecto, Sentry tiene una postura de privacidad en primer lugar, y reemplazamos todo el texto. Todo el texto con estrellas. Pero sigamos observando aquí. Así que recuerda, comenzamos viendo la página, la página de la lista. Ahí vamos. Y ahora puedes ver al usuario desplazándose por la página. Hace un minuto, era yo mirando más Pokemon y luego navegando a nuestro Santry y atrapándolo. Por razones de privacidad, las imágenes, todo está bloqueado. Pero damos controles para volver a mostrarlos. Aquí se capturó a Santry. Se está escribiendo el nombre. Con todos mis errores de ortografía. Ahí vamos. Y así sucesivamente. Esta es la esencia de una reproducción de sesión. Si no te llevas nada más de esta charla, de esta masterclass, la reproducción de sesión está aquí. Es una herramienta que pueden usar. Puedes ver lo que realmente está sucediendo en la pantalla cuando los usuarios usan tu sitio. Cuando hay errores, úsala para debug.

Entonces, ¿cómo debug cosas? Bueno, tenemos el HTML aquí, como mencioné. Y te mostraré que este es el verdadero HTML de la página web real que estaba viendo. Así que hay una tabla que puedes ver en el fondo aquí.

8. Depuración del lado del cliente y reproducciones de sesión

Short description:

Todo se realiza en el lado del cliente, con HTML y CSS reales. La consola es una excelente función para depurar y tomar notas. La pestaña de red nos permite profundizar en las respuestas. Intentemos encontrar un error en nuestra aplicación buscando a Pikachu. Las reproducciones de sesión deben estar habilitadas con la integración de Sentry.

Todo se ha iniciado en el lado del cliente, por lo que aquí no se guarda nada en el servidor. ¿Y dónde están nuestros apodos? Estoy buscando la imagen. Todo está aquí, la segunda columna, todos los movimientos. Es todo HTML real con CSS real adjunto. Entonces, si eliminamos los rellenos, el sitio realmente cambia.

La consola también está aquí, por lo que es una excelente función para depurar lo que está sucediendo. Puedes dejarte notas a ti mismo. Así que aquí puedo ver que se hizo un lanzamiento, se generó un valor aleatorio, que es lo suficientemente bueno para ser una captura. Y luego se guardó el nuevo Pokémon.

También tenemos la pestaña de red, que mencioné anteriormente. Entonces, aquí, al principio de nuestra reproducción, podemos ver que se cargaron todos los Pokémon. Así que esto es igual que en la captura de pantalla, pero puedo profundizar y ver exactamente lo que se devolvió en esta respuesta. Entonces, esta reproducción no tiene errores. Por lo tanto, no hay realmente nada que nos interese y nada que podamos hacer.

Entonces, lo que podemos hacer en realidad es retroceder y ver si podemos encontrar un error o provocar un error en nuestra aplicación, y resulta que conozco uno. Así que busquemos a Pikachu nuevamente, pero esta vez lo escribiremos mal. Entonces, notarás en la URL que busqué a Pikachu y obtuve algo y ya atrapé a un Pikachu. Entonces, si intento atraparlo nuevamente, todo parece que funcionará bien. Oh, falló. Intentemos. Tengo una pregunta aquí en el chat. ¿Las reproducciones de sesión se agregan con la configuración predeterminada de Sentry o hay algo que necesito habilitar? Entonces, debe estar habilitado. Pero es parte de lo que puedes habilitar con cualquier plan de Sentry que tengas. Si tengo la documentación nuevamente. Entonces, para habilitarlo, debes agregar la integración de reproducción de sesión. Así que está aquí abajo, lo predeterminado. Si ya tienes configurado Sentry para errores, ya comenzarías con este tipo de cosas, solo la llamada Sentry dot init. Por lo tanto, habilitar la reproducción requiere esta nueva integración y estas son solo configuraciones de muestra, no tienes que configurar nada más si no quieres.

9. Evaluación y Distribución de Recursos

Short description:

Si utilizamos alojamiento propio, debemos evaluar la cantidad de recursos que el servidor de Sentry capturará, cuánto más espacio en memoria y disco debemos esperar necesitar si utilizamos una función. En cuanto a la memoria, es muy eficiente en el servidor, porque simplemente estamos ingiriendo todos los datos y guardándolos en disco casi de inmediato. Las reproducciones pueden ser pequeñas, pero depende de las tasas de muestra y el tipo de sitio que tengas. Las reproducciones se distribuyen alrededor del mundo en nuestros puntos de presencia de distribución, lo que garantiza una latencia más baja entre tus clientes y nuestro sistema.

Oh, y Discord. También lo veo. Si utilizamos alojamiento propio, debemos evaluar la cantidad de recursos que el servidor de Sentry capturará, cuánto más espacio en memoria y disco debemos esperar necesitar si utilizamos una función. Entonces, la memoria y el espacio en disco, el espacio en disco depende de tus políticas de retención y de la carga que generes. Pero hemos descubierto que para nuestros propios usos, cada reproducción es bastante pequeña. Creo que algunos de nuestros promedios P75 están en el rango de un solo megabyte para el tamaño de la reproducción en sí. La reproducción puede durar hasta una hora. Y hemos visto casos excepcionales en los que hay un sitio web muy complicado y las personas lo usan durante horas y horas, y ocupa más de un par de megabytes. Pero depende de las tasas de muestra y el tipo de sitio que tengas, eso seguro. En cuanto a la memoria, es muy eficiente en el servidor, porque simplemente estamos ingiriendo todos los data y guardándolos en disco casi de inmediato. Otra pregunta relacionada. La documentación dice que esta función utiliza un sistema distribuido para enviar las reproducciones. Pero puede que no sea el caso con la solución de alojamiento propio. Sí, no sé exactamente a qué parte de la documentación se refiere. Pero está distribuido en el sentido de que... ¿Qué podría estar distribuido? Cualquier usuario en tu sitio web que abra el navegador enviará los data directamente a Sentry, y pasarán por diferentes puntos de presencia que tenemos en todo el mundo. Así que tal vez eso sea la parte distribuida. Pero luego todo se canaliza y se guarda de forma asíncrona en la database. Si hay algún bloqueo de privacidad. Si hay algún problema con el SDK, no romperá tu sitio web, debería desactivarse automáticamente. Al igual que con el SDK base. Aquí tenemos performance overhead. Gracias por eso. ¿Qué está distribuido aquí? Oh sí, por supuesto, se envía alrededor del mundo a nuestros puntos de presencia de distribución. Estos son... Básicamente, son servidores que están distribuidos en todo el mundo y son entradas a nuestra red interna. De esta manera, tienes una latencia más baja entre tus clientes y nuestro sistema. Espero que eso responda la pregunta.

De acuerdo, volvamos a la demo de Pokémon. Así que hemos guardado el Pokémon.

10. Depuración de Pantalla en Blanco y Errores

Short description:

Hay un problema con una pantalla en blanco de la muerte. Hemos provocado un error, no se pueden leer propiedades de indefinido. Podemos ver el error en la consola y en las reproducciones. El componente de línea de tiempo nos ayuda a saltar a los errores y ver qué había en la página cuando ocurrieron.

Todo parece estar bien. Ahora, si volvemos a mi lista, hay un problema. Esta es una pantalla en blanco, una pantalla en blanco de la muerte. Si miramos aquí en el inspector, hemos provocado un error, no se pueden leer propiedades de indefinido, esto es terrible, no se pueden leer propiedades, leyendo mapas, leyendo longitud. Algo más aquí, front default.

Entonces, como estoy haciendo esto en mi propia máquina, puedo ver aquí en la consola qué está sucediendo y tener una pequeña pista. Pero si esto estuviera sucediendo en la máquina de un cliente, no podrías ver estos mensajes de consola. Vamos a nuestras reproducciones, cerramos eso y veamos si hemos capturado este error. Y de hecho lo hemos hecho. Así que el error más reciente aquí comenzó hace 10 minutos, es una reproducción de nueve minutos de duración, lo cual tiene mucho sentido. Y hay tres errores dentro de ella. Así que ahora, cuando cargamos la página. Tenemos algunos errores para debug aquí. Y así, podemos ver en la parte superior derecha que hay tres errores, y todos son errores de react, en este caso. Entonces, si estoy buscando estos errores, una excelente manera de hacerlo es comenzar desde arriba y usar el componente de línea de tiempo. Esta es una de mis formas favoritas de tener una visión general de lo que hay en esta reproducción. Y así podemos ver al comienzo de la reproducción que estaba hablando y haciendo clic, hay alrededor de un minuto y medio, un minuto y 45 segundos de diferentes eventos de clic, y me dice en qué se hizo clic, y los puntos verdes aquí son navegaciones. Y luego, después de que terminé de hablar, provocamos algunos errores. Y así podemos usar esta línea de tiempo y estos errores aquí para, o usar una línea de tiempo para saltar directamente a estos errores y ver a los cinco minutos y 25 segundos. Y podemos ver qué había en la página. Cuando ocurrió este error. Y aquí está, aquí está el primer error. En la parte inferior de las migas de pan, podemos ver nuevamente no se pueden leer propiedades de indefinido, leyendo front default. Así que ese fue el primero en nuestros registros de consola. Es el primero en nuestra consola en el lado derecho aquí. Y así es como tenemos que debug. Y también vemos en la línea de tiempo que hubo otros errores, no se pueden leer propiedades de indefinido, leyendo mapas. Así que podemos saltar allí al error similar pero no exactamente el mismo. Y esto está sucediendo donde ha aparecido el modelo de atrapar Pokémon.

11. Depuración de Errores y Preocupaciones de Privacidad

Short description:

Podemos depurar el error de leer propiedades de indefinido explorando el código y buscando declaraciones como 'undefined.someVariable.map'. El orden en el que ocurren los errores puede proporcionar pistas para la depuración. En cuanto a las preocupaciones de privacidad, las respuestas de las llamadas de red se muestran en esta demostración, pero la información sensible como contraseñas y números de tarjeta de crédito se filtra. Se pueden establecer filtros personalizados para capturar u ocultar datos específicos. Con Sentry, podemos ver el problema en sí y usar replace para acotar el proceso de depuración.

Entonces, ¿cómo podríamos abordar la depuración de esto? Bueno, sabemos que estamos leyendo propiedades de indefinido. Probablemente sea una declaración como undefined punto donde probablemente sea una declaración como algunaVariable punto map, y la variable es indefinida. Así que no podemos acceder a una propiedad map en este indefinido. Es el mismo problema que nuestro front default. Pero front default ocurrió primero. Así que esta es una gran pista cuando vamos a depurar estos errores. Si exploramos un poco más. Oh, otra pregunta. Aunque los valores en el DOM están ocultos por preocupaciones de privacidad, las respuestas de las llamadas de red se muestran. ¿No sería una violación de la privacidad si estamos seguros de que recibimos llamadas que devuelven datos sobre un usuario después de iniciar sesión, por ejemplo?

Sí. Así que para este ejemplo en esta demostración, he desactivado parte de la privacidad que hacemos para las solicitudes y respuestas, y la data de solicitud y respuesta en sí es una función opcional. Así que hay un pequeño mensaje aquí que puedes capturar más encabezados. Pero no estamos hablando de encabezados, estamos hablando de los propios cuerpos. Así que si volvemos a la documentación, puedo mostrarte un poco. Así que la configuración. Permitir detalles de red es completamente opcional, por lo que puedes elegir qué URL permitir. En mi demostración, las he agregado todas. Pero sin importar lo que permitas, todos los cuerpos pasarán por nuestro proceso regular de eliminación de información personal identificable (PII, por sus siglas en inglés). Por lo tanto, si tienes campos llamados contraseña, número de Seguridad Social o número de tarjeta de crédito, o cualquier otra cosa similar, todas esas palabras clave se filtrarán y eso no es opcional. Por lo tanto, la captura de cuerpos de red es opcional. Y esos serán filtrados. En nuestro caso, los nombres de los Pokémon y cosas así no serán filtrados porque no son exactamente sensibles. Y también puedes establecer filtros personalizados para este tipo de cosas, que es el mismo sistema que tenemos para la ingestión normal de datos. Por lo tanto, la configuración para eso está aquí, permitiendo URL, capturando cuerpos y también capturando encabezados de solicitud y encabezados de respuesta. A veces, estos pueden ser sensibles, pero a veces es posible que desees rastrear encabezados de seguimiento distribuido o encabezados relacionados con diferentes proxies y cosas así, por lo que todo esto es opcional, de una manera consciente de la privacidad. ¿Dónde está mi página? De acuerdo, volviendo, vamos a depurar algunos errores y usar replace para ayudarnos a acotarlos. Así que tenemos nuestras propiedades de error de indefinido front default. Una cosa que podemos hacer, que siempre hemos podido hacer con Sentry, es ver el propio problema.

12. Comprendiendo la Reproducción de Sesiones y la Depuración de Errores

Short description:

Podemos ver el propio problema y toda la útil depuración de errores que siempre hemos tenido. La gran diferencia entre la reproducción de sesiones y los problemas que hemos depurado en el pasado es que las migas de pan ahora muestran lo que sucede antes y después del problema. Al reproducir la sesión desde el error en adelante, puedo ver el error de pantalla en blanco.

Ups. Creo que el zoom no está ayudando aquí. De acuerdo. Podemos ver el propio problema y toda la útil depuración de errores que siempre hemos tenido. Esto solo ha ocurrido dos veces en los últimos días, porque lo estoy haciendo ahora. Tenemos nuestra traza de pila aquí y sé que eso no será útil en este caso. Y las migas de pan que hemos tenido antes. Así que en este caso, la gran diferencia entre la reproducción de sesiones y los problemas que hemos podido debug en el pasado es que las migas de pan del pasado solo nos mostraban lo que sucedía antes de que ocurriera el problema. Por lo tanto, podemos ver aquí que se realizaron varios clics y se imprimieron algunos mensajes en la consola, retrocediendo aún más en el tiempo. Hubo una llamada fetch con el código 404, por lo que eso destaca. Sabemos que eso ocurrió porque intencionalmente escribí mal el nombre del Pokémon. Pero toda esta información solo nos lleva al error. Cuando miramos la reproducción en sí. Podemos obtener un poco más de información. Así que volvamos allí. O veamos el segundo error. Porque generalmente cuando ocurre un error, puede ocurrir un segundo error o más errores después. Por lo tanto, la reproducción, además de las migas de pan que teníamos antes, también nos muestra lo que sucede a continuación. Y solo al reproducirlo desde ese error en adelante, puedo ver que ha ocurrido el error de pantalla en blanco. Y este es un error grave que debemos solucionar.

13. Usando Eventos del DOM y Solicitudes de Red

Short description:

La pestaña de eventos del DOM es una herramienta útil para reproducir errores siguiendo los clics del usuario. Nos permite ver dónde en la página hizo clic el usuario, incluso con la privacidad habilitada. La pestaña de problemas proporciona información sobre el uso de memoria y rastros de solicitudes de API y bases de datos. Ahora, resolvamos el error. El error involucra un valor no definido e intentos de leer propiedades como front defaults, map y length. Podemos utilizar las solicitudes y respuestas de red para encontrar pistas, como un error 404 sin cuerpo de respuesta.

¿Qué otras herramientas tenemos aquí? Tenemos una pestaña de eventos del DOM. Esta es una herramienta maravillosa para descubrir, de un vistazo, en lugar de buscar en las migas de pan, qué ha hecho clic el usuario y en qué orden. Entonces, si estoy tratando de reproducir un error aquí, puedo usar los eventos del DOM para seguir al usuario y todos los clics que ha realizado. En este caso, se ha eliminado gran parte de la información. Pero si hacemos clic en uno de estos eventos del DOM y lo resaltamos, podemos ver dónde en la página hizo clic el usuario. Incluso con la privacidad habilitada, podemos saber que el usuario hizo clic aquí y en algún encabezado o en la etiqueta body. Hizo clic aquí en un elemento de navegación y, como el elemento de navegación es estático, puedo adivinar qué decía. Pero al pasar el cursor sobre esto y llegar a ese momento en el tiempo. Puedo ver dónde en la página se encuentra esto y si estoy siguiendo en mi propio navegador, puedo hacer clic para seguir lo que hizo el usuario y reproducir este error.

Ya hemos visto la pestaña de problemas. La memoria no será tan útil en este caso, pero de vez en cuando descubro que si tienes una aplicación de una sola página de larga duración, la memoria y una fuga de memoria están ocurriendo. Voy a mostrarte y podría ser la causa de esa carga de página que se bloqueó sin motivo. Es porque se agotó la memoria. Finalmente, el rastreo, así que no tengo ningún rastro en esta demostración. Pero si controlara el backend, podríamos ver todas las solicitudes de API y las solicitudes de bases de datos que se realizaron después, pero como hoy estoy usando solo una API genérica de Pokémon. No hay nada aquí. Así que es una pequeña descripción general de los errores y cosas. Ahora tenemos que resolver este error. Así que hemos hablado o mencionado que el error es un valor no definido. Estamos tratando de leer una propiedad. Está ocurriendo más de una vez, así que aquí estamos tratando de leer una propiedad llamada front defaults. Más adelante, estamos tratando de leer map y estamos tratando de leer length. Entonces, vamos a entrar en la primera propiedad. ¿Cuál fue la razón aquí? Tenemos algunas pistas. Sabemos que Pikachu es un nombre escrito incorrectamente. Si vamos a nuestras solicitudes y respuestas de red aquí, podemos desplazarnos y encontrar este punto en el tiempo en la tabla de red. Aquí hay aproximadamente cinco minutos y medio. Y podemos ver que hubo un error 404, así que esta es una buena pista de que algo salió mal. Y al hacer clic en él, no hay cuerpo de respuesta.

14. Comprendiendo el Poder de la Reproducción de Sesiones

Short description:

La solicitud del conjunto de datos de Pikachu resultó en un error no definido. La reproducción reveló que este error desencadenó otros tres errores relacionados en la página. La reproducción proporcionó contexto para comprender que algo más se rompió primero, causando errores posteriores. Las reproducciones de sesión son poderosas para identificar y comprender la secuencia de errores. El error de red fue fácil de encontrar, pero los errores relacionados habrían sido difíciles de descubrir sin la reproducción. Esto demuestra el poder de la reproducción de sesiones en la depuración. Si hay más preguntas, estaré encantado de responderlas.

La solicitud fue para ese conjunto de datos de Pikachu, y no se recibió nada. Por lo tanto, esta es una muy buena razón por la cual se ingresaría un valor no definido en nuestro sistema. Y sí, podríamos haberlo visto al mirar hacia atrás en nuestro problema. Encuentra nuestro problema aquí. Pero el verdadero valor de la reproducción es ver que no solo se produjo este error desencadenado. Pero desencadenó otros tres errores en la página. Por lo tanto, estos errores están relacionados, porque una vez que tuvimos ese valor no definido en la página. Los dos errores siguientes estaban destinados a ocurrir solo haciendo clic. Y fue realmente extraño que este error. Cuando sucedió, cuando estaba mirando recién. Nada parece estar roto en la página, encontramos alguna especie de Pikachu. Vimos la imagen y pude atraparlo. E incluso podemos ver en la reproducción que el usuario pudo atraparlo. Cuando hablamos de resolver problemas, no siempre es suficiente decir, `De acuerdo, hubo un 404, agreguemos nuestra declaración if y hagamos algo para que esté bien`. A veces, los errores, los segundos y terceros aquí son debido a ese paso anterior, donde no siempre sabemos que está relacionado.

Y así, si comenzáramos a partir de este primer error, este secundario aquí en la página. Es posible que no tengamos ningún contexto y pensáramos, `De acuerdo, algo está indefinido. Estamos haciendo una operación de captura, ¿cómo podría ser indefinido el Pokémon si estamos tratando de atraparlo, como, está aquí, la página está aquí`, pero con el contexto de una reproducción. Podemos decir, `Oh, algo más se rompió primero`. Y luego eso es lo que causó el segundo error, que es muy similar al primero, e incluso el tercer error, que ocurrió en una página completamente diferente. Así que este es el poder de las reproducciones de sesión.

Tenemos nuestro error de red aquí, que es prácticamente una prueba irrefutable en este caso. Y fue fácil de encontrar para el primer error, incluso cuando estábamos mirando en nuestra página de detalles de problemas, pero para los otros errores relacionados. Habría sido casi imposible encontrarlos. Y sí, este es el poder de la herramienta de reproducción de sesiones. Y si hay más preguntas, estaré encantado de responderlas. Pero sí, creo que eso es prácticamente todo. Si quieren hablar al respecto, estoy dispuesto a hacerlo. Conscientes del rendimiento del dispositivo cliente.

15. Configuración de Reproducciones e Impacto en el Rendimiento

Short description:

Esto trata sobre la configuración de reproducciones y el impacto en el rendimiento de tener una reproducción en la página. Hay dos formas de configurar una reproducción: tasa de muestreo de sesión y tasa de muestreo de error. La tasa de muestreo de sesión establece un porcentaje para cuando la reproducción comienza al cargar la página. La tasa de muestreo de error registra la página sin enviar datos y comienza a grabar cuando se produce un error. Ambos métodos proporcionan contexto antes y después del error. El rendimiento depende del sitio web, pero la compresión en el teléfono ayuda a reducir la carga. La compresión se realiza en un trabajador web para mantener el rendimiento de la página web.

Específicamente, ¿cómo sabe Sentry si debe grabar una reproducción o no? No queremos cargar los teléfonos sin motivo, incluso si no hay errores. Esta es una buena pregunta. Entonces, esto se trata de configurar reproducciones y el impacto en el rendimiento de tener una reproducción en la página. Si volvemos a la configuración aquí, hay dos formas de configurar una reproducción.

Una de ellas, creo que es la forma predeterminada en la que la gente piensa en ello, y se llama tasa de muestreo de sesión. Y cuando configuras una tasa de muestreo de sesión, básicamente estás estableciendo un porcentaje para determinar si la reproducción comenzará cuando se cargue la página. Y eso es lo que configuré en la demostración. De esa manera, pudimos ver al usuario cargando la página, todas las cosas que hacen, si ocurre un error o no.

La otra forma de configurar una reproducción de sesión es tener habilitada la tasa de muestreo de error. Lo que hace esto es comenzar a grabar la página pero no envía ningún dato. Mantiene un búfer de toda la actividad que el usuario estaba realizando, y cuando ocurre un error o si ocurre un error, porque no está garantizado. Pero cuando aparece un error, tomará ese búfer, que es aproximadamente un minuto de dato, y comenzará a guardarlo y a grabar la sesión a partir de ese punto. Entonces, si estás haciendo clic durante 20 minutos, vamos a tener un búfer que es solo un minuto en promedio de dato. Si ocurre el error, vamos a activar la reproducción y así capturaremos y rastrearemos ese primer error y todos los demás errores posteriores. Así obtienes un poco de contexto antes del primer error y luego definitivamente puedes ver qué sucede después del error. Y luego, si hay un segundo error o tercer error, y así sucesivamente.

En cuanto al rendimiento. Ambos métodos lo son. Depende del sitio web, diría yo, pero hemos notado en el sitio web de Sentry y en muchos de nuestros clientes que la carga no es tan mala. Especialmente no es tan malo si tienes una aplicación de escritorio para teléfonos móviles. Va a depender un poco más de dónde se encuentre tu mercado objetivo, porque tendrás que pensar en la memoria, la CPU y también la carga. Pero algunas de las cosas que hacemos para mitigar estos problemas son comprimir los datos en el teléfono para que la carga sea mucho más ligera. Esto ahorra los planes de teléfono de las personas, y la carga también suele ser mucho más lenta que la descarga. Así que la compresión en el teléfono. Realmente, realmente ahorra mucho espacio.

16. Configuración de rendimiento y paquete

Short description:

Y así, la compresión y el trabajo del SDK a menudo ocurren mientras los usuarios están leyendo, no interactuando. El rendimiento es una preocupación, pero hay una pequeña sobrecarga. Replay está incluido en el paquete Sentry/browser, y la eliminación de árboles lo elimina si no se utiliza. Diferentes paquetes de CDN ofrecen varios paquetes, incluido el paquete principal del navegador, la integración de reproducción y la integración de seguimiento. También hay una nueva configuración automática llamada el cargador.

Hacemos compresión para mantener el rendimiento de tu página web. Hacemos esa compresión en un trabajador web. Y así, eso sucede fuera del hilo principal y no afecta la representación de tu página. Además, para muchos sitios web que funcionan como Sentry o creo que como muchos sitios web en la página, o en Internet que no son juegos. Porque el DOM está cambiando después en respuesta a una acción del usuario y luego tal vez una respuesta de red. Por lo general, lo que veremos es que habrá alguna interacción del usuario como un desplazamiento, o hacer clic en un modal o una X como acabo de hacer. Y luego no sucede nada en la página. Y así, he notado, y con nuestros clientes también, que muchas veces, la compresión y el trabajo del SDK ocurren mientras los usuarios están leyendo algo, no mientras se interactúa con la página. Para juegos y cosas donde hay como tal vez mucho confeti en la página, muchas cosas se mueven, podría ser un poco peor. Y esas son cosas que puedes desactivar el seguimiento porque en realidad no son contenido. Otra pregunta en Discord. Aunque los valores en el DOM están ocultos por privacidad, ya lo he leído. Sí, el rendimiento es una gran preocupación para nosotros. No queremos que sea lento en las páginas de las personas porque entonces simplemente lo desactivarán. Debe ser útil y no tener un impacto, pero como cualquier solución de monitoreo o solución de perfilado, hay una pequeña sobrecarga. Incluyendo los bytes de JavaScript que tienes que descargar. Así que vamos a volver a las diapositivas, porque hay un par más. Oh, hay una pregunta. Replay está incluido en el paquete Sentry/browser. Entonces, incluso si no usamos la reproducción, estará incluido en mis fuentes. Um, así que hay algunas formas diferentes de incluir el paquete del navegador Sentry. Si estás usando NPM y un sistema de compilación, y no usas la integración de reproducción, es muy probable que se elimine del paquete. Entonces, la eliminación de árboles funcionará para el paquete Sentry. Sí, la eliminación de árboles. Pero si estás usando CDN, o si estás usando otras formas de instalarlo. No realmente. Pero en el CDN hay diferentes versiones de los paquetes de CDN, así que querrás asegurarte de que estás usando la versión correcta del paquete de CDN que tiene los paquetes que deseas. Las cosas a tener en cuenta son el paquete principal del navegador. Hay la integración de reproducción y también la integración de seguimiento. Entonces puedes elegir qué combinación de esos quieres. También tenemos una nueva configuración. Es mucho más automática, se llama nuestro cargador.

17. Instalación y configuración de Replay

Short description:

Puedes instalar fácilmente una etiqueta de script personalizada para controlar la configuración de reproducción. Replay de Century está diseñado para desarrolladores, proporcionando información específica de errores y priorizando la privacidad. Se recomienda muestrear en caso de error para las repeticiones accionables. La configuración es rápida, con fragmentos disponibles para diferentes entornos. La documentación, el soporte y la colaboración de código abierto están disponibles en varias plataformas. La reproducción de sesión tiene casos de uso versátiles más allá de la corrección de errores, incluida la depuración de pruebas de integración.

Y así, con esto, obtendrás una etiqueta de script personalizada que puedes instalar simplemente pegándola en tu pantalla y puedes controlar si las repeticiones están habilitadas o no. En tu organización de Sentry, por lo que no es como un CDN personalizado, no tienes que preocuparte por cuál es la URL. Y luego, cuando cargues la página en tu evento de carga, habilitarías la integración o no, lo cual es opcional, creo que puedes, simplemente cambiarías la configuración predeterminada aquí. Y eso es lo que se refiere a la configuración del cargador. De acuerdo, como dije un par de veces, la reproducción es una especie de nueva categoría de producto que no creo que mucha gente haya escuchado, y no somos los únicos que lo estamos construyendo, pero lo estamos haciendo de manera diferente. Y creo que muchas de las primeras versiones de esto estaban orientadas a los PM, los gerentes de producto, las personas que quieren saber cómo las personas están utilizando sus productos, y creo que han orientado sus otros productos a hacer que las personas se sienten y vean videos durante horas. Así que, en Sentry, todo lo que hacemos lo pensamos primero en los desarrolladores, y por eso este producto de Sentry Replay está hecho para desarrolladores. Eso significa que intentamos ser muy tácticos y específicos al decir, aquí hay un error, esto es lo que necesitas saber para entrar y ver solo ese error, un poco de contexto a cada lado, pero luego seguir con el trabajo de solucionarlo. Porque recuerda que somos las víctimas y los asesinos aquí. Y solucionar nuestros errores es lo más importante. La privacidad es también muy importante para nosotros. Por eso, por defecto, todo tiene la privacidad habilitada, y puedes revertirlo lentamente. A medida que te sientas cómodo o según tus necesidades. Las dos formas de muestreo, fue una buena pregunta, así que gracias por eso. Pero el muestreo en caso de error frente al muestreo genérico. Esto, nuevamente, es otra forma en que intentamos centrarnos en los desarrolladores. Si solo quieres hacer un muestreo genérico y ver muchos ejemplos, esa es una forma de hacerlo. Pero creo que para muchos desarrolladores, queremos saber lo que necesitamos saber, por lo que el muestreo en caso de error es la mejor manera de obtener el máximo provecho y ver repeticiones que sean accionables y requieran tu atención. También está integrado en tu flujo de trabajo de Sentry. Así que mostré en la demostración un poco de ir y venir entre las repeticiones y los problemas. Por lo tanto, si ya estás viendo una lista de problemas, puedes entrar en una repetición que muestre un ejemplo de cómo surgió ese problema y qué sucedió después. Y la configuración, como hemos hablado, solo lleva minutos, hay diferentes fragmentos que puedes copiar y pegar dependiendo de si tienes un sistema de compilación o si estás usando NPM, o si solo quieres usar el CDN y el cargador, puedes literalmente copiar y pegar una línea, y estarás capturando repeticiones, y podrás verlas en vivo. Como hicimos. Así que hay mucha más documentación aquí y lugares donde puedes obtener ayuda. Algunos de estos deberían estar en el canal de Discord. Pero la documentación es esto es lo que hemos visto. También hay páginas de marketing y lugares en GitHub, Twitter y Discord donde puedes comunicarte y obtener ayuda de mí y de las personas de mi equipo. Todo esto es de código abierto, por lo que si nos encuentras en GitHub y encuentras un problema, vamos a trabajar juntos en código abierto y solucionarlo. Así que esa es la charla, esa es la masterclass. Espero que hayan aprendido un poco y se hayan interesado en la Reproducción de Sesiones. Hay muchas más formas en las que puedes usarlo además de corregir errores. He visto a personas instalarlo en su CI y ejecutarlo en sus pruebas de integración. Así que podrían haber tenido una prueba de integración inestable que se ejecuta headless y con la Reproducción de Sesiones pueden verla. El cielo es el límite. Es una herramienta, y espero que obtengan algún valor de ella. Gracias.

Watch more workshops on 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 🤐)
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.
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
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 🤐)
TypeScript Congress 2023TypeScript Congress 2023
48 min
Live Coding Workshop to Setup Rollbar Error Monitoring
WorkshopFree
During this session you will learn how to create a new Rollbar account and integrate the Rollbar SDK with your application to monitor errors in real-time and respond and fix those errors. We will also cover how to customize payload data sent to Rollbar to extend your monitoring capabilities.

Agenda:- Create a Rollbar Account (Free Account)- Integrate your application with the Rollbar SDK- Send handled and unhandled errors to Rollbar- Add Custom payload data to your configuration.

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

JSNation 2023JSNation 2023
29 min
Modern Web Debugging
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.
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.
React Summit 2023React Summit 2023
24 min
Debugging JS
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.
JSNation 2023JSNation 2023
31 min
Rome, a Modern Toolchain!
Modern JavaScript projects come in many shapes: websites, web applications, desktop apps, mobile apps, and more. For most of them, the common denominator is the technical debt that comes from settings up tools: bundlers, testing suite, code analysis, documentation, etc. I want to present you Rome, a toolchain that aims to be a all-in-one toolchain for the web, with one single tool you can maintain the health of all your projects!
Node Congress 2022Node Congress 2022
21 min
Mastering Error Handling Node.js
Errors happen to every programmer. Devs have different choices: suppress it, notify the user, report to the team, ignore it or write code to handle the error.
In this talk, you will learn all the important aspects of the Node.js error system, the types of errors, different ways to deliver an error, and patterns to improve error handling - with examples!