Monitoreo 101 para Desarrolladores de React

Muy bien, entonces vamos a empezar. Mi nombre es Sarah Goethals y lidero DevRel en Sentry. Sentry es una empresa de herramientas de monitoreo de aplicaciones. Estamos - hola desde Alemania. Estamos aquí para contarles un poco sobre el monitoreo en general, específicamente para aplicaciones React. Específicamente, el ejemplo que vamos a usar es una aplicación Next.js. Como mencioné, esta aplicación es de código abierto. Está disponible públicamente desde Portugal. Bienvenidos. Así que eres bienvenido a echarle un vistazo. Tendremos enlaces al final para ti, y también compartiremos estas diapositivas contigo. No necesariamente tienes que seguir específicamente, pero si quieres, eres bienvenido a abrir una aplicación Next.js o React en tu editor favorito. Hoy voy a usar VS Code, y eres bienvenido a probar cosas. Te recomiendo que te registres en una cuenta gratuita de Suntry para empezar, pero no necesariamente tienes que seguir. La intención es que compartiremos estas diapositivas contigo después, y te daremos pasos muy concretos sobre cómo hacer esto más tarde si así lo eliges. De nuevo, solo un recordatorio rápido, esto se está grabando. Siéntete libre de agregar preguntas durante la masterclass en el chat. Alrededor de una hora, haremos una breve pausa. Así que sí, vamos a empezar.

Así que esto es de lo que vamos a hablar. Oh, lo siento, me quedé totalmente en blanco. Lazar, por favor preséntate. Hola a todos, soy Lazar. Estoy con todos aquí en Suntry. Originalmente soy de Macedonia también, igual que nuestra Archilka, pero ahora estoy en Toronto, Canadá. Sí, estoy emocionado de estar aquí. Creo que esta va a ser una muy buena masterclass. Me encanta hacer masterclasses, especialmente junto a Sarah. Así que sí. Genial. Hagamos que esto suceda. Muy bien, vamos a empezar. Así que hoy vamos a hablarles un poco sobre cómo poner en marcha su aplicación Next.js y React con Suntry. Haré una breve introducción a lo que es el monitoreo. Te mostraré cómo configurar realmente un proyecto Suntry, configurar mapas de origen para que puedas encontrar el código exacto que está causando tus problemas de performance o errores, problemas de performance o errores, Y también te guiaré a través de la adición de contexto de eventos y etiquetas personalizadas para hacer las cosas un poco más fáciles y más accionables para resolver rápidamente. Y luego haremos una breve pausa y se lo pasaré a Lazar que hablará un poco sobre alertas, errores de performance. Así que configurar alertas y asignaciones de problemas, un poco en el seguimiento distribuido, y la repetición de sesiones. Te daremos un resumen rápido. Compartiremos enlaces contigo, compartiremos esta presentación contigo, y vamos a empezar. De nuevo, solo un recordatorio rápido, siéntete libre de hacer preguntas en el chat. Y tendremos tiempo para preguntas y respuestas al final, o deberíamos tener tiempo para preguntas y respuestas al final. Así que si quieres guardar preguntas para entonces, eso está bien también, pero siéntete libre de hacerlas durante. Muy bien, perfecto. Así que tengo curiosidad si usas una herramienta de monitoreo, tal vez solo en el chat, comparte qué herramienta usas o si la usas, no necesariamente tienes que decir cuál es, está bien si no usas Sentry y usas algo más. Solo tengo curiosidad por las experiencias de la gente con el monitoreo de aplicaciones. Y si quieres, siéntete libre de hablar también sobre cuál ha sido el mayor beneficio de usarlo para ti. Mientras haces esto, mucho Sentry, eso es emocionante.

Un poco sobre lo que es el monitoreo. Esta es una pregunta bastante difícil de responder en solo un par de diapositivas y realmente queríamos enfocar esta masterclass en algo accionable. Esperamos que todos ustedes sean desarrolladores o SREs o personas que realmente estarán usando estas herramientas e intentando resolver problemas lo más rápido posible, capturando posibles errores y comportamientos incorrectos, sí. Así que quería dar solo una rápida, rápida visión general de lo que es el monitoreo. Esencialmente, hay algún tipo de mala user experience. Tal vez esto es una carga de página lenta o algo en la página que tarda demasiado en renderizar o un botón que no responde. Podría haber un error real. Podría ser solo una llamada a la API lenta. Algo que está causando una mala user experience. Algunas personas en el chat también están agregando algunas otras cosas para las que puede ser útil. Por ejemplo, el equipo de atención al cliente necesita entender los problemas que la gente está enfrentando. De nuevo, algún tipo de mala user experience. El usuario se frustra. Eso normalmente lleva a que inmediatamente abandonen su carrito o cambien a una aplicación diferente o se distraigan con algo más porque está tardando demasiado. A menudo, para cuando los desarrolladores se dan cuenta de que algo es un problema, tal vez están pasando por el soporte al cliente. Como mencioné en el chat, los desarrolladores llegan demasiado tarde para al menos esas personas que se encontraron con ese problema. A veces eso puede ser un gran problema. A veces ni siquiera sabes hasta que la gente está quejándose en alguna aplicación de redes sociales o simplemente etiquetando a la gente, spammeando el soporte al cliente, spammeando los botones de ayuda, etc. Todos podríamos haber experimentado esto, sé que yo lo he hecho. Lo que Sentry intenta ofrecer en su lugar es una oportunidad para que Sentry detecte los problemas que los usuarios están enfrentando lo más rápido posible. Dar esos problemas detectados, ya sean problemas de performance o errores a los desarrolladores lo más rápido posible con la mayor cantidad de contexto e información posible para que los desarrolladores puedan solucionar el problema rápidamente. Idealmente, lo que sucede es que, sí, tal vez algunos usuarios todavía experimentarán el problema, pero la mayoría de los usuarios ni siquiera saben que el problema existió porque el problema se resolvió lo más rápido posible. Alguien mencionó en el chat queriendo usar más el monitoreo de performance, pero encontrándolo complicado para entender qué está pasando.

Esperamos hablar un poco sobre eso también hoy. Específicamente, en lo que Sentry le gusta enfocarse es en la capacidad de los desarrolladores para tomar medidas. Ya lo dije un par de veces, lo más rápido posible, saber cuál es el problema, saber dónde está el problema, saber quién en tu equipo de desarrollo puede resolver el problema, alertar a esa persona de la manera apropiada para alertarlos, dependiendo de cómo opera tu equipo o empresa, y permitirles corregir y volver a desplegar lo más rápido posible. Ya sea que se trate de líneas de código rotas, fallos, llamadas a la API rotas, intentamos centrarnos en ser primero para los desarrolladores para darte respuestas, no solo pistas. Queremos demostrar un poco de eso hoy. Si alguien tiene una pregunta sobre eso, no dudes en preguntar en el chat.

De lo contrario, vamos a empezar a explorar algo de esto en la aplicación real. Vamos a hacer una demostración para ti. Esta es una demostración en vivo con código real y un proyecto Sentry real, así que toquemos madera para que las cosas no se descontrolen demasiado. Pero por supuesto que probablemente lo hará porque así es como funcionan las demostraciones. Espero que los chicos de la demo estén con nosotros hoy. Esperemos, se está poniendo un poco ventoso aquí. Estoy aquí en el estado de Washington y todavía no está lloviendo, pero está un poco ventoso, y estoy usando Starlink para mi Internet. A veces, cuando está un poco ventoso, se lleva mi Internet. Así es como funciona Internet, ¿verdad? Vamos a guiarte a través de una aplicación de tarjetas de memoria. Esto fue construido con Next.js, y está desplegado con Percel. Puedes ver el enlace de GitHub aquí, y lo pegaré en el chat para ti si quieres echarle un vistazo, y no quieres copiar todo eso. De nuevo, si quieres seguir ya sea con este repositorio de demostración, necesitarás una cuenta de Planetscale u otro tipo de database. Creo que este específicamente, está configurado actualmente para la database de Planetscale, pero necesitarás una cuenta de Sentry con un token de autenticación, y luego el readme es bastante detallado para ti. También puedes usar tu propia demo o tu propia aplicación, si quieres, y lo que vamos a hacer, es que vamos a configurar un nuevo proyecto React con Sentry, específicamente un proyecto XJS. Vamos a configurar los mapas de origen, y vamos a añadir contexto de eventos y etiquetas personalizadas. Voy a estar compartiendo y dejando de compartir mi pantalla de muchas maneras diferentes, solo para guiarte a través de todo esto.

Lo primero que vamos a hacer es que te voy a mostrar el repositorio, solo para que puedas ver, en general, con lo que estamos trabajando. Bien. Así que aquí está nuestro repositorio de tarjetas de memoria. De nuevo, tenemos un readme bastante detallado aquí. Bastante simple para empezar. Incluso hay un archivo de ejemploenv, si eso te es útil. Bastante sencillo. Ahora, voy a compartir mi VS code. Bien. Así que, tenemos. Estas malditas cosas de Zoom siempre están en mi camino. Ahí vamos. He clonado este proyecto en VS code. Específicamente, si quieres seguir y hacer cosas en tu propia máquina local, y tienes una cuenta de Sentry, específicamente, estoy en la rama no-Sentry, la rama principal ya tiene Sentry configurado, o más bien los archivos y tiene mucho de Sentry, así que siéntete libre de seguir en el repositorio principal o puedes seguir en este repositorio no-Sentry en su lugar si quieres. Ya configuré mi dot env con mi DB de PlanetScale y todo eso, eso ya se ha hecho, pero aparte de eso, vamos a guiarte a través de todos los pasos idealmente. Esto es bastante molesto, debería haber configurado un tercer monitor aquí. Lo haré la próxima vez. Ahora vamos a saltar a Sentry, y voy a crear un nuevo proyecto aunque ya tenemos un proyecto aquí, dos proyectos aquí para testing. Voy a crear un nuevo proyecto solo para que puedas ver este proyecto empezando desde el principio. Cuando creas un nuevo proyecto en Sentry, se te ofrece una plataforma particular para elegir. Estamos usando Next.js, eso es lo que hemos escrito, pero puedes ver que tenemos un montón de soporte. Soportamos más de 100 lenguajes y frameworks. Puedes verlos allí, pero vamos a usar Next.js. Voy a dejar mis alertas como alerta para cada nuevo problema. Lazar repasará diferentes alertas que podemos hacer más tarde. Lo llamaremos React Advanced London. Lo mantendremos en ese equipo allí. Haces clic en ''Crear proyecto'' y te llevará a esta página esencialmente de documentación. Voy a aprovechar este asistente. Pero tenemos enlaces a la documentación que usa este asistente. Eso sería aquí. De nuevo, todos estos enlaces están en la presentación que compartiré contigo. Pero puedes ver que puedes configurarlo con el asistente o puedes hacerlo personalizado si quieres. Hay una configuración del SDK manualmente aquí también. Además de eso, tenemos un par de cosas que suceden automáticamente cuando estás usando el asistente. Una de esas cosas es este asistente para Next.js sube automáticamente tus mapas de origen. En realidad voy a eliminar eso en el próximo paso solo para que puedas ver qué aspecto tiene subir tus mapas de origen y los beneficios de ello. Pero esto lo hará por ti. Hablaremos de por qué tener tus mapas de origen es útil en un momento. Vamos a ejecutar este asistente aquí. Solo voy a copiar esto y luego voy a saltar a VS Code y lanzar esto en la terminal. Mientras hago eso, revisaré en mí. Puedo encontrar el chat. Me va a hacer un par de preguntas. ¿Dónde fuiste terminal? Ahí estás. Déjame hacer esto un poco más grande para ti. Está preguntando si estamos usando Sentry SaaS o autohospedado.

Luego voy a elegir el proyecto que quiero conectar mi código. Así que este específicamente es ese proyecto de React Advanced London que acabo de crear. Va a instalar todo lo que necesitamos y todo está listo para funcionar. Déjame encontrar el chat. ¿Dónde fueron ustedes? Hola chat. A veces no me gusta, veamos, mostrar chat. Ahí estás. Asegurándome de que no hay preguntas. Sí. ¿Está bien hacer solo Git Clone? Sí. Si no has experimentado con los repositorios de plantillas de GitHub, básicamente te permite hacer un fork, pero no es realmente un fork. Es como, porque un fork implica que vas a empujar código de vuelta al repositorio original principal, te permite básicamente hacer una copia en tu propia cuenta. Eso es generalmente lo mejor. Hay un botón en el que dice usar esta plantilla o debería haber. Tenemos nuestro Sentry. Eso es todo. Eso es todo lo que tuvimos que hacer para conectar nuestro nuevo Proyecto Sentry a nuestro Proyecto Next.js. Es realmente simple, rápido y fácil. Hace que ser un defensor en Sentry sea aburrido a veces. Pero vamos a seguir y como mencioné, quiero eliminar este archivo SentryCLIRC porque esto es lo que subió los mapas de origen y yo quiero limpiar eso para que no los tengamos, para que puedas ver qué está pasando aquí. Creo que también necesito verificar que mi.env no estaba configurado. Creo que, sí, perfecto. Luego también necesitamos ir a, compartiré mi pantalla de nuevo. Entraremos en el proyecto, puedes verlo realmente. Aquí están nuestros proyectos. Aquí está el proyecto React Advanced London dentro de Sentry. Puedes ver que aún no ha pasado nada porque aún no hemos hecho nada. Está esperando eventos. Podemos hacer algunos recorridos, podemos hacer todas las cosas. Si entramos en la configuración de este proyecto, y bajamos aquí a los mapas de origen, podemos ver que no tenemos nada aquí porque aún no hemos construido. Si usas el asistente con Next.js para Sentry, automáticamente subirá los mapas de origen una vez que construyas. Como eliminé el archivo CLI de Sentry, ahora cuando lo construya, no debería subirlos automáticamente. Solo quería asegurarme de que aún no había sucedido nada. Aquí es donde lo encontrarás. Estamos aquí en este proyecto. Ahora vamos a construir y ejecutar algunas cosas. Estamos de vuelta en VS Code aquí, y solo voy a construir.

Parte de por qué queríamos hacer esto de principio a fin y hacer que realmente veas cómo configurar todo y ejecutar todo es porque, no sé tú, pero para mí, es muy frustrante cuando la gente dice, solo haces clic en este botón y funciona y luego no funciona porque había otra cosa que no te dijeron. Así que queremos mostrarte todo eso. Debería estar casi terminado de construir ahora. Si hay alguna otra pregunta mientras estamos construyendo, ahí vamos, avísame. Bueno, entonces vamos a ejecutar esto ahora y vamos a ahí vamos, y lo abrimos y esta es nuestra aplicación de tarjetas de memoria. Así que esta es una aplicación muy simple donde tiene estas tarjetas de memoria con una pregunta y respuesta en una categoría. Puedes eliminar, puedes actualizar, puedes crear nuevas y también puedes practicar. ¿Qué tan fácil es configurar Sentry con el GDPR en mente? Muy fácil, así que Sentry toma la privacidad muy, muy, muy en serio y creo que en realidad tenemos un buen post en el blog sobre eso. Lazar, ¿puedes? Sí, puedo buscarlo, sí. Creo que acabo de encontrarlo. Aquí hay uno de los posts del blog específicamente sobre nuestro Replay de Sentry, que es bastante difícil para las preocupaciones de privacidad en general las preocupaciones de privacidad en general, porque Sentry Replay, como Lazar te mostrará en un momento, te permite ver qué usuarios están haciendo clic, lo cual es un desafío, cuando si están ingresando información. Y sí, tomamos la privacidad muy, muy, muy en serio, pero puedes revisar ese. Y creo que hay otros si Lazar quiere intentar encontrar algunos. ¿Dónde se usa principalmente Sentry y qué te beneficiaría? Sí, gran pregunta. Así que Sentry se usa en el front end, back end, móvil, básicamente en cualquier lugar y en todas partes. Una de las cosas que Lazar mostrará es el rastreo distribuido, que es poder rastrear un problema desde un usuario haciendo clic y no obteniendo respuesta hasta las llamadas a la API, las consultas a la base de datos. Acabamos de lanzar problemas de consulta también para las consultas a la base de datos. Y sí, es útil para cualquier tipo de problemas de rendimiento o errores regulares, problemas de rendimiento o errores regulares que están ocurriendo en tu aplicación.

Bueno, esta es nuestra aplicación de tarjetas de memoria y dios, lo siento, los controles de zoom de la estrella. Aquí vamos. Así que esta es nuestra aplicación de tarjetas de memoria, se ve genial, aún no hay problemas. Podemos mirar en nuestro proyecto aquí. No debería estar pasando nada. Tenemos una versión porque construimos, pero no está pasando nada aquí, así que estamos bien. Ahora vamos a introducir realmente un error en nuestro código, reconstruir, reiniciar y luego ejecutar el error esencialmente. Así que la forma en que voy a hacer esto es que voy a bajar aquí a este archivo y este es donde manejamos cualquier tipo de actualizaciones a una tarjeta de memoria. Así que primero, queremos asegurarnos de que la pregunta existe, no tiene una longitud de cero. La respuesta también no tiene una longitud de cero y que hay una ID de categoría.

Voy a eliminar esta línea aquí y voy a permitirnos esencialmente intentar enviar o actualizar una pregunta sin tener una pregunta, o una tarjeta de memoria sin tener una pregunta. Tal vez solo lo hiciste accidentalmente. Entonces, vamos a, solo voy a, boop, reconstruir aquí y luego lo reiniciaremos. Y, puedes ver aquí, en la terminal, este error, no Sentry Auth Token Configurado, por lo que los mapas de origen no se cargarán. Puedes encontrar información sobre eso aquí.

Haremos eso en un minuto, pero siempre es útil mirar lo que se imprime cuando construyes. Muy bien, vamos a empezar esto. Volveremos a la tarjeta de memoria y la actualizaremos. Y, también voy a seguir adelante y abriré mis DevTools aquí, Vale, y voy a eliminar esta pregunta y voy a intentar actualizarla. Ves que obtenemos un error en DevTools, pero este error no es muy útil. Dice ad update. Sí dice handle update, pero no tengo ninguna otra información realmente. Quiero decir, nada de esto es muy útil. Entonces, ahora voy a entrar en Sentry y ver si puedo encontrar algo que sea aún más útil. Tal vez, tal vez.

Así que hemos visto el lanzamiento. Creo que veo, toma un minuto. Actualizar, actualizar, actualizar. Vamos. Vamos. Déjame ver si mis problemas muestran algo. Creo que solo sea, ¿es esto hace nueve minutos? Eso fue hace demasiado tiempo. Hay, oh, no, esa fue la tarjeta de memoria. Volvamos al React Advanced Pundan. Oh Lazar, ¿por qué este problema aún no aparece? Supongo que dale un minuto. Sí. Cambiaste el DSN. Correcto, ahí vamos. ¿Es eso? No, eso sigue siendo solo el lanzamiento. ¿Estás listo para el problema? Ahí va, oh, espera. Debería ser. Tal vez es mejor si vas al problema como desplázate hacia abajo. Creo que hay una lista. Sí, hagamos eso. Eso sigue siendo el otro. No, eso sigue siendo el viejo. ¿Hiciste como el DSN en el.env? Oh sí, ¿sabes qué? Creo que podría haber, olvidé actualizarlo al otro proyecto, tienes razón. Sí. Vale, déjame dejar de compartir por un segundo. Sí, lo que pasó es que el DSN es una cadena. Es como una cadena de conexión para una base de datos. Y eso le dice al SDK de Sentry que apunte todo lo que captura a esta URL. Y si notaste anteriormente cuando Sarah estaba configurando el asistente, nos pregunta, le pregunta, ¿estás usando Sentry, el SaaS en sentry.io? ¿O estás alojando Sentry tú mismo? Porque eso también es una cosa. De hecho, puedes alojarlo en tus propios servidores. Y para que el SDK sepa a dónde enviar los datos que captura, el DSN está aquí para proporcionar esa información para el SDK. Entonces básicamente si estableces un DSN incorrecto, estarás enviando errores y datos y métricas de rendimiento en un lugar diferente, no en tu proyecto. Y el problema era que el asistente hace todo correctamente, pero yo lo había cambiado manualmente a un proyecto diferente. Así que eso fue todo yo. Muy bien. Déjame hacer esto de nuevo rápidamente. Cuando intentas saber más que el asistente, probablemente no sea una buena idea. Buen asistente, mal usuario, exactamente. Muy bien. Solo estoy reconstruyendo aquí. Ups. Y sí, el archivo de configuración de Sentry fue configurado correctamente con el DSN correcto. Pero de nuevo, cambié cosas manualmente, así que. Muy bien. Voy a volver a compartir aquí. Y deberíamos estar listos para ir. Entonces, déjame actualizar esto de nuevo. Vale, entonces vamos a seguir adelante y eliminar esta pregunta. Y vamos a hacer clic en actualizar. Vamos a ver de nuevo que este error no es muy útil. Y luego esta vez, oh, ahí va. Vamos a entrar en proyectos. Y aquí. Y ahora tenemos nuestro tercer lanzamiento. Y creo que veo ese error.

Ahí está. Vea, no debería haber tardado tanto. Por eso estaba como, ¿qué está pasando? Muy bien, déjame mostrar este chat de nuevo porque sigue desapareciendo en mí. Bueno, entonces vamos a entrar en este error. Y podemos ver que tenemos una dirección IP, tenemos la versión del navegador que estoy usando, la versión del sistema operativo en el que estoy, alguna otra información adicional, pero esta información aquí no es muy útil. Normalmente no hay un retraso. Por eso acabas de notar que en realidad apareció bastante rápido cuando estaba configurado correctamente, pero sí. Entonces, esta no es información muy útil. Esto es tan útil como la información estaba en las herramientas de desarrollador en Chrome. Así que ahora lo que vamos a hacer es que vamos a añadir los mapas de origen. Perfecto. ¿Alguna pregunta sobre cómo se configuró eso? Así que esto es, y en realidad tal vez deberíamos repasar esto un poco más. Esta es la vista de problemas para Sentry. Así que lo bueno es que los problemas se agruparán automáticamente cuando sean del mismo tipo de problema. Así que puedes ver que solo ha habido un evento que causó este problema para un usuario. Pero si fuéramos a, digamos, entrar en este y eliminar esta pregunta e intentar actualizar, bueno, ahora todavía está congelado porque fue atrapado en un bucle debido a la forma en que está funcionando el código. Pero si fuéramos a refrescar, y luego seguir adelante y eliminar este, y actualizar, entonces cuando vengamos aquí y refresquemos aquí, tenemos dos eventos para el mismo usuario que están causando este problema. Y si miramos todos los problemas en la pestaña de problemas, podemos ver aquí de nuevo que, bueno, tres eventos, probablemente porque hice clic en ese botón extra, pero para un usuario y hacer clic en él y obtener toda esta información. También puedes hacer clic en los eventos específicos y verlos. Esto probablemente necesita ser refrescado. Bueno, no sé por qué eso no está apareciendo de manera diferente, y también puedes pasar a través a cada uno de los diferentes eventos. Así que tenemos, este fue el que fue hace siete minutos, este fue el que fue hace tres minutos, y puedes ver si hay algo que es diferente relacionado con estos tipos de eventos. Lo siento, dos segundos. Te quiero. Esto sucede porque para cada error, capturamos todo tipo de data, como por ejemplo, la información del dispositivo, ¿cuál es el dispositivo que está usando el usuario? ¿Es un móvil, está en el navegador, cuál es la versión del navegador como puedes ver? Así que hay data muy específica del usuario para cada uno de los errores. Así que los agrupamos, pero todavía necesitamos proporcionar diferentes páginas para ellos para que puedas hacer una suposición como, okay, podría ser solo Firefox o este problema ocurre en Firefox y Chrome. Así que esa es la razón. Así que puedes ver aquí, el, ¿qué es closure es el que acabamos de hacer. El, ¿qué es un componente es el que hicimos antes. Así que también puedes ver que si está apareciendo en varias páginas, qué entorno es este. Si este era un entorno de desarrollo o un entorno de producción puedes ver a qué lanzamiento pertenecía. Así que estos eran todos parte del mismo lanzamiento. Este era parte del lanzamiento anterior. Sí, mucha información diferente. Obtienes el error que se dio. En realidad puedes abrir la repetición pero lo dejaré para Lazar. Y obtienes esta lista de migas de pan también. Te muestra todo lo que estaba sucediendo a medida que avanza. Lo que quiero mostrarte, sin embargo, son los mapas de origen porque creo que eso es particularmente útil. ¿Cuál es el beneficio de alojar Century por sí mismo? Quiero decir, básicamente si quieres ser capaz de no tenerlo dirigido por nosotros y usarlo esencialmente gratis. Muy bien, ahora vamos a entrar y vamos a cargar los mapas de origen. El beneficio de cargar los mapas de origen es que realmente obtienes la línea de código que es útil porque de nuevo, nuestro objetivo es hacerlo muy accionable para los desarrolladores, no solo hacerte saber que hay un error podemos tener registros que nos hagan saber si hay un error. Queremos que nos haga saber que hay un error, nos lo diga inmediatamente, envíe esto a la línea de código potencialmente asignar un propietario de código inmediatamente y alertar a esa persona. Ese es el objetivo. Así que vamos a entrar aquí en nuestra terminal de nuevo. Vamos a seguir adelante y limpiar eso y vamos a ejecutar el asistente de mapas de origen. Así que si no ejecutaste... Déjame ver. Si no usaste un asistente y no configuraste los mapas de origen entonces podrías ejecutar el asistente de mapas de origen. Sí, si no lo sabías, Sentry es en realidad open-source. Oh, me está haciendo iniciar sesión con Okta, espera. Te va a dar un enlace. ¿Queremos continuar con este asistente? Así que esto está diciendo que ya tienes archivos no comprometidos, no rastreados. Creará y actualizará archivos, eso está bien. Estamos usando Sass, ya tenemos una cuenta de Sentry. Va a seguir adelante y abrir eso para nosotros. Podemos volver a ver los problemas, volver aquí, y vamos a asegurarnos de que está en el proyecto correcto. Es Next.js, ¿queremos ejecutar el asistente de Next.js? Así que si quisieras, podrías empezar con el asistente de mapas de origen y si detecta que eres, o si dices que estabas usando Next.js por ejemplo, dirá, ¿te gustaría ejecutar el asistente de Next.js? No necesitamos, porque ya lo hicimos. Así que básicamente solo te dice cómo añadir a tu archivo de configuración, pero ya lo tenemos. No estamos usando CICD y se ha actualizado con éxito. Así que ahora necesitamos construir, porque si vamos a la configuración de nuestro proyecto aquí para el React Advanced London, configuraciones y mapa de origen. Oh, por aquí. Azul, ahí lo tienes. Puedes ver que todavía no hay nada ahí. Así que ahora podemos construir. Cuando vamos a la página de inspección, también podemos ver los errores. Entonces, ¿qué errores específicamente mostrados por Sentry? Sí, así que Sentry no es solo para capturar los errores, sino más bien para poder identificar rápidamente la causa raíz de errores específicos para que puedas solucionarlo más rápidamente. Así que en lugar de tener que abrirlo en la página de inspección y como, verlos todos y hacerlo, en realidad serías notificado inmediatamente cuando los errores están ocurriendo en producción, asumiendo que estás en producción, y entonces serías alertado y Lazar te mostrará un par de las otras características donde puedes adjuntar co-propietarios y cosas así, y sí. Así que no es solo monitoreo, sino más bien soluciones accionables. ¿Tiene sentido? Si tienes una mejor manera de describirlo, Lazar, adelante.

Creo que lo has cubierto, sí. Sí, se trata más de ser accionable. Bueno, hemos subido los mapas de origen y ahora vamos a ejecutar las cosas. Y vamos a volver a nuestra página aquí, y vamos a otra, ¿qué es una promesa? Elimina eso, actualiza, obtén un error. Dirígete aquí, vamos a entrar aquí. Tenemos cuatro lanzamientos. Vamos a refrescar esto. Veremos que tuvimos este error, pero eso fue hace siete minutos. Vamos a refrescar de nuevo. Debería aparecer aquí pronto. Oh, no, espera un segundo. Solo necesito asegurarme de que no reescribí o sobrescribí algo. Monitoreando y manipulando. O monitoreando y, haciéndote saber lo que estoy escribiendo, o monitoreando y haciéndote saber lo que necesita ser manipulado. Mensajes de error personalizados para Sentry. Oh, déjame ver si, está bien. Ese estaba funcionando. ¿Hice algo tonto de nuevo, Lazer? Lo siento, estaba respondiendo en el chat, ¿qué pasó? No, estás bien. Solo estoy tratando de averiguar por qué no, por qué no estoy obteniendo mi error. Oh, ahí va, hace un minuto, aquí vamos. Bueno, este fue categorizado de manera diferente porque ahora tenemos acceso real a nuestro código fuente. Así que podemos ver que este es el lugar donde se produjo el error, fue creado, desencadenado, y tenemos todo un historial de él. Así que fue esta actualización aquí la que causó el error y eso estaba sucediendo cuando estábamos tratando de actualizar algo en las tarjetas de memoria. Así que esto es mucho más útil que cuando lo miramos para el anterior, aquí, donde este es muy similar a lo que vemos aquí en nuestro, es casi como un siglo. Sí, exactamente, dudum-dum. Entonces, cuando estás usando tus Herramientas de Desarrollo, primero que nada, no vas a estar en las computadoras de tus usuarios. Así que cuando estás en producción, las Herramientas de Desarrollo no son tan útiles a menos que sepas los pasos exactos para recrear algún tipo de error. En segundo lugar, incluso si tenías Sentry configurado pero no tenías mapas de origen, todavía solo estás obteniendo, quiero decir, todavía obtienes mucha más información. Obtienes toda esta clase de data de todos tus usuarios. Se agrupa. Puedes ver cuántos usuarios están siendo afectados, cuántas veces los usuarios están siendo afectados, etc. Pero la información más útil aquí, en mi opinión, como desarrollador es tener enlaces al código fuente, especialmente porque incluso puedes adjuntar Jira o GitHub o cualquier otro software de seguimiento de problemas que uses y hacer que automáticamente cree problemas dependiendo de ciertos umbrales o crear un problema desde aquí. Y puedes hacer algunas alertas automáticas y asignaciones, en las que Lazar entrará. Tienes tus migas de pan aquí. Básicamente tienes todo lo que necesitas. ¿Cuál es la diferencia con Rum? No sé si entiendo esa pregunta. ¿Es como un monitoreo de usuario real? ¿El puntero del mapa de origen funcionará igual si el error es provocado por una biblioteca o paquete de terceros utilizado? ¿Señalará a la línea de código fuente dentro del proyecto o al error real desencadenado en el directorio del módulo de nodo? Esa es una buena pregunta. Entonces, si no tienes el, si es de un tercero, no apuntará a la línea exacta de código en el tercero, pero apuntará a la línea de código donde llamaste a esa biblioteca de terceros. Así que entonces sabrías que eso es donde, no hay problema. Bueno, eso es básicamente mapas de origen. Ahora tenemos seguimiento de pila. Vamos a entrar en el contexto del evento y las etiquetas personalizadas ahora. Vamos a volver a nuestro código. Y esta vez Una cosa que no fue muy útil aquí, para mí, al menos es la dirección IP. Por ejemplo, si esto fuera como una tienda o algo y fuera como artículos de muy alto precio, tal vez tienes menos clientes, pero quieres poder contactar a los clientes si tuvieron un problema con completar algo y no tuvieron suficiente tiempo para completarlo. Tal vez tuvieron un problema con completar algo o lo que sea. No sé. Solo estoy inventando historias sobre la marcha. Sería más útil poder tener más información identificable sobre tus usuarios aquí. Así que quiero crear un contexto personalizado o un contexto de evento. Quiero agregar al contexto la adición de correos electrónicos de usuarios. Y lo que voy a hacer es aquí vamos a, primero que nada, vamos a dejar esto comentado porque quiero asegurarme de que estamos todavía obteniendo los errores. Y voy a crear una constante data para obtener la información sobre la sesión actual. Así que esto solo nos va a dar información sobre la sesión actual. Vamos a hacer una corrección rápida. Bueno, esto es solo React. Y luego voy a venir aquí abajo y dentro de mi actualización, voy a agregar que si queremos hacer esto antes, lo siento, antes de actualizar, quiero agregar a Sentry quién es el usuario, y específicamente, quiero la dirección de correo electrónico del usuario. Así que la forma en que vamos a hacer eso es, solo voy a decir, si la sesión tiene un usuario y una dirección de correo electrónico, vamos a establecer el usuario en esa dirección de correo electrónico o como establecer la información del usuario esa dirección de correo electrónico a esa dirección de correo electrónico. Vamos a agregar Sentry aquí arriba. Así que agregamos nuestra declaración de importación para Sentry. Y aquí mismo, solo estamos diciendo, mira, si los data de la sesión actual, como si hay data y hay un usuario, y hay una dirección de correo electrónico, genial, adelante y establece el usuario para este contexto personalizado de Sentry, el correo electrónico es data.user.email. Así que eso es básicamente todo lo que estamos haciendo aquí. Escribir buenos mensajes. Sí, esto es un poco complicado. No vamos a entrar en lo que serán los mensajes para los usuarios. Pero si estás hablando de algo como esto, creo que esta es la dirección que podrías querer tomar, que es agregar un contexto adicional para hacer que los errores dentro de Sentry sean más útiles para tus desarrolladores o para ti mismo. Así que eso es más o menos para lo que sirve esto. Puedes agregar cualquier tipo de data a la que tengas acceso en esa sesión actual o en esa vista actual o lo que sea que estés usando. Y si puedo intervenir en eso. Por favor, hazlo.

Los mensajes no son 100% importantes en términos de Sentry. Es por eso que capturamos todos estos datos adicionales. Entonces, de alguna manera, porque el registro de la consola no siempre es útil para que puedas depurar cosas. Es por eso que obtienes todos estos otros datos. Y diría que no te esfuerces tanto con los mensajes, si por ejemplo tienes un try cache que estás obteniendo usuarios y la caché se golpea. Digamos, hay un error al obtener los usuarios. Pero luego, utilizando todos los otros datos, realmente lo descubrirás al mismo tiempo. Entonces sí, el mensaje no es como la única parte de la solución que necesitas para corregir el error. Los datos son, diría, incluso más importantes. Pero sí. Sí, lo que es útil es como, para ser completamente transparente aquí, soy muy un depurador de console.log en general. Eso es mi opción predeterminada, como creo que lo es para muchos de nosotros. Pero de nuevo, estamos hablando de aplicaciones de nivel de producción. Estamos hablando de toneladas de diferentes tipos de errores o problemas de rendimiento. Quiero decir, con suerte no, pero seamos realistas, todos vamos a tener errores y problemas de rendimiento como desarrolladores. Y entonces, como dijo Lazar, esta información que estás obteniendo aquí sobre quién está afectando, por qué está afectando, cómo está afectando con rastreos de pila y migas de pan y repetición de sesión, esta información hará que sea más rápido para que vayas a descubrir dónde está el problema que simplemente tener un mensaje de problema aquí en un registro, idealmente. Entonces-

Pero mira el error. Este mensaje de errores, ¿qué es? Es un error. ¿Verdad? Ahí. Sí. Falló. Bueno, en realidad, este sí dice, falló al actualizar la tarjeta flash. Pero luego simplemente dice, ¿por qué mala solicitud? Sí, razón, mala solicitud. No es muy útil. Exactamente. Sí, pero como obtén el resto de los datos y básicamente verás. Es todo lo que te ayuda a depurar. Sí. Eso es bueno. Realmente lo hizo. Va a crear un nuevo problema. Creo. Porque ahora agregamos contexto adicional. 12 minutos, 19 minutos. Hola. ¿Qué pasó aquí? Activaste la nueva solicitud, un nuevo fallo. Un nuevo problema. Un nuevo error. Y esta vez agregamos el contexto. Entonces debería aparecer aquí pronto. Intenta una vez más, solo en caso de evitar la muestra. Diré que es mucho más difícil demostrar Sentry en aplicaciones muy simples que en realidad no tienen muchos usuarios porque las cosas no suceden muy a menudo. Hay una pregunta. Tengo tantos errores en Sentry ahora mismo es como ¿qué fue eso? Ejecutemos eso. Debería, ejecutemos eso. Ejecutemos eso de nuevo. Oh, eso es un error de embudo. Es simplemente para poder Hay una pregunta. Tengo tantos errores en Sentry ahora mismo. Hace que sea difícil pasar por ellos. También hay tres meses. Entonces, tantos errores nuevos surgieron de la nada, tal vez un rastreador de Microsoft, no estoy seguro, no hay nada que pueda hacer al respecto, lo cual es triste. Tantos errores. Entonces, aquí es donde creo que agregar etiquetas o contexto puede ser muy útil. Aquí vamos. Porque entonces puedes hacer un filtrado a través de errores para hacerlo al menos, con suerte, un poco más procesable. Entonces, ahora puedes ver que este fue el error original de hace unos 15 minutos, y luego este fue el nuevo error que acabamos de hacer. Y ahora, en lugar de una dirección IP, como teníamos aquí, donde es como, no sé quién es esta persona, pero esta es su IP. Ahora tenemos, oh mira, es esta persona, admin@admin.com. Entonces, ahora tenemos contexto adicional para esto. Y podemos ver esa información aquí abajo, y podemos ver que ha afectado a varios usuarios, principalmente porque no teníamos eso en general. Y luego también puedes hacer clic aquí y luego ver si esta persona tuvo muchos tipos diferentes de problemas que estaba experimentando. También puedes ver la repetición para este, pero de nuevo, dejaré eso para Lazar. Para muchos tipos diferentes de errores, si estás tratando de averiguar en cuáles enfocarte, puedes ver cuántos eventos versus cuántos usuarios, y básicamente qué tan frecuentemente estás obteniendo ese error, pero luego cuántas personas está afectando. Si solo está afectando a una persona, entonces tal vez solo hay algo extraño con cómo está configurado o cómo están usando tu aplicación, en cuyo caso, sí, tal vez eso es fruta baja. Puedes ir a ver y decir, oh, en realidad, no funciona en Firefox o esta versión antigua de Chrome o algo así, y luego puedes agregar tu información para decir, hey, esto en realidad no funciona en este navegador, etc., o si está afectando a mucha gente, eso en realidad podría ser algo que quieras priorizar más. Entonces, incluso si el evento solo está sucediendo una vez por usuario, pero está sucediendo a todos los usuarios, eso es probablemente algo en lo que realmente quieras enfocarte. Lo más importante de Sentry en comparación con otras personas es que, u otras herramientas de monitoreo de aplicaciones, es que realmente estamos hiperenfocados en los desarrolladores, por lo que asegurarse de que los desarrolladores puedan llegar a esa línea de código, ver el rastreo de pila, ver todo lo que está sucediendo. Lo siento, acabo de golpear mi micrófono. Ver todo lo que está sucediendo, y como Lazar te mostrará en solo un par de minutos, poder aplicar propietarios de código, alertar al desarrollador de inmediato y resolver ese problema lo más rápido posible.

Además, en general, en nuestra filosofía y cómo construimos software, así que de nuevo, mencioné que somos de código abierto, por lo que realmente somos como construidos por desarrolladores para desarrolladores con desarrolladores, esencialmente. Bueno, voy a terminar una última cosa. Estas son las etiquetas personalizadas, y de nuevo, esto puede ser muy útil para cuando tienes muchos problemas, como se mencionó en el chat, y estás trabajando en tratar de ser capaz de filtrar esos problemas de formas que sean efectivas. Además, alguien mencionó que console.log es poderoso, pero no seguro, porque no quieres revelar demasiada información en tu console.log, por lo que no quieres ser capaz de compartir cosas como IDs de usuario, y cosas así. Así que esa es otra razón, sí. Error resuelto por sí mismo para que sea más fácil. Sí, IA, eso sería bueno. Y creo que hay... Ya sabes, es muy complicado, no vamos a entrar en la pregunta de como IA versus no necesariamente ahora mismo. Pero sí, esa es una forma. Bueno, ahora lo que vamos a hacer es, vamos a agregar etiquetas personalizadas. Así que hay algunas operaciones que están sucediendo, podemos actualizar, podemos eliminar y podemos crear una nueva. No voy a entrar en la creación de una nueva, pero vamos a hablar sobre cómo podríamos querer establecer una etiqueta para actualizar o eliminar una tarjeta de memoria. Así que cuando queremos actualizar, aquí estamos en la función de manejo de actualización. Así que aquí abajo, vamos a agregar, este Century.setTag para actualizar. Así que estamos diciendo que la operación que estamos tratando de completar es la actualización y vamos a hacer lo mismo aquí en la eliminación. Así que vamos a establecer esto para eliminar. Si quisiéramos, también podríamos agregar uno de creación, pero no vamos a hacerlo, eso sería aquí y simplemente en este manejo de creación, pero no vamos a preocuparnos por eso en este segundo. Bueno, esto de nuevo, simplemente agregará información adicional para facilitarle el filtrado a través de diferentes áreas que tienes en el tablero de Sentry y ver cómo se desarrollan. Así que vamos a seguir adelante y PNPMBuild. Sí, esa es una gran pregunta para Sentry. ¿Sentry va a, o ya se centra en lo visual o en la user experience? Como si un use effect se está ejecutando cinco veces y hace que algo como flash en la pantalla. Y Lazar respondió, lo cual es muy interesante. Estoy realmente emocionado por esto. Este es un widget de informe de usuario. Así que básicamente te permite tener algo adjunto a tu página o aplicación que los usuarios pueden informar algo que no es incorrecto en el código pero es un error o un problema para los usuarios y su experiencia. Y luego esos se mostrarán al igual que los problemas y errores más basados en el código en Sentry. Pero, y serán igualmente filtrables en todo eso. Pero sí, será una acción iniciada por el usuario a menos que queramos usar IA para ejecutarlo una y otra vez. Bueno, empecé a distraerme con el chat, sigue adelante y refresca esto. Solo voy a refrescar otra vez y voy a seguir adelante y entrar en ¿qué es un guardia de tipo? Bueno, tengo un problema. Bueno, creo que ya apareció. ¿Apareció? Sí, está bien, genial. Y luego aquí lo que veremos es si tal vez refrescamos de nuevo, 32, oh, espera, ¿era este el mismo? Este era el mismo, ¿no? Bueno, déjame volver atrás. Así que la utilidad de las etiquetas personalizadas es particularmente en la búsqueda, así que puedes buscar por operación es, ¿qué dijimos, actualización, verdad? Que aún no lo ha activado, así que refresca de nuevo. Bueno, aquí está, así que operación de actualización. Así que esto solo está mostrando los errores que no están resueltos donde la operación fue de actualización, y puedes ver que si quitamos este, entonces todos los errores aparecen. Si abrimos este donde sí agregamos la operación, entonces la etiqueta también aparecerá aquí. Aquí mismo, así que operación de actualización. Y si retrocedemos a través de los eventos anteriores, puedes ver que esos no tienen esa etiqueta, por lo que solo se actualizará a las etiquetas que están asociadas con esos eventos particulares. Y de nuevo, esto es particularmente útil para si tienes una etiqueta personalizada y luego necesitas compartirla, o lo siento, necesitas filtrar por esa etiqueta en particular.

Bueno, lo primero que haremos Bueno. Así que en resumen, prácticamente lo que hemos hecho es configurar Sentry usando el asistente, una línea de código, y consiguió que todo funcionara para nosotros. Construimos, lo probamos, creamos un error, lo vimos, nos aseguramos de que los mapas de origen se subieran realmente la segunda vez. Se habría subido la primera vez si no hubiera eliminado el archivo Sentry Cli RC. Así que nos aseguramos de que se actualice, lo ejecutamos de nuevo, y vimos que ahora éramos capaces de ver un rastreo de pila. Luego aplicamos, o lo siento, agregamos contexto de evento, específicamente la dirección de correo electrónico del usuario, y etiquetas personalizadas, específicamente qué operación estábamos tratando de lograr, cuando ocurrió el error y notamos que los errores dentro de Sentry, los eventos específicos, tienen esa información adicional si se agregó después del hecho.

Bueno, vamos a tomar un breve descanso, unos cinco minutos, así que 9 0 8, si estás en el horario del Pacífico, que ninguno de ustedes está. Así que cinco minutos, ocho minutos después de la hora, digamos eso. Siéntete libre de seguir haciendo preguntas aquí, voy a dejar de compartir mi pantalla. Y Lazar se va a preparar con la suya, sí, una ventaja de Sentry también específicamente es que es de código abierto es que tenemos un montón de integraciones en general. Y algunas de esas son nuestras, algunas de esas son en asociación con nosotros, y algunas de esas son simplemente porque somos de código abierto y la gente puede hacerlas. Sí, y puedes hacer alertas en Slack, Discord, Teams, etc., pero también puedes hacer integraciones con Jira y GitHub y Asana, si usas esos para la gestión de proyectos más. Bueno, voy a pasarle la palabra a Lazar y voy a llenar mi agua. Ahí tienes. Bien, comencemos. Entonces, como mencionó Sarah, vamos a hacer tres lecciones más hasta el final de esta masterclass. Así que la primera es que vamos a configurar alertas y asignaciones de problemas. Luego vamos a hacer un poco de seguimiento distribuido. Vamos a explorar cuáles son los beneficios del seguimiento distribuido y cómo configurar el seguimiento distribuido en Next.js. Luego, al final, vamos a hacer una rápida revisión de la repetición de sesión. ¿Qué podemos obtener de la repetición de sesión? Y como, ¿cómo puede la repetición de sesión ayudarnos a debug más rápido, etc.? Así que sí, vamos a verlo. Alertas y asignaciones de problemas. Vamos a hacer las asignaciones de problemas primero

O ella me va a molestar. Así que lo arreglaré al final del día. Pero no queremos que eso suceda. Si esto ocurrió en mi parte del código, debería ser responsable de eso. No podemos dejarlo al azar. Así que para eso, y esto no es algo específico de Sentry, un problema específico de Sentry, Sentry simplemente lo soporta. Tenemos propietarios de código.

Entonces, por ejemplo, si vas a tu configuración en tu organización, vas a los proyectos y aquí está el React Advanced London. Por cierto, si necesito hacer zoom, avísame. Vale, lo veo perfectamente bien aquí, pero si es demasiado pequeño para ti, avísame. Aquí, déjame aumentarlo un poco. Ahí vamos. Entonces, reglas de propiedad. Estas reglas son solo texto plano. Y lo que básicamente significan es que cada vez que ocurre un error que satisface esta regla específica debería ser asignado automáticamente a esta persona específica. Correcto, así es el archivo de propietarios de código de GitHub. Si por ejemplo, es exactamente el archivo de propietarios de código de GitHub. Si conoces a los propietarios de código de GitHub, pueden ser añadidos manualmente. Así que si hago clic en leer, editar reglas, aquí tienes un ejemplo de cómo se ven. Voy a hacer zoom para que puedas ver más. Por ejemplo, si el error ocurre en esta ruta, así que fuente / vistas / checkout, yo soy responsable de eso. O por ejemplo, la URL, ¿verdad? Si está en / checkout, tal vez eso es como una solicitud de API. Ponme en eso. O por ejemplo, una etiqueta específica está adjunta a ese error. Por ejemplo, si la etiqueta de transacción es / checkout / página. De nuevo, eso soy yo. Porque por ejemplo, soy responsable del módulo de checkout o cualquier cosa que tenga que ver con los checkouts, ¿verdad? Soy un experto en checkouts. Si hay errores, me pertenecen, ¿verdad? Necesito resolver mis propios problemas y errores, lo siento. Así que, asignarlos automáticamente a mí. Básicamente podemos hacer esto ahora. Volver a Problemas y por ejemplo, si este error, como podemos ver, no está asignado, ¿verdad? Nadie es responsable de arreglar esto, aún no. Pero si hago clic puedo asignar manualmente a cualquiera de los miembros del equipo. Pero, podemos crear una regla solo para este error específicamente. Así que si hago clic en la configuración aquí, el ejemplo, como puedes ver, vemos la misma pantalla, ¿verdad? Pero esta vez, fíjate, el ejemplo, la sugerencia o este problema involucra este archivo específico. Correcto, eso es lo que podemos hacer. Podemos tomar estos y podemos ponerlos aquí en las reglas de propiedad y tal vez hay un botón de guardar. Sí, hay un botón de guardar escondido abajo, podemos simplemente pulsar el botón de guardar y estamos bien. Puedes hacer eso. Puedes usar comodines, como puedes ver, como estrella, por ejemplo, / hook / estrella, cualquier cosa que esté dentro de los hooks, como soy responsable de todos los hooks, dame todos los errores de los hooks, ¿verdad? Pero también hay una cosa más interesante es, como mencioné, el archivo de propietarios de código de GitHub, que muchos proyectos tienen. Nosotros también lo soportamos, así que si vamos a la configuración del proyecto y reglas de propiedad, hay un botón llamado importar propietarios de código. Y para que podamos hacer eso, sí, necesitamos una integración de GitHub. Y ahora vamos a entrar en las integraciones.

Así que las integraciones viven en, ahí vamos, viven en la organización. Así que una organización de Sentry puede tener integraciones instaladas, no proyectos, ¿vale? Y esas integraciones, como puedes ver, incluyen Slack. Pero básicamente, las integraciones te dan más superpoderes y te permiten conectar Sentry y tus datos de Sentry y alertas y todo con otros servicios que podrían ser relevantes para tu operación, ¿verdad? Y un usuario nos preguntó si hay alertas en Slack, ahí vamos. Tenemos una alerta de Slack. Y en el lado derecho, también puedes ver lo que trae esa integración o para qué sirve. Chat para reglas de alerta, etc. Hay un GitHub y vamos a hacer esto ahora mismo. Es para la gestión de código fuente, seguimiento de problemas, enlace de seguimiento de pila y propietarios de código. Déjame mostrarte el enlace de seguimiento de pila rápidamente porque podrías notar eso. Pero si vamos al error, ves esto, añade la integración de GitHub o GitLab para saltar directamente a tu código fuente. Así que básicamente puedes hacer clic y abrirá ese archivo para nosotros. Eso también es lo que trae la integración de GitHub. Y por supuesto los propietarios de código, que vamos a hacer ahora. También hay una integración para AWS Lambda, Bitbucket, hay una de Discord. Incluso si usas Discord, si no usas Slack, puedes recibir tus errores en Discord, Grafana, Teams, ahí vamos, Vercell para despliegues. Hay un webhook personalizado. Básicamente puedes enviar un webhook para cada una de tus alertas. Y si no usas ni Discord ni Slack, pero algo tercero, como ni siquiera Microsoft Teams, sí, puedes tener una alerta de webhook. Y estos son los, hay muchos, como puedes ver, hay muchas integraciones. Jenkins, Travis CI en Twilio, Trello, todo, ¿verdad? Así que vamos a configurar la integración de GitHub. Como mencionamos, usamos la integración de GitHub para la gestión de código fuente, seguimiento de problemas, enlace de seguimiento de pila y propietarios de código. Estos dos son especialmente geniales. Así que hagamos clic en añadir instalación. Déjame iniciar sesión. Por supuesto, voy a llevar esto aquí. Odio tener que iniciar sesión cada cinco minutos, pero eso es seguridad. Bien, aquí está lo que vemos. Aquí está la aplicación de GitHub de Sentry.

Y si hacemos clic en configurar, nos preguntará ¿dónde quieres instalar? Tomemos mi cuenta. Y solo puedo seleccionar el repositorio de tarjetas didácticas en el que estamos trabajando, ¿verdad? Así que haremos clic en instalar. Ahí vamos. Así que ahora tenemos la integración instalada y autenticada con mi cuenta de GitHub. Así que puedo hacer clic aquí y añadir el repositorio. Añadir el repositorio es importante porque eso es lo que trae todo el contexto a Sentry. Así que los errores y como los mapas de código y todo funcionan con eso en mente. Así que añadimos mi repositorio, el repositorio de tarjetas didácticas. Y lo que necesitamos hacer es añadir el mapeo de código.

El mapeo de código básicamente es cada vez que ocurre un problema, ¿cuál es la carpeta raíz, verdad? La carpeta raíz donde todo se informa. Así que en nuestro caso, vamos a conectar el react-advanced. De Londres con nuestro repositorio de tarjetas didácticas. Así es como unimos estos dos, ¿verdad? Este es el repositorio de GitHub. Este es el proyecto Sentry, pero estos son los mismos. La rama no es master, es main por defecto. La raíz de la traza de pila es solo un punto. Es la raíz, así que nuestro proyecto es simple. Si por ejemplo, esto fuera parte de un monorepo, tendrías que hacer, no sé, fuente / paquetes / etcétera, etcétera. En ese caso, la raíz, la raíz de la traza de pila no va a ser solo un punto. Pero en nuestro caso es un proyecto simple, así que solo haremos dos puntos. Ahí vamos. Así que si vamos a los proyectos ahora, vamos a React Advanced Londres y reglas de propiedad, podemos importar nuestros Propietarios de Código. Y déjame mostrarte cómo se ve ese archivo de Propietarios de Código. Vamos a .github y Propietarios de Código. Esto es básicamente eso. Cualquier cosa, déjame acercar un poco más, cualquier cosa que ocurra dentro de tarjetas didácticas, y eso puede ser varias cosas, como puede ser la página de tarjetas didácticas, puede ser la API de tarjetas didácticas, puede ser el hook de tarjetas didácticas. Estoy trabajando en las tarjetas didácticas, asígnamelas. Y este es mi nombre de usuario de GitHub. Cualquier cosa que tenga que ver con categorías, asigna a Sara porque ella está trabajando en las categorías, yo estoy trabajando en las tarjetas didácticas, ¿verdad? Así que ese es el archivo de propietarios de código. Así que vamos a importar esto y ver qué pasa. Aplicar un mapeo de código existente. Ahí vamos, ya configuramos eso. Aquí está el mapeo de código. Encontró con éxito el archivo de propietarios de código, así que simplemente lo añadimos. Y ocurre un error. Hubo dos problemas de propiedad con Sentry en la última sincronización con el archivo de propietarios de código. Veamos qué es eso. Los siguientes nombres de usuario no tienen una asociación en la organización Sentry dev rel. Eso es el mapeo de usuario. Así que hicimos los mapeos de código, eso está bien, pero también necesitamos hacer mapeos de usuario porque ¿quién es Nikola Flazor, quién es Dr. Gattles, ¿verdad? No lo sabe. Así que podemos hacer clic en configurar mapeo de usuario, o simplemente podemos volver a la configuración, integraciones, GitHub, configurar, y ahí están los mapeos de usuario. Y ahora vemos una tabla donde Sentry dice, oye, vi a estos dos usuarios. ¿Quiénes son estas personas en Sentry? ¿Verdad? En la organización Sentry, porque si necesito asignar a Dr. Gattles, ¿quién es eso en términos de los usuarios de Sentry, ¿verdad? Así que podemos configurar ese mapeo de usuario aquí. Digamos que aquí está Sarah y aquí estoy yo. Genial, así que si vuelvo ahora a las reglas de propiedad, ahí vamos. Vemos las dos reglas de propiedad listas, ¿verdad? Todo lo que tiene que ver con tarjetas didácticas, soy responsable de eso. Cualquier cosa que tenga que ver con categorías, Sarah es responsable de eso. Genial, así que veamos cómo funciona esto. Estos ya están aquí, ¿verdad? Así que son errores existentes y no se asignarán automáticamente. Así que simplemente los voy a eliminar para que podamos empezar con una pizarra limpia, ¿vale? Voy a construir la aplicación, y debería haber hecho esto antes de esto, pero aún así, PMPM build, PLPM start. Esto va a ejecutar la aplicación. Ahí vamos, localhost 3000, estamos listos. Así que si vamos aquí y pulsamos actualizar, ahí está nuestra aplicación. Vamos a activar algo. Vamos a activar el error de tarjetas didácticas. Voy a limpiar todo esto, voy a eliminar la pregunta, y ocurre porque, déjame mostrarte por qué, y como, ¿cuáles son los puntos donde tenemos esto? Hooks / tarjetas didácticas. Hay un punto donde yo, hay un remove, ¿dónde está, en realidad déjame decir esto. Sí, este es en realidad el archivo de la página, manage tarjetas didácticas slot. Así que páginas manage tarjetas didácticas slot, ahí vamos en realidad, no era el hook, va a apuntar, va a hacer el error en el hook, pero aquí está el error, ¿ves eso? Básicamente, esta es la función de actualización de manejo. Así que cuando hago clic en actualizar y no compruebo que la longitud de las preguntas es cero, básicamente la entrada está vacía, no me va a impedir actualizarlo, pero tengo una comprobación en el backend para decir, ¿está vacía la pregunta? No me importa, mala solicitud. ¿Verdad? Córtalo. Así que eso es lo que vamos a causar a propósito. Así que estoy actualizando la tarjeta didáctica con la pregunta vacía. Haz eso, ahí vamos, las solicitudes, el servidor respondió con 400 malas solicitudes, y vemos tres solicitudes de sobre de nuestro punto final a sentry, de nuestro navegador a sentry. Estos son básicamente, estos son básicamente los soplones. Está bien, así que hay una carga completa que explica y describe todo lo que ocurre. ¿Verdad? Aquí está el SDK, aquí están todos los datos, aquí está todo el entorno.

Como pueden ver, el entorno está configurado para producción porque no estamos ejecutando un modo de desarrollo en este momento. Pero todas estas cosas, no vamos a molestarnos en leer, por supuesto. Pero sí, como pueden ver, ya está ahí arriba. Así que si volvemos y pulsamos actualizar, deberíamos ver ese error aquí.

¿Y quién es este? ¿Quién es este tipo? ¿Lo ven? El asignado soy realmente yo. No tuve que hacer clic. Esa es la función de asignación de código que hace su trabajo automáticamente para nosotros. Hagamos otro. Hagamos que las categorías fallen ahora para ver si se le asignará a Sarah. Pulsamos esa actualización allí, vamos, mala solicitud. Así que no pudimos actualizar la categoría. Por supuesto, la razón es una mala solicitud. Vemos las solicitudes de sobre. Hermoso. Volvamos ahora y veamos. Oh, ya estamos ahí, ahí vamos. Vean, Sarah Guttles, regla de propiedad de código coincidente. Sí, incluso te decimos, ¿por qué está asignada Sarah? Porque tienes una regla de propiedad de código. Hermoso.

Muy bien, así que ahora cuando Sarah y yo, es lunes, deberíamos estar trabajando y simplemente sintonizamos, veamos qué ha estado pasando durante el fin de semana. Uno de nosotros probablemente hizo un despliegue el viernes y sabemos cómo termina eso. Así que sí, simplemente voy a iniciar sesión y ver qué hay en mi menú, básicamente, y sí, esto es algo que arreglo ahora. Exactamente. Así que sí, ahí vamos, esta es la regla de propiedad de código. Podemos hacer eso manualmente si quisiéramos especificando una ruta o una URL o etcétera, escribiéndolo manualmente o si usamos el archivo de propiedad de código para GitHub. Así que cuando se abre un problema y se auto-asigna en GitHub, también podemos reflejar eso, traer eso a Sentry y hacer lo mismo aquí. Esa es la idea general. Así que eso fueron las asignaciones de problemas.

Ahora veamos las alertas porque creo que las alertas están en el núcleo de lo que es Sentry. Las alertas significan correos electrónicos, las alertas significan mensajes de Slack con una etiqueta para que realmente recibas alertas. Recibe una notificación. También significan Discord. También significan, como vieron, no sé, webhooks, etcétera. También significan múltiples correos electrónicos como yo, Sarah y el resto del equipo. Inmediatamente ponte en pie y tenemos que resolver esto. Así que esas son alertas. Cuando Sarah creó el proyecto, dijo, dame alertas para cada problema. Y si estás trabajando en un proyecto que está a cierta escala, eso podría no ser tan productivo, ¿verdad? Hablamos con un ingeniero aquí en el chat. Estaban recibiendo muchos errores. Algunos de ellos eran realmente antiguos. Algunos de ellos no eran relevantes porque el usuario usó una extensión de Chrome que pintaba el sitio web de oscuro siempre. Y esa extensión falló y la extensión va a causar un fallo en la consola y Sentry lo va a recoger y eso no es tuyo para arreglar. Por supuesto que puedes ignorarlos, pero lo que también puedes hacer, lo que también puedes hacer es configurar alertas inteligentes para ellos. Y tal vez no en todos, ¿verdad? Así que si vamos a la página de alertas y pulsamos crear alerta, nos encontraremos con una pantalla interesante. Así que vamos a repasar todas las opciones. Hay tres categorías de errores, de alertas. Lo siento, podemos crear una alerta basada en errores. Podemos crear una alerta basada en sesiones, en sesiones de usuario, o podemos crear una alerta de performance. Así que por ejemplo, la alerta de problemas, se va a activar una alerta cuando el nivel del evento es fatal y definimos qué es fatal, ¿verdad? O por ejemplo, cuando un problema se ha visto cien veces en los últimos dos días, o en los últimos cinco minutos. Por ejemplo, si ocurren muchos errores, queremos ser notificados. Si ocurre uno o dos errores, tal vez no, es un caso extremo. Pero si podemos ver que ocurren muchos errores en un cierto tiempo, sí, por supuesto, hay el número de errores, por ejemplo, 10K errores en cinco minutos, algo está realmente mal. No es un caso extremo, es realmente un error en nuestra aplicación. Y así es como podemos definir eso. Crearemos una de todos modos, pero vean, tienen el estado crítico, por encima o por debajo o igual, etcétera. Definen cuál es el umbral. Hay la user experience, usuarios experimentando un error. Por ejemplo, tal vez no 100,000 errores en cinco minutos porque eso puede ser, no sé, eso puede ser un DDoS, ¿verdad? Causando el error, pero ¿qué pasa con los usuarios? 100K usuarios experimentando un error en una hora. Eso significa que un gran porcentaje, no sé, de nuestros usuarios están experimentando un error. Así que definitivamente hay algo mal con nuestra aplicación. Esos son los usuarios. En el lado de las sesiones, tenemos la tasa de sesiones sin fallos y la tasa de usuarios sin fallos. Así que un usuario es un usuario. Un usuario puede tener múltiples sesiones, y ahí está una sesión, ¿verdad? Así que la tasa de sesiones y la tasa de usuarios, eso corresponde a eso. Cuando la tasa de sesiones sin fallos está por debajo del 98%, envía una notificación de Slack al equipo. Eso significa que el 98% de las sesiones no están experimentando un error. Pero eso no es el 100%, ¿verdad? El 100% significa que nadie experimenta un error, pero como el 95 o tal vez el 80, si eso es como el 80, uno de cada cinco usuarios están experimentando errores. Podemos usar las alertas de sesiones para ser notificados sobre eso. Y luego tenemos performance, y estas son realmente divertidas. Empezamos desde arriba.

Tenemos el rendimiento. El rendimiento es básicamente cuántas transacciones están ocurriendo o se están reportando en un cierto marco de tiempo. Por ejemplo, en una página clave, las transacciones en una página clave exceden cien mil transacciones por minuto, ¿verdad? O caen por debajo de un umbral. Por ejemplo, si nuestros usuarios están yendo regularmente a la página de configuración y de repente dejan de ir a la página de configuración, puede significar dos cosas. O bien ya no están interesados en la página de configuración o algo les impide ir a la página de configuración, ¿verdad? Así que no deberíamos ser alertados. Si no pueden ir allí y deben ir allí o deberían ir allí, ese es el punto de la aplicación, deberíamos ver eso. Y eso es como podemos usar el rendimiento para alertas para esos casos.

Luego tenemos las duraciones de las transacciones. Por ejemplo, una transacción específica es más lenta que tres segundos. Sabemos que debería tardar unos dos segundos. Así que tomaremos como añadiremos un segundo más por buena medida. Pero si es más largo que tres segundos, eso significa que algo va mal, ¿verdad? O ¿cuál es la respuesta del percentil 75? ¿Es más alta que 250 milisegundos? Victoria preguntó, ¿qué se considera una transacción? La transacción es ese sobre que acabamos de ver, ¿verdad? Eso es el SDK de Sentry, enviando data al back end a Sentry.

Bien, el Appdex. Sí, ahí vamos. El Appdex, así que esta métrica es la miseria de la aplicación. La miseria del usuario básicamente. Es como una proporción de, como pueden ver aquí, solicitudes satisfactorias, tolerables y frustradas en una transacción específica o un endpoint. Así que si eso cae, tenemos que hacer algo al respecto, ¿verdad? Eso significa que los usuarios en general están teniendo una mala experiencia en ciertas páginas. Y se registra automáticamente. Así que por ejemplo, si algunas de estas cosas no las entienden, como cuál es el número, tienen un pequeño gráfico en la parte superior. Así que este es el Appdex. Es uno. A veces es 0.93, a veces es 0.88, 0.639. Si esto no es suficiente para nuestros standards, vamos a crear una alerta que sea como 0.7, ¿verdad? Así es como puedes, así es como Sentry puede ayudarte a entender cuál es el valor que está en uso normal, básicamente.

Luego tenemos las tasas de fallos. Las tasas de fallos para un endpoint importante, que es del 10%, eso significa que es desde el otro lado. Así que por ejemplo, teníamos la sesión, ¿verdad?, o la duración de la transacción, pero ahora también tenemos el fallo, no es sólo largo, simplemente falla. Hay eso y también hay tres alertas de web vitals para el LCP, el FID y el CLS, porque mientras estamos aquí, también estamos capturando estos para ustedes y los estamos enviando a Sentry. Así que pueden ver cómo van sus CLS, FID, LCP. Y también hay otros web vitals que estamos registrando para que puedan verlos. Pueden crear una alerta sobre ellos también. Así que por ejemplo, si el CLS supera el 0.1, necesitan trabajar. Si supera el 0.25, están en la zona de peligro. Tienen que hacer algo al respecto. Así que pueden crear una alerta y les avisará cuando el CLS supere el 0.25 y dónde, qué página está luchando con el CLS. Y al final del día, también podemos crear algunas métricas personalizadas basadas en otros datos de eventos data, como datos de problemas, como hay una etiqueta o hay una carga que transacción y etcétera. Así que estas son todas las alertas.

Lo que puedo hacer ahora, vamos a crear un número de errores. Bien, sólo para demostrar esto, vamos a crear un número de errores. Podemos ver que tenemos cero porque borré todo, ¿recuerdan? Así que cero número de errores. Voy a establecer el intervalo de un minuto. Y ahí vamos. De hecho, tenemos el uno, sí, el que yo activé. El umbral, estos son los eventos y no va a estar en las tarjetas de memoria, va a estar en el React Advanced London. Ahí vamos. Estos son los errores. Podemos elegir el entorno de producción o testing o cualquier otro entorno que tengamos. Y por supuesto, este es el error del evento o el tipo de evento. Vamos a mantener esto como un error. El umbral puede ser estático o un cambio porcentual. Nos quedaremos con estático, pero también puedes, como, 10 veces más alto o más bajo en comparación con el período anterior. Y el período es como un minuto. Así que nos quedaremos con estático. Y ahora podemos definir el umbral. ¿Qué es crítico? Crítico es como cinco errores en un minuto. Advertencia es como tres errores en un minuto. Y por supuesto, resuelto es automático, pero también podemos poner cero. Si no hay errores, entonces está resuelto. Luego definimos las acciones. Así que por ejemplo, para un estado crítico, enviar un correo electrónico a alguien puede ser a mí, por ejemplo. O al equipo, ¿verdad? También puede ser a otro miembro. Así que podemos mantener a Sarah, ¿verdad? Sí. Básicamente puedes hacer eso. Cuando tienes más integraciones como Slack, etc., tendrás más opciones aquí. No las añadí, pero básicamente van a estar aquí. Y la propiedad de quién es la propiedad es, por supuesto, el equipo de Sentry dev rel. Guardar la regla. Bien, sí. Nombre de la alerta. Olvidamos lo más importante.

Simplemente lo llamaremos pruebas. El nombre más apropiado. Así que tenemos los umbrales aquí. Como pueden ver, la línea roja y la línea amarilla están aquí. Están estas cosas. Vamos a provocar errores ahora. Vamos a provocar muchos de esos. Así que aquí está uno, dos, tres, cuatro, cinco. Voy a golpear uno más o unos pocos más por si acaso. Así que veamos qué sucede. Deberíamos empezar a ver errores. 20 errores. Bueno, lo siento, Sarah. Esas eran las categorías. Tendrás, 28 errores. Vale. Así que Sarah debería recibir un correo electrónico diciendo, oye, estás fallando. Tienes que hacer algo al respecto. Ahora mismo es- Definitivamente tengo un correo electrónico. Sí. Ahora mismo está por debajo de tres. Sí, como pueden ver, todavía no he configurado, como crunched los números. ¿Deberíamos mostrar el correo electrónico rápido? Sí. Puedo mostrar uno de los correos electrónicos. ¿Es este el correo electrónico correcto? Creo que sí. Así que pueden ver, me da mucha información aquí mismo dentro del correo electrónico, algunas de las etiquetas, etc. Puedo silenciar esta alerta en particular directamente desde mi correo electrónico. Puedo abrirlo en Sentry. Incluso puedo configurarlo en Slack directamente desde aquí. Así que esto me llevará a la configuración de integración y me permitirá añadir un espacio de trabajo justo desde el correo electrónico. Genial, gracias Sara. Así es como se ve, así que volvamos. Ahí vamos. Esto va a cambiar. Así que envió un correo electrónico, pero todavía no está allí. Esto va a cambiar a que el estado será crítico porque hemos desencadenado muchos correos electrónicos, ¿verdad? Ahí vamos. Ya pueden ver, déjenme solo, digamos los últimos siete días, si vamos las últimas seis horas, podemos ver esto un poco mejor. ¿Verdad? El umbral crítico está aquí. Solo necesita actualizar el estado, pero así es como configuramos las alertas. Así es como podemos, como, alertarnos por cosas muy críticas o por caídas de performance en nuestra aplicación.

¿Qué sigue? Trazado distribuido. Bien, mi favorito. Así que trazado distribuido. Esa es una herramienta, esa es una técnica de depuración que te ayuda a debug problemas de performance o como errores extraños que están ocurriendo en tu aplicación, tal vez como, ya sabes, aplicaciones de condición de carrera, etc. No es como, está bien, hay un fallo. Fue en esta línea. Ve a arreglarlo. No siempre es tan obvio. A veces necesitas rastrear el flujo de operaciones para ver qué pasó antes de que ocurriera el error real. Y la respuesta va a estar allí, en el contexto anterior. Así es como podemos usar el trazado distribuido.

Esa es una técnica interesante y comienza, por ejemplo, puede comenzar en el lado del cliente. Así que estamos comenzando una traza. Una traza contiene spans. Estos spans saben cuándo comienzan y cuándo terminan. Saben que tienen como un título. Tienen toda su información como etiquetas, etc. Así que si abro mi gancho de tarjetas de memoria y encuentro la función de fecha, ahí vamos. Aquí es donde tengo esto configurado. Así que, primero necesito obtener el alcance actual y luego voy a crear una nueva transacción. Aquí está esa cosa de transacción de la que hablamos en el chat. Estoy creando una nueva transacción llamada actualizando tarjetas de memoria. Estoy haciendo tarjetas de memoria. Podría añadir más cosas a esto si quisiera. Lo dejé así. Y luego vamos a vincular esa transacción al alcance actual. Así que lo que sea que ocurra dentro de este alcance va a estar ligado a esta transacción. Luego podemos crear un nuevo span de marca que es sólo como una pequeña bandera haciendo las solicitudes de API. Correcto, esto no tiene tiempo. Así que estamos comenzando el span hijo y luego lo estamos terminando inmediatamente. Para continuar porque estamos haciendo una llamada a la API, estamos comenzando la traza desde el lado del cliente, y ahora vamos a crear, como hacer una solicitud de API y proceder a rastrearla en el backend en la API. Necesitamos continuar esa traza de alguna manera. El SDK en CentrisCase va a hacer eso por ti automáticamente. Ni siquiera necesitas hacer esto para ser honesto. Sólo quería hacerlo obvio para todos ustedes. Pero sí, esto va a suceder automáticamente para ti. No tienes que hacer eso. Pero lo que sea, lo que pasa es que estamos estableciendo un encabezado CentryTrace, que es básicamente una cadena de tres valores separados con un guión. Tienes el ID de la traza y el ID del span padre. El tercero es si es, cuál era el nombre, proceso o no. Pero sí, hay como un 01, etc. No necesitas preocuparte por eso. Usualmente siempre son sólo dos. Así que esto nos dice, esto le dice al backend, hey, aquí hay una solicitud que tiene un CentryTrace. Eso significa que el cliente o quien sea que fuera comenzó una traza en el lado del cliente, en su lado. Y si me están dando el CentryTrace, necesito continuar eso, ¿verdad? Así que voy a analizar el ID de la traza. Voy a agarrar la transacción, el, lo siento, el ID de la traza, crear un alcance, vincular el alcance a esa traza. Y luego voy a obtener el ID del span y el próximo span que voy a crear va a ser el span hijo de ese. Así es como podemos continuar el trazado en el backend. Todo va a ser mucho más claro cuando lo veas en acción. Así es como estamos estableciendo el encabezado y estamos disparando las solicitudes. Y algunas, ya sabes, cosas suceden en el backend y luego tenemos un resultado de vuelta. Si el resultado está bien, necesitamos mutar la caché. Bien, veamos. Aquí está el inicio de la mutación de la caché, mutar el primero, mutar el segundo, fin de la mutación de la caché. Podríamos hacer esto sin spans de marca, sólo sentí que iba a poner spans de marca. Pero puedes crear un span. Y así puedes hacer como, aquí está el span serializado. Esta no es una marca de span, esta es un span serializado. La operación es realmente válida. Y lo que esto hace es básicamente que comienza aquí. Lo que sea que ocurra entre esto y el final se mide en tiempo. Y así es como podemos medir cuánto tiempo ocurre la serialización en el lado del cliente. Tal vez ese sea el error, ¿verdad? Tal vez eso es demasiado largo. Así que queremos medir eso. Y luego terminamos el span, porque si no lo hacemos, no va a ser incluido en la transacción. Así que no va a ser enviado al backend. Así que no va a ser, no vas a poder ver todos estos hermosos data. Y luego terminamos la transacción. En el caso de que ocurra un error queremos crear un span de error, ¿verdad? Falló al actualizar las tarjetas de memoria.

Terminar todo esto, ambos, y luego burbujear el error. Así que esto sucede en el lado del cliente. El punto clave aquí para saber es esta línea aquí, los encabezados de Sentry Trace. Déjame deshacerme de esto. Sí, ahí vamos. Esta línea es importante. Así es como conectamos el frontend y el backend. Y por supuesto esta línea aquí. Porque tenemos una transacción en curso. Obtener otra transacción y luego podemos adjuntar varias cosas a ella. Así que vamos al backend y vemos qué pasa allí. Vamos a ir a api.flashcards.slog.ts. Vale, esto es un manejador de API de Next Reg S. Nada sofisticado, ¿verdad? Tenemos un slog, actualizamos esta tarjeta de memoria específica. Tomamos algunas cosas de la fiesta. Intentamos obtener la sesión. ¿Estamos conectados o no? Intentamos obtener el usuario de esa sesión, etc. Y luego entramos en el manejador. Así que este es el que necesitamos para poner uno. Ese es el de actualización, ¿verdad? Así que en lugar de crear un nuevo alcance. De hecho, sí. Estamos obteniendo el alcance como estábamos en el lado del cliente pero estamos tratando de obtener la transacción de él. No estamos creando una nueva. Estamos obteniendo la transacción en curso. Eso es porque el SDK en el backend, en la API vio que hay un rastro de sentry y ya creó esa transacción para nosotros. Así que sólo necesitamos obtenerla, como dame la transacción, ¿verdad? Así que ahora podemos añadir más cosas. Como ahora podemos pegar más cosas en el backend y enviarlo de vuelta al cliente. Esa es la idea general. Así que aquí está la transacción. Estamos obteniendo las categorías y luego tenemos un chequeo de categoría, ¿verdad? ¿No hay categoría? Sí, queremos establecer el estado a no encontrado y terminarlo. Y devolver un error. No necesitamos cerrar la transacción porque no la creamos. No es nuestra para cerrarla. De nuevo, más comprobaciones, luego dame las tarjetas de memoria o dame, ahora hagamos como un chequeo de tarjetas de memoria. Todas estas cosas. Y luego, sí, al final, no necesitamos terminar nada. Como terminamos la transacción, por ejemplo. Todo está aquí. Así que lo que pasa ahora cuando realmente voy a las tarjetas de memoria y actualizo las tarjetas de memoria. Hola Londres y pulso actualizar. Ahí vamos, tarjeta de memoria actualizada. Vimos la solicitud de red. También está el sobre. Así que veamos. Si vamos a la pestaña de performance aquí, vamos a ver muchas transacciones. No todas estas son creadas por nosotros, por supuesto. Pero luego también Sentry es realmente inteligente y hace muchas cosas automáticamente para nosotros. Así que lo que estoy pensando, queremos ver las transacciones de React advanced Londres en la parte superior y mira esto. Actualizando tarjetas de memoria. Si ves los demás, entenderás que esto, esto es algo más. Esto es mecanografiado. Todo esto es simplemente data aleatoria. Vale, actualizando tarjetas de memoria. Tenemos un evento para esta transacción y ese evento en realidad contiene el trazado. Si abrimos ese evento, y voy a colapsar esto ahora. Vamos a ver, ¿qué es esto? No, eso no es. Vamos a ver, eso no parece el evento que estoy tratando de demostrar aquí. Creemos uno nuevo. Dioses de la demo, por favor ayuden. Creemos uno nuevo. No sé qué pasó allí, pero ya tenemos algunos data y puedo demostrarlo. Sólo quería mostrar la cosa real. Actualizando tarjetas de memoria. Ahí está el segundo evento. Ahí vamos. No hay errores. Este es el evento o el trazado, básicamente, todo el trazado. De esta lista aquí, déjame acercar para que puedas ver mejor. De esta lista aquí, puedes ver cómo fue el flujo de ejecución. Comenzamos con hacer la solicitud de la API, luego hicimos la solicitud de la API.

Devuelve OK. No fallamos, así que necesitamos mutar la caché. Hay un inicio de mutación de caché. Aquí están las dos mutaciones ocurriendo. Mutar caché, final, y luego serializar respuesta. En el lado derecho, sin embargo, puedes ver cuánto tiempo tomó cada una de esas acciones. Mutar el flashcart/slug tomó 92 milisegundos. Los flashcarts generales tomaron 97 milisegundos. Toda la llamada a la API tomó 600 milisegundos. Si esto fuera cinco segundos, si esto fuera cinco segundos sería como, vale, sabemos qué está mal, ¿verdad? Sabemos que esta llamada a la API está mal, pero podemos profundizar más. Como si hacemos clic en el más, básicamente vamos al backend y vemos qué pasó en el backend ahora, ¿verdad? Entonces, usuario encuentra único, y esto es db.scl.prisma. ¿Adivina qué? Si estás usando Prisma, existe una integración existente enviada al backend. Integración sentry.server.config. Ahora verás esta última línea. Esto significa que cualquier consulta de Prisma hacia nuestra database va a ser automáticamente instrumentada para nosotros. No necesitamos hacer nada. Y por eso obtenemos estos automáticamente, ¿verdad? Vimos que primero intentamos encontrar al usuario en la sesión. Luego tenemos la categoría y luego la comprobación de la categoría. Luego tomamos las tarjetas de memoria de la database. Luego hicimos una comprobación de tarjetas de memoria. Y luego al final, hicimos la actualización. Así que mirando este gráfico, podemos ver que la actualización tomó más tiempo. 386 milisegundos. ¿Es eso demasiado? ¿Es eso muy poco? No lo sé. Depende de cuál sea tu database. ¿Es serverless o no lo es? ¿Está dentro de tu, no sé, red Docker o no lo está? Muchos factores pueden afectar el tiempo. Así que 600 milisegundos, en algunos casos, puede considerarse lento. En algunos casos, puede considerarse realmente rápido. Eso depende de ti decidir, ¿verdad? Pero ahora tienes la información. Puedes ver todo el flujo de operaciones. Esto sucedió. Luego esto sucedió. Luego esto causó que esto sucediera, ¿verdad? Todo el flujo de agua. Así que sí. Esto es básicamente trazado distribuido. Y aparte de esto, también obtienes todos los demás data, los detalles del trazado, el sistema operativo, dónde ocurrió, qué pasó, etc.

Muy bien, así que no tenemos mucho tiempo. Así que vamos a demostrar la reproducción de la sesión. Vamos a la reproducción de la sesión. Podemos ver que aquí hay algunas reproducciones de sesión. Pero si fuéramos a configurar esto, tendríamos que ir a sentry.client.config, que es el navegador. SDK, el sitio del navegador, y necesitamos un nuevo array de integraciones que va a tener una nueva integración de Sentry.replay. Y eso es todo. Hay valores que puedes configurar. Reproducir, por ejemplo, en la tasa de muestra de error. Dame todos los errores pero dame solo el 10% de todas las sesiones. Así que, vamos a intentar... ¿Deberíamos activar esto o deberíamos ver... De hecho, veamos este para que no necesitemos ejecutar esto. Aquí está la reproducción. Ahí vamos. Entonces, si doy al play, vamos a ver, primero vemos toda la línea de tiempo. Podemos ver cómo Sarah hizo clic alrededor de la aplicación y en el lado derecho podemos ver las migas de pan, y están resaltadas donde estamos con la ejecución. ¿Ves eso? Entonces, Sarah hizo clic dos veces, ocurrió un problema, recargó la página, navegó dos veces a diferentes tarjetas de memoria, probablemente hizo clic de nuevo. Puedes ver todo. Aparte de la grabación, etc., también puedes ver su registro de consola. Y esto va a ser esta parte aquí. Pero no tenemos ningún inicio de sesión en la aplicación, pero van a aparecer allí. Aparte del registro, también puedes ver toda la red. Y de nuevo, esto es como la pestaña de Red que tenemos en Google Chrome. Pero para recordarte, esto está en producción. Este usuario puede estar en un país diferente, en un dispositivo diferente, no los conoces, no sabes cómo se llaman, etc. Pero es como si estuvieras en la misma sala con ellos cuando ocurre el problema. Puedes ver dónde hicieron clic, cómo usaron la aplicación, puedes ver cualquier registro de consola que ocurra durante la sesión, puedes revisar todos los eventos, y si haces clic en ellos puedes ver, vale, aquí está la solicitud, aquí está lo que el navegador envió, aquí está lo que el navegador respondió, como el tipo, el método, el código de estado, etc. Es como si estuvieras allí. Puedes ver una lista de todos los errores que ocurrieron en esta sesión sola, y por supuesto el trazado. Aquí está. Todo el trazado, comenzando desde incluyendo la recarga. Así que fuimos al servidor, invocamos esta solicitud get, luego hicimos un put, que por supuesto es una actualización de la tarjeta de memoria, luego buscamos un montón de cosas, ocurrió la navegación, hay un middleware siendo golpeado aquí, probablemente para la authentication, hay un evento Dom, básicamente donde el usuario hizo clic, así que puedes ver por ti mismo, una instantánea de memoria del heap y los nodos Dom, tal vez es un problema de memoria, ahí lo tienes, lo averiguarás, y por supuesto las etiquetas, cualquier etiqueta para esta sesión que describa esta sesión de usuario. Lo que también puedes hacer es ir a los problemas y hacer clic en los errores aquí.

O tal vez no fue este. Sí, tal vez borré ese. No debería haberlo hecho, pero sí, si haces clic en las reproducciones aquí, verás esa reproducción. También puedes ir al revés, como, vale, tengo un error, falló al actualizar las tarjetas de memoria, digamos que no tengo idea de lo que eso significa. Es demasiado abstracto para mí. Si quiero ver qué pasa, puedo hacer clic en las reproducciones y veré esa reproducción. Va a enlazar esa reproducción y si hago clic en ella, me llevará a esta pantalla. Así que voy a ver lo que el usuario estaba intentando hacer que causó ese error de no poder actualizar las tarjetas de memoria. Así que diré, vale, ahora lo entiendo. Puedo ver que el encabezado no se está enviando porque puedo ver los encabezados de solicitud, etc., ¿verdad? Eso es lo que quiero decir con... Ahí vamos, sí. Hay muchas cosas, pero sí. Eso es la reproducción de sesión. Así es como la reproducción de sesión puede ayudarte a depurar tus errores o ver cualquier problema de rendimiento y sí, es como estar en la sala con el usuario cuando ocurre el error. Solo tenemos el resumen y estamos apurados con el tiempo, ¿verdad? Lo estamos, así que creo que no, estuvo genial. Creo que muchas personas hicieron preguntas en el chat así que me alegra que lo hayas hecho. Solo un par de cosas. Solo un rápido, rápido, rápido resumen. Puedes configurar tu proyecto en Sentry creando un nuevo proyecto, ejecutando el asistente, configurando los mapas de origen si no usaste el asistente y luego añadir contexto y etiquetas personalizadas. Hemos enlazado todos los documentos aquí y compartiré el enlace contigo en un momento y luego puedes configurar las alertas y las asignaciones de problemas para hacerlo más útil para ti y tu equipo y luego usar algunas de las increíbles características como el trazado distribuido y la reproducción de sesión para profundizar en los problemas y ver realmente lo que los usuarios están experimentando. Si usas este código, react-advanced-ldn-2023 y este código QR, obtienes tres meses gratis con Sentry. Así que siéntete libre de probarlo. Ha habido un par de otras preguntas. Así que sí, tenemos un canal de YouTube, lo compartiré contigo en el chat ahora mismo. Lo estoy haciendo. Y luego, oh gracias. Y luego también solo una nota rápida, también tenemos un tenemos que usar las discusiones de GitHub. Así que estas son nuestras discusiones para el principal GitHub de Sentry. Para cada uno de nuestros SDKs, que también son de código abierto, tendremos discusiones similares, pero puedes revisar muchas de las discusiones que ocurren aquí, participar en ellas, incluso si no estás contribuyendo a nada de código abierto. Nos encantaría recibir comentarios. Así que por ejemplo, esta es nuestra recopilación de informes de errores iniciados por el usuario, similar a la pregunta que se hizo antes sobre cómo podrías detectar problemas de UX o user experience que están ocurriendo que no son necesariamente problemas de código. Así que Bruno aquí está liderando ese equipo y hay mucha conversación alrededor de cómo sería esa experiencia? Y sí, muchas gracias. Permíteme mover esto de nuevo para que puedas ver todos los enlaces y permíteme darte el enlace a esta presentación aquí. Así que aquí está, ah, ahí estás. Y sí, Suntory está participando en Hacktoberfest, especialmente nuestro repositorio de JavaScript. Así que en realidad tenemos un problema de Hacktoberfest fijado en la parte superior de ese. Te lo compartiré en un momento, aquí está. Así que ese es nuestro Hacktoberfest para el de JavaScript y cualquiera de nuestros otros SDKs que estén participando tendrá un problema similar también. Si tienes alguna otra pregunta, no dudes en ponerte en contacto con nosotros. Esos son nuestros Twitter slash, x-handles. También son nuestros handles en la mayoría de las cosas. Revisa los enlaces en la presentación y gracias a todos por asistir y por hacer tantas preguntas geniales durante todo el tiempo. Lo apreciamos. Nos vemos la próxima vez. Muy bien, adiós. Adiós.