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

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.

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.

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.

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.

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.

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í.

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í.

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.

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

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.

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.

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.

¿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.

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.

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.

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.