Monitoreo 101 para Desarrolladores de React

Bienvenidos a todos. Hola, ¿cómo están? Si aún no lo han hecho, únanse a Discord. Ahí es donde tendremos preguntas y respuestas. Así que aquí estamos sarah y lazar, vamos a dividirnos, yo haré la primera mitad de la masterclass y él estará en discord y luego intercambiaremos roles, sí, y tomaremos un breve descanso en la marca de una hora y hay un enlace para unirse a discord, pero tenemos un hilo específico para esta masterclass.

Vamos. Bien. Bienvenidos a todos. De nuevo, esta es la Masterclass de Monitoreo 101 para Desarrolladores de React. Soy Sarah. Y yo soy Lazar. Y somos defensores aquí en Sentry. Normalmente estoy en el estado de Washington, pero estoy visitando Toronto hoy para que podamos dar esta masterclass juntos. También vamos a ViewConf el viernes si alguien más va. Así que nos vemos allí.

Hoy lo que vamos a hacer es realmente llevarlos de principio a fin tenemos una aplicación muy simple que hemos construido para tarjetas de estudio, ¿verdad? Así que respondiendo a la pregunta, testing tu conocimiento en cosas. Barajar las tarjetas es un aspecto realmente importante de aprendizaje. Y está construido con XJS. Así que tenemos una aplicación muy básica que está construida. Es de código abierto. Les daremos los enlaces a todo esto, incluyendo los enlaces a esta presentación, que tiene todos los enlaces a todo lo demás. Así que si te falta algo, no te preocupes. Y también los compartiremos en Discord durante y o después. Vamos a guiarte a través de la creación de un proyecto en Sentry, ver esos errores enviados, cómo usar herramientas de colaboración, cómo configurar alertas adecuadas y luego cómo hacer algunas cosas interesantes con cosas como el rastreo distribuido como mencioné, tomaremos un breve descanso en la marca de una hora, pero también siéntete libre de levantarte y tomar un descanso si necesitas y luego de nuevo, cuando uno de nosotros esté presentando, el otro estará monitoreando los chats en discord, así que si tienes alguna pregunta, siéntete libre de hacerla allí

Como dije, este es el repositorio y ya lo he clonado aquí. Estoy usando VS Code. Y, como dije, estoy en la rama sin Sentry. Y eso simplemente significa que aún no he configurado Sentry. Tengo una pequeña nota adhesiva con cosas para copiar y pegar para facilitarlo, así no tengo que escribir cada pequeño detalle, pero cuando empiezas con Sentry, tenemos unos documentos absolutamente increíbles en mi opinión, ¿lo escribí bien? nope no lo hice, ahí vamos, y entonces puedes ir a JavaScript y tenemos algunas como instrucciones de instalación, etc. Y una cosa que realmente me gusta es que tenemos una instalación CLI para Century y un asistente que lo hace muy, muy fácil y directo. Así que antes de ejecutar el asistente, lo que quiero hacer es crear un nuevo proyecto Century. Así puedes ver cómo es desde el principio. Así que estoy en mi cuenta Century. Voy a crear un proyecto, voy a elegir Next.js en este escenario y desplazarme hacia abajo aquí. Ya puedes hacer algunas frecuencias de alerta aquí, alertar en cada nuevo problema. Podemos crear alertas por nuestra cuenta más tarde y luego, como dije, también puedes crear algo donde tal vez esta aplicación es un poco inestable y eso está bien porque no es una aplicación crítica. Así que solo avísame cuando hayan sucedido estas 10 cosas. Versus esto es muy urgente. Si algo sale mal, necesito ser notificado inmediatamente. Entonces podrías querer hacer esto. Vamos a dejarlo en alertarme en cada problema ahora mismo porque solo voy a ejecutarlo localmente y eso estará bien. Vamos a nombrar esto Flashcards React Summit US, y lo vamos a mantener en el equipo Century DevRel. Crearé el proyecto. Además de tener unos documentos bastante buenos, en mi opinión, también tenemos esta experiencia en la aplicación que te permite no tener que salir de la aplicación para averiguar qué documento deberías estar siguiendo. En cambio, puedes seguirlo aquí mismo. Así que voy a copiar esto. Es el mismo que en mi nota adhesiva, lo cual es agradable. Y puedes usar este asistente o puedes hacerlo por tu cuenta si quisieras configurarlo manualmente. Estos son todos los pasos que hará el asistente. Y así puedes seguir allí o, como dije, hacer clic en esta configuración manual y va directamente a cómo configurar esto y qué archivos de configuración necesitas y todas esas cosas buenas. Bueno, vamos a configurar esto. Va a abrir VS Code de nuevo y voy a entrar en mi terminal. Como dije, este es solo el repositorio regular con la rama sin Sentry, y voy a pegar ese comando del asistente. Así que estamos usando npx. Es el asistente Sentry más reciente para Next.js. Me va a hacer un par de preguntas. Así que estamos usando Sentry SaaS para esto. Si no lo sabías, Sentry también tiene opciones de autohospedaje. Sentry es de código abierto. así que puedes ir a GitHub.com slash GetSentry slash Sentry y tenemos un repositorio de código abierto aquí mismo y algunas discusiones realmente geniales sucediendo tanto en No voy a lidiar con eso ahora mismo tanto en el repositorio principal de Sentry como en todos nuestros repositorios para SDKs ofrecemos soporte SDK para no sé cada marco Más o menos. Y constantemente añadiendo más. Vale. Así que, lo tenemos ahí. Y ya tenemos una cuenta Sentry, así que voy a decir que sí a eso, y va a abrir el navegador para que pueda iniciar sesión en Sentry a través del navegador. Un trato muy típico de VS Code. Y luego podemos ir a ver los problemas si queremos. Solo voy a - eso está bien. Podemos - podemos estar aquí. Quiero decir, este no es el proyecto correcto, creo. Así que vamos a entrar en el proyecto correcto. Ahí vamos. Perfecto. Así que este es nuestro panel de Sentry para este proyecto en particular. Y el asistente está configurando todos nuestros archivos de configuración por nosotros. Así que realmente asignaremos este a el proyecto React Summit para que podamos vincular correctamente el proyecto a nuestra base de código aquí. Perfecto. Así que lo que hizo fue añadir nuestro archivo Sentry CLI RC. Añadió algunos archivos de configuración aquí abajo, puedes ver. Y luego modificó algunos de nuestros otros archivos de configuración en nuestro paquete. Esto es solo nuestro git ignore. También añadió un ejemplo de Sentry para que puedas enviar un error de muestra de inmediato si no tenías una aplicación existente que quisieras usar. Y eso fue todo. Eso fue el paso uno. Sentry está configurado ahora. Sentry está configurado ahora. No podía recordar si tenía una diapositiva para eso. No lo pensé. Así que, ya hemos terminado con la primera lección entre comillas. Esto es lo que hace que ser un defensor aquí en Sentry sea bastante difícil porque quieres empezar con Sentry. Es una línea de código en tu terminal, pero en realidad vamos a mostrarte cómo configurar algunas cosas más interesantes aquí. Así que, antes de empezar, quiero hacer un error y mostrar cómo aparece en Sentry antes de hacer cualquier otro cambio. Así que lo que voy a hacer es que voy a ejecutarlo en este, ¿sí? No, no estamos en Source aquí. Así que esta es nuestra tarjeta de memoria. De hecho, te mostraré cómo funciona primero antes de hacer el error para que puedas ver qué es lo que estamos construyendo y ejecutando.

Así que vamos a hacer una construcción rápida. Vamos a hacer una diferencia para este paso. ¿Oh, diff? Sí. Esa es una buena idea. Este es un poco lento. Necesitamos tener música de espera. Música de ascensor mientras construimos. Deberíamos hacer una extensión de VS Code que cada vez que estás construyendo una cierta lista de reproducción de Spotify, porque hay una extensión de Spotify VS Code. Oh, genial. Así que puedes como casar estos dos. Eso sería divertido.

Muy bien, perfecto. Así que eso está construido, y luego vamos a seguir adelante y empezarlo. Y vamos a abrir eso. Así que estamos ejecutando Next.js 13.4, pero estamos usando el directorio de páginas, no necesariamente el directorio de la aplicación. Así es como funciona la aplicación Flashcard. Así que esta es la gestión donde estás creando, modificando o eliminando cualquiera de tus tarjetas de memoria. Puedes ver que se requiere una pregunta y se requiere una respuesta y se requiere una categoría. Así que si intentas eliminar la pregunta y actualizarla, dirá, no, no puedes hacer eso. Por favor, rellena ese campo. Así que si quieres practicarlas, están aquí. Así que te mostrará y luego puedes ver la respuesta y pasar a la siguiente. Vamos a estar principalmente aquí en la gestión porque esa es la parte que tiene entrada de usuario y es más probable que aparezcan errores. Así que el error que vamos a lanzar aquí no está haciendo una comprobación para ver si la pregunta fue introducida en una edición. Parece algo, algún tipo de problema que olvidaría comprobar.

Así que estamos en la gestión y estamos manejando una actualización para esto. Y si quieres seguir o estás mirando el código en tu Visual Studio code o en GitHub, está en el archivo slug TSX bajo flashcards bajo gestionar, bajo páginas. Y lo que voy a hacer es que simplemente voy a comentar este, guardar el archivo. y vamos a seguir adelante y no puedo recordar para p es solo esta vez no solo dev en lugar de build oh sí lo tengo d v oh div sí tal vez nunca he hecho eso antes entonces sí como desarrollar pero es corto def d e v dev dev sí lo siento mi acento es no no no mi cerebro es No creo que siempre construya porque soy demasiado paranoico acerca de no hacer las cosas bien, que siempre construyo y espero los segundos, por eso definitivamente me lo inventé. Cambia el puerto ahora. Está en 3001. Acabo de notar el pequeño mensaje allí. No sé por qué hace eso. Por qué hizo eso. Sí. Esta cosa de Zoom. Ahí vamos. Está en mi camino. Gracias. Pensé que lo había cerrado correctamente. Sí, pero es... ¿Quién sabe? Extraño. OK, así que ahora estamos aquí y esta barra de zoom me está enfureciendo. OK, así que ahora lo que voy a hacer es que voy a intentar eliminar la pregunta y ver si puedo actualizarla y obtenemos un error. Esto es quizás útil, excepto que no lo es, porque puedes ver que el problema fue donde comenté esa línea y el manejo de la actualización. me está diciendo que falló al actualizar la tarjeta de memoria, realmente no me dice por qué falló al actualizar la tarjeta de memoria. Obtenemos algo como... Un débil... Manejo de la actualización. Bueno, eso es útil. Quiero decir, sabes, Chrome está mejorando. No, en realidad estás en modo de desarrollo. Oh, tienes razón. Estoy en modo de desarrollo. Eso es por qué. Así que esto no estaría sucediendo. Mira, por eso hago construcciones. Porque esto no estaría sucediendo si se estuviera ejecutando en producción. No obtendríamos esta bonita vista aquí. podríamos obtener el genial sí como interesante mala petición bien veamos lo que sentry realmente nos ofrece en su lugar así que vamos a seguir adelante y refrescar esto y podemos ver que hubo una liberación y creo que necesitamos venir justo aquí abajo y veremos el error que obtuvimos así que podemos hacer clic en este error aquí mismo. Podemos ver que falló al actualizar, tarjeta de memoria, razón mala petición. Lo mismo que obtuvimos como error de nivel superior en modo de desarrollo. Un par de cosas a señalar antes de que nos adentremos en cuál fue el problema y la información que obtendrías aquí en la parte superior. Tenemos algo interesante. No sabemos qué usuario fue este, Pero sí sabemos que esto fue Chrome, qué versión y qué versión de Mac estoy ejecutando. Obtenemos información adicional como que esto estaba en modo de desarrollo. Así que creo que voy a ejecutarlo no en modo de desarrollo. Definitivamente deberíamos probarlo en modo de construcción. Exactamente. En realidad vemos qué URL.

Entonces es para el, ¿qué es un componente flashcard, que fue el que estábamos, intentando actualizar. Esa es información y contexto útil. Y el archivo fue en realidad el que agregamos más tarde en nuestra lista de verificación.

Podemos venir aquí abajo y podemos obtener este hermoso pequeño rastreo de pila de llamadas, pero todavía no es súper útil. Sería más agradable tener información adicional. Así que configuraremos los mapas de origen aquí en un segundo, pero podemos abrir una repetición. No voy a darte un adelanto de eso porque Lazada lo hará más tarde. Y luego obtenemos estas migas de pan, que en realidad nos envían a través de todo el evento que sucedió este error. Entonces podemos ver aquí toda esta información adicional, seguir adelante. Solo un montón de cosas. Tenemos algunas cosas experimentales como soluciones de IA. Observa nuestro humor. Quizás tengas suerte. Quizás no. Podemos ver cuál es esa solución, sugerencia. No voy a hacer eso ahora. Y luego tenemos toda esta información adicional aquí abajo que te guiaré a través de algunas de las cosas interesantes que están sucediendo allí.

En nuestra pestaña de problemas, podemos ver para un proyecto en particular. También podemos ver problemas en varios proyectos. Entonces, si tienes varios proyectos para la misma aplicación, tal vez los tienes escritos para móvil versus algo más. También podemos ver para todos los entornos, desarrollo o producción. Y luego también podemos cambiar el rango de tiempo. Entonces, si estás buscando algo que sucedió en un rango de tiempo en particular, y hay otros problemas ocurriendo, puedes clasificar eso. Entonces esos son algunos de los conceptos básicos. Pero esto es solo como barrer. Esto es para DevMode, ¿verdad? Entonces básicamente estamos viendo la misma información, o tal vez incluso más, que podemos ver en Chrome. La idea que Sentry quiere resolver es que vamos a usar esto para monitorear errores y performance en producción. Entonces, en producción significa que vamos a capturar los errores y las métricas de performance para muchos de los usuarios de nuestra aplicación en todo este mundo. Entonces no solo nuestro portátil. Por ejemplo, si lo probamos en nuestro portátil, quiero decir, tenemos MacBooks, M2s, etc., yada, yada, yada. No todos van a tener esa dirección en uso. Ahí está el puerto 3000. Pero pensé que lo había matado. Necesitamos matarlo manualmente ahora. Pero sí, el punto es que queremos medir el performance en producción. porque va a funcionar bien y va a ser eficiente en nuestro portátil pero no necesariamente en nuestros usuarios portátiles o máquinas de escritorio o etc sí eso es pseudo LS Office es un buen 91283 sí okay ahí vamos Mira tus trucos de desarrollo elegantes. Vamos a ver. Vamos a crear un nuevo error y ver qué tenemos. Vamos a entrar en qué es un hook. Sí y échale un vistazo. No obtenemos el pop-up de desarrollo porque no estamos- Giro infinito sí. Exactamente y luego vamos a seguir adelante y mostrar las herramientas de desarrollo aquí y ver que es incluso menos útil. Sí. Mala petición. No nos está dando. Sí. No es el archivo real. Exactamente. Y luego si lo abrimos aquí ahora, por cierto, si estamos en modo de desarrollo, solo tenemos ese. Y si estamos en modo de producción, solo tenemos ese. Entonces este es nuestro error en modo de producción. Y ya podemos ver. ¿Lo hicimos? Oh, ¿Ya configuramos los mapas de origen? No, pero esto es como un – Sí, tenía como un – Entonces tenemos un compromiso sospechoso aquí ya, por lo que se sospecha que este compromiso aquí fue probablemente el que causó el problema. Por esa persona específica allí. Y en realidad podemos venir aquí abajo ahora y en nuestro – Podemos ver aquí que la transacción ocurrió en el archivo slug TSX de la tarjeta flash de gestión. Y como Lazar fue la última persona en tocar ese, probablemente fue él quien causó el problema. Perfecto. Okay. Ahora vamos a saltar a la configuración de los mapas de origen. Entonces, el beneficio de configurar los mapas de origen, lo verás aquí en un momento. Pero básicamente, nos permite encontrar la línea exacta de código que probablemente está causando el problema y conectarla a tu repositorio. Entonces, lo que vamos a hacer es que vamos a ejecutar el asistente de mapas de origen. Ahora, una cosa que es interesante sobre el asistente de mapas de origen es que también ejecutará el asistente de configuración de Next.js si quieres. ¿Podemos esperar un segundo? Sí. Creo que en realidad tenemos los mapas de origen automáticamente. Sí, creo que podría haber. Espera. Déjame reiniciar el proyecto. porque creo que Sentry nos supera en inteligencia. Puedo ver algunos paquetes.

Lo sé. Creo que lo que pasó fue, así que si vamos a los proyectos, Sentry se envía a menudo. Somos, como dije, de código abierto. Y así puedes ver todas las veces que estamos enviando. Estamos enviando a menudo. Me encanta trabajar para una empresa de código abierto por esa razón. Pero algunas de las cosas sobre eso es que suceden cosas nuevas, lo que lo hace mejor para los desarrolladores. Así que en lugar de tener que configurar tu proyecto Next.js con Sentry y luego añadir mapas de origen que parece un poco tonto hacer para ambos si configuras un proyecto Next.js en Sentry normalmente tendrás los mapas de origen configurados ya así que en realidad no teníamos un paquete de artefactos pero sí tenemos uno para el paquete de lanzamiento así que hay algunos no, en realidad borré en realidad borré todos los artefactos vamos a intentar desencadenar un error ahora así que no estamos siguiendo, teníamos mapas de origen, que nos estaban dando información adicional. Sí, y también eliminé los problemas también. Así que, básicamente... Sí, básicamente estamos empezando desde cero. Uf. ¿Qué sigo haciendo? Ahí está. No le pedimos a los dioses de la demostración. No lo hicimos. Simplemente hicimos nuestra rutina normal. Sí. Normalmente nos dirigimos a- OK. Perfecto. Así que, ahora vamos a volver aquí, vamos a entrar en nuestro React Summit US, Podemos ver que todavía está cargando el problema. Ahí está, nuestro problema no manejado. Y esta es la información no tan interesante. No tenemos nada. Esta es la misma información que estamos obteniendo aquí. No es útil, ¿verdad? Y así sin mapas de origen, eso es lo que obtienes. Todavía obtenemos como esto sucedió potencialmente porque esto es donde está tocando para la transacción. pero no obtenemos el rastreo de acción o... Sí, rastreo de pila. Rastreo de pila, sí. No obtenemos el rastreo de pila real con la línea de código allí. Así que ahora vamos a seguir adelante y ejecutar este asistente de mapas de origen. Y creo que acabo de darme cuenta de lo que estaba haciendo mal. No borramos el archivo RC. El archivo RC era la razón por la que nuestros mapas de origen se subían automáticamente. Vale. Va a autenticarnos de nuevo. Ahí vamos. Así que sí, si fueras a instalar el SDK de Sentry manualmente en una aplicación Next.js, tú harías esto. Sí. Exactamente. Y luego este ofrece iniciar el Asistente de Sentry para Next.js, que es el que hicimos justo al principio. No necesitamos hacer eso de nuevo porque ya lo hemos hecho. Así que voy a decir que no. es para si quisiéramos hacerlo manualmente. Pero ya tenemos todo esto en nuestro archivo de configuración de Next.js que debería estar aquí. Así que, puedes ver que todo esto ya existe aquí abajo. Así que, no necesitamos hacer eso. Así que, sí, lo hemos hecho. No estamos usando una herramienta de CI CD, así que voy a decir que no, y hemos terminado. Así que, ahora voy a construir, y luego voy a volver a ejecutar. Y luego veremos que este error donde no tenemos mucha información obtendremos información adicional con eso. ¿Ha habido alguna pregunta? Tenemos solo dos preguntas. ¿Es común que los errores se propaguen desde las bibliotecas y hay una forma de filtrar ciertos errores dentro de Sentry si es así cómo? Sí, en realidad hacemos filtrado con algunas cosas personalizadas en un momento así que sí y luego la propagación es como el rastreo distribuido. Hablaremos de ambos. También hay una propiedad dentro del método century.init que vive en el archivo century.client .config.js o el servidor o el borde, lo que sea. Así que ese va a permitirte filtrar cualquier error que pueda ocurrir basado en una cierta regla. Intentaré encontrar un enlace En los documentos y lo compartiré en el chat. Estaba tratando de entrar aquí para que podamos ver algunos mapas de origen. Así que, ahora, podemos ver que estos paquetes se crearon. Ahí vamos. Vale. Perfecto. Así que, ahora vamos a volver a ejecutar. Construir es lo que envía los mapas de origen, así que, ahora vamos a volver a ejecutar. Voy a entrar en qué es una promesa. Voy a borrar este, actualizar. Obtenemos estos mismos errores no muy útiles en nuestras herramientas de desarrollo aquí al lado. Pero luego dentro de nuestro proyecto real. Deberíamos obtener un nuevo error aquí y luego esta es la razón por la que la primera vez que lo mostramos teníamos el compromiso sospechoso porque los mapas de origen ya estaban configurados. Tenemos información adicional aquí y luego ahora tenemos el rastreo de pila.

Y podemos ver esto aquí mismo, yendo directamente a eso. Y luego incluso podemos abrir la línea en GitHub. Ahí está. Ese fue el que realmente envió el error. Bueno, esa es la diferencia entre tener mapas de origen y no tenerlos. Al no tener mapas de origen, no obtenemos ese rastreo de pila y no obtenemos ese clic en el repositorio de GitHub, y no obtenemos ese compromiso sospechoso con el presunto culpable de introducir el error.

Esto también asignó automáticamente, o no automáticamente, pero sugirió asignar a Lazada al problema, pero mostraremos cómo hacer algunas alertas personalizadas y asignaciones de problemas. ¿Esto es básicamente solo para los compromisos sospechosos? Correcto. Basado en el compromiso data. Así que ahora vamos a añadir algo de contexto de evento que nos permitirá buscar problemas de formas más interesantes. Como dije, ya podemos buscar problemas para entornos de desarrollo en un cierto marco de tiempo, pero sería bueno saber qué tipo de cosas podemos buscar aquí también. Así que vamos a crear un contexto de evento y configurar algunas etiquetas personalizadas para que podamos hacer esa búsqueda aquí. Bien, voy a minimizar mi terminal Voy a saltar a algo de código aquí, vamos a dejar ese error ahí. Vamos a ir al mismo archivo, pero vamos a añadir los data para la sesión actual que está ocurriendo aquí mismo. Y voy a traer en uso sesión. Perfecto. Y luego aquí abajo, cuando estamos tratando de actualizar con la pregunta, las respuestas, y la categoría, vamos a añadir información de si hay data de la sesión y ese data tiene un usuario con un correo electrónico. vamos a establecer el usuario de Sentry. Así que el ID de usuario en Sentry a esa dirección de correo electrónico. Así que de esa manera sabemos qué usuario tuvo este problema. Esto podría ser realmente útil si tienes como clientes importantes donde si se encuentran con un problema en particular, quieres que alguien se ponga en contacto inmediatamente con ese cliente y ofrezca como ayuda inmediata o ayuda personalizada. Así que eso es lo que vamos a hacer. Esto sucede antes del código await, ¿verdad? Así que queremos hacer eso aquí. Lo siento, estaba respondiendo preguntas de Discord y no estaba siguiendo. Voy a añadir en Sentry aquí. Importar Sentry... ¿Cómo era de nuevo? Todo es Sentry de... No, sí. Era importar todo de... Sí. Sentry de... At Sentry slash Next.js. Gracias. nos faltan las comillas. Sí. Vale. Así que ahora se está llenando ahí, y vamos a hacer que el correo electrónico se establezca en data.user.email. Así que, eso está añadiendo algo de contexto adicional al evento Sentry, esencialmente. Para decir que el usuario que está desencadenando este evento es este usuario. Vale. voy a construir y ejecutar eso y mostrar cómo se ve en Sentry. Ten en cuenta que esto es PII y si por ejemplo tu proyecto no debería recoger PII o hay una regla de que no puedes obtener ninguna información personal fuera de tu database a un servicio como Sentry, estarías rompiendo esa regla en este caso. Pero por defecto, Sentry borra todos los datos PII data automáticamente. Así que no necesitas preocuparte por filtrar ninguna información de usuario y romper una ley. Si estás interesado en eso, puedo enviarte un enlace para nuestra privacidad en PII si quieres aprender más.

Sí. Somos particularmente críticos con respecto a la PII, especialmente debido a... Verás en esto... En la sección de repetición de sesión lo complicado que puede llegar a ser. Entonces, puedes ver aquí, estoy conectado con un administrador en el usuario administrador, que es simplemente una especie de uno predeterminado que tenemos. Entonces, voy a seguir adelante y desencadenar ese error de nuevo. Y esta vez cuando entremos en nuestros problemas para este proyecto, no solo obtendremos ese mismo error que aparece pero esta vez tendremos información adicional o contexto para entender por qué apareció ese error. Toma solo un segundo. Por lo general, no lo estás haciendo de inmediato. Puedes ver aquí que ahora el mismo error porque tenemos mapas de origen actualizados cuando desencadenamos este error tiene dos eventos con dos usuarios diferentes. Fue el mismo usuario que desencadenó ese evento. Sin embargo, porque no teníamos el contexto adicional del evento del correo electrónico del usuario, no podemos decir con seguridad que fue dentro de Sentry que era el mismo usuario. Así que técnicamente desde la perspectiva de Sentry, solo sabemos que eran dos diferentes. En realidad puedes ver que este ocurrió hace siete minutos, pero si nos desplazamos al otro, podemos ver que este es el que acaba de suceder hace un minuto. La diferencia aquí es que aquí, no estamos seguros de quién era el usuario. no teníamos contexto de quién era este usuario. Teníamos contexto de qué tipo de dispositivos y navegadores estaban usando pero no del usuario. Aquí en realidad tenemos contexto de ese usuario. Luego todo lo demás es prácticamente lo mismo. También aquí abajo en los encabezados vemos que este correo electrónico también se añadió allí. Así que básicamente así es como configuras contextos. Es bastante simple. No debería ser demasiado difícil. De nuevo, es un poco difícil ser un defensor aquí porque son solo un par de líneas de código. Pero quiero mostrarte cómo configurar etiquetas personalizadas porque podría ser que hay un tipo particular de operación o un tipo o como un área dentro de tu aplicación donde los problemas podrían ser más críticos y quieres alertar a la gente antes o a ciertas personas o cosas así.

Entonces, voy a mostrarte cómo configurar una etiqueta personalizada ahora. Vamos a agregar esta línea de código a nuestro handle update, que está en 125. Así que dentro de lo mismo, lo hacemos aquí es lo que queríamos hacer. Entonces, vamos a decir que si estamos en la función handle update, entonces queremos agregar una etiqueta a Sentry. Y esta etiqueta es qué operación estamos haciendo ahora mismo. Y en este caso, estamos intentando actualizar. También podemos agregar la misma etiqueta al remove. Entonces, creo que podemos hacerlo en cualquier parte, ¿verdad? Entonces, y solo haremos remove aquí. Sí, es solo la etiqueta. Sí Entonces, si un error ocurre en el handle remove en su lugar, entonces esa etiqueta de operación será para remove si ocurre en el update será para out. Exactamente y la belleza de las etiquetas es que puedes agregar y filtrar errores basados en ellas. Entonces, como los contextos, puedes agregar datos adicionales al error en sí, pero con las etiquetas puedes buscar y filtrar errores basados en las etiquetas. Y tienes toda la creatividad para agregar cualquier etiqueta personalizada que normalmente debería ser solo un valor clave, como tipos primitivos en lugar de objetos, etc., porque por supuesto, estarás buscando. Están destinados a ser buscados más tarde. Entonces, podríamos hacer algo como esto. donde estamos causando otro error si la respuesta está vacía cuando estás creando, y estamos configurando la etiqueta a operación es create, y luego solo necesitamos asegurarnos de que estamos agregando en sentry aquí. Pregunta rápida. Sí. Relacionado con la configuración de la etiqueta. entonces Lazar dijo que es un par clave-valor y solo estoy tratando de entender mejor el no parecía que se estaba insertando como un objeto en un par clave-valor pero supongo que se interpreta de esa manera y entonces el primer valor operation. Sí, esa es la clave com del valor básicamente los dos argumentos son la clave y el valor. Quería decir que por ejemplo para el valor en lugar de create o remove o update si quisieras poner un objeto allí y no creo que estés usando las etiquetas correctamente básicamente. Sí. Sí, porque tendrías que buscar ese objeto específicamente y es mejor simplemente lanzar una cadena y solo etiquetar ese error con algo que puedas usar más tarde para identificar el error. Y entonces cuando buscas esta etiqueta en Sentry, ¿buscarías Remove, esa sería la clave? Sí, será tag, transaction.tags, y luego remove. Sí, te voy a enviar una guía sobre cómo buscar esto. OK, ¿también podrías buscar entonces, supongo, la clave en sí, operations? Sí. Creo que sí. Déjame ver. Porque buscar en Sentry se hace por un personalizado, como un básicamente estás construyendo una consulta. No es solo como una búsqueda difusa. Aquí está una guía en Zoom y puedo también publicarla en Discord también. sobre el constructor de consultas real y cómo puedes usar todos los detalles de la transacción como contexto y en realidad etiquetas etc y el tipo de la transacción para buscar ciertos errores y filtrar cualquier cosa que quieras filtrar básicamente así que sí usando el constructor de consultas y la sintaxis del constructor de consultas puedes lograr eso usando las etiquetas usando las etiquetas, porque podrías tener varias formas de crear, por ejemplo, en este caso, una tarjeta de memoria, por lo que ese error específico puede venir de dos o tres sitios diferentes. Tener esa etiqueta con la misma etiqueta, como Operation Create, puede ayudarte a agregar todos los errores, básicamente, agregar todos los errores, aunque no sean el mismo. Entonces, puedes ver aquí, tenemos dos o un nuevo error y luego un nuevo tipo de evento dentro de ese tipo de error. Así que el nuevo fue para la operación create. Entonces, aquí está esa etiqueta personalizada, simplemente haces clic en ella y te llevará a buscar operation colon create. Sí, podemos cambiar este a update. Y entonces este es el otro, que es uno de tres eventos para este tipo particular de error. Este tiene Operation Update aquí como una de nuestras etiquetas. Y si nos desplazamos hacia arriba, de nuevo, porque no teníamos las etiquetas personalizadas antes, no vamos a tener Operation Update en el que tiene el correo electrónico del usuario, ni lo vamos a tener con el que sin el correo electrónico del usuario. Y sí, así es como harías la búsqueda. Entonces, incluso podemos ver como solo para cuando hubo, este es para ambos. Creo que ¿no hay una forma de hacer o? Sí, creo. Solo o. Solo o, pero fuera de él. Sí. De todos modos. Sí.

Consulta la documentación del Constructor de Consultas y verás todas las formas en que puedes incluir o no incluir lógicamente, sí, o es como mayúsculas o sin, sí, explícalo en inglés. Genial. Lo siguiente que quiero mostrarte es y luego vamos a tomar un breve descanso, esto va a ser súper rápido, vamos a hacer algunas alertas y asignaciones de problemas. Así que puedes ver que con los commits sospechosos cuando tienes los mapas de origen configurados puedes, o ofrece algunos datos de commit data aquí, pero sería bueno tener alertas configuradas en función de la lógica de tu organización o de tu empresa o tu equipo. Así que vamos a hablar de eso primero.

Así que lo que vamos a hacer es que vamos a saltar a quiero mostrarte algunas de nuestras cosas de integración. Así que tenemos la integración de GitHub instalada aquí que se instala cuando estás haciendo mapas de origen. Y de esa manera puede conectarse realmente a GitHub. También tenemos, ya sabes, todas estas otras integraciones aquí. Algunas de estas están relacionadas con la implementación de tu aplicación o la implementación continua o cosas así. Pero algunas de estas están relacionadas con el proceso de triaje de tu equipo como PagerDuty, Jira o con la plataforma de chat de tu equipo. Así que tenemos Microsoft Teams, tenemos Discord, tenemos Slack. Así que si quisiéramos, podríamos configurar Slack. Así que de esa manera una alerta puede suceder a través de Slack y, ya sabes, él puede ser DMed en el segundo que algo sucede en uno de sus commits. Vamos a usar el correo electrónico para este. Pero sólo quería darte una visión general de la ridícula cantidad de integraciones que tenemos. Y puedes incluso buscar por categorías particulares aquí para lo que podría ser más útil para ti y tu equipo.

Así que vamos a entrar en la configuración del proyecto para este proyecto, y vamos a entrar en las reglas de propiedad, y podemos hacer un par de cosas diferentes aquí. Así que una es que podemos simplemente crear reglas dentro de Sentry. Aquí hay algunos ejemplos. también tenemos un enlace a los documentos de nuevo para todos los diferentes tipos de cosas que puedes hacer coincidir para alertar automáticamente a personas particulares o más bien para aplicar la propiedad a ciertos eventos para personas particulares. Así que puedes hacerlo basado en el camino, módulo, URL, etiqueta, que también pueden ser etiquetas personalizadas. Y luego tenemos alguna información adicional aquí. Además, puedes tener si ya tienes un archivo de propietarios de código puedes hacer eso en su lugar. Así, por ejemplo, si quisiéramos crear un archivo de propietarios de código vamos a intentarlo de esa manera. Así que, simplemente voy a salir de aquí y voy a crear una nueva carpeta para la carpeta de GitHub y aquí voy a crear un nuevo archivo que es sólo propietarios de código. Esto no es específico de Sentry, esto es sólo archivo de propietarios de código. Así que voy a decir si está relacionado con tarjetas de memoria entonces deberíamos etiquetar a Lazard y si está relacionado con categorías, deberíamos etiquetarme a mí. Estos son nuestros usuarios de GitHub Así que puedes ver que este es mi perfil de GitHub que aparece cuando paso el ratón por encima. Y este es el suyo, tal vez, como ventanas emergentes. Ahí vamos. No sé si tú también. Ahí va. Así que esto no está relacionado con nuestros de Sentry, esto está en cambio relacionado con nuestros de GitHub. Así que voy a seguir adelante y construir esto de nuevo. y cuando termine de construir voy a importar propietarios de código en Sentry después de hacer eso podemos realmente mapear el perfil de alguien en github a su perfil de Sentry para asegurarnos de que si tenemos un commit sospechoso en github por este usuario particular de github que sabemos quién dentro del sistema de Sentry para tocar para alertar y de qué maneras? Así que vamos a añadir un archivo de propietarios de código existente de este repositorio. Podemos previsualizar el archivo aquí. Ahí está. Y lo vamos a añadir ahí. Oh, ya está en uso. Maldita sea. Déjame comprobar. Creo que es porque, bueno, lo pegaré aquí también. Es porque estamos usando el mismo repositorio en varios proyectos. Así que, en realidad, esto requiere los usuarios de Sentry. ¿Cómo lo hacemos cuando no es así? ¿Puedes quitarlo de los otros proyectos? Sí. Podemos intentarlo. Puede que pueda. Deberíamos haber hecho eso con antelación. En realidad, voy a borrar la integración y crearla de nuevo. O en realidad, sí, tienes las reglas. No, pero esto es React Advanced Londres. Para el Londres, sí. Creo que es por eso, aunque, es que es borrar. Aquí vamos. Ese ya estaba en uso. normalmente no vas a tener varios proyectos en el mismo repositorio así que ahí vamos eso es cómo debería haber sucedido así que simplemente haces clic en importar lo carga en basado en tus mapas de origen. Identificará el archivo de propietarios de código de GitHub y lo traerá para ti y verás aquí los propietarios y quiénes son. Luego en la configuración general, queremos tener, lo siento, no para este proyecto para toda nuestra organización. Queremos asegurarnos de que tenemos nuestro, ¿dónde están nuestros miembros? No. Moviendo para los mapeos de usuario. Sí, integraciones. Gracias. Pero para el proyecto, ¿eh? No, está en la configuración de las integraciones. Así que entonces bajo la integración de GitHub, porque GitHub es lo que estamos usando para los propietarios de código, podemos entrar en configuraciones y podemos configurar a una persona en particular con una persona de Sentry. Así que podemos asegurarnos de que esta persona está asociada adecuadamente con ese usuario de Sentry y esta persona está asociada adecuadamente con este usuario de Sentry. Así que estos son los que vamos a usar. Podemos añadir adicionales. Así que si quisiéramos añadir, creo que este es de Salma, entonces podemos entrar aquí y añadir manualmente a ella. Puedes añadir manualmente a ella proyecto de GitHub a esto también.

La idea es que nunca harás esto porque tan pronto como crees la integración de GitHub, va a extraer todos los usuarios externos que podrían potencialmente estar definidos en un archivo de propietario de código. Y eso es, por ejemplo, si vuelves a los mapeos de usuario ahora, verás ese pequeño icono de GitHub a la izquierda del nombre. Eso indica que este usuario ha sido automáticamente extraído del archivo real del propietario del código. Así que dime ¿Quién es Dr. Guftles dentro del contexto de las cuentas de Sentry? De esta manera, podemos tener asignaciones automáticas de problemas, etc. Y esto no se hace por proyecto. Esto se hace para toda tu organización. Así, puedes ver aquí que para la integración de GitHub para toda la organización, tenemos estas configuraciones. Podrías tener varias porque este es solo un repositorio que hemos conectado a nuestras cuentas de Sentry. Así que podemos tener varias aquí y luego vamos a traer eso. Y ahí es donde ocurre la configuración. Puedes ver que esto viene de este repositorio. Podría haber algunos mapeos de código también. Esto es porque realmente trajimos propietarios de código a ese proyecto. Y luego aquí están los mapeos de usuario. Y también podría haber mapeos de equipo. pero no tenemos eso para este. Va a ser exactamente lo mismo que los mapeos de usuario. Exactamente.

Bien, perfecto. Entonces, lo que vamos a hacer ahora es que voy a comentar una línea de código que queremos asegurarnos de que él va a ser etiquetado en lugar de yo. Así que dentro de nuestras tarjetas, vamos a, ¿cuál era la línea? ¿123, era, o algo así? ¿13? No, esa es la API. Páginas, gestionar, tarjeta, slug. ¿Dijimos 123? Algo así. Sí, por ahí. Anotemos 116. Gracias. Oh, comentado. Oh, sí. Aún mismo error. No sé por qué dije comentado de nuevo. Bueno, vamos a provocar otro. Mismo problema. Esta vez voy a eliminar esta pregunta aquí, actualizar, mismos problemas allí. Vamos a volver a nuestro proyecto para que podamos ver ese problema. Este es un poco antiguo, así que vamos a refrescar de nuevo. Hace 18 segundos, así que vamos a abrir este. Tenemos el commit sospechoso. vamos a ir al evento más reciente, que es ahora mismo, y deberíamos tener a alguien asignado aquí, asignado a él. Y podemos ver eso en la parte superior. Lo siento, si vamos al evento anterior donde no teníamos esto, bueno, supongo que ahora lo hemos asignado. Así que él ha sido asignado a todo este error, pero para otros no lo habrías encontrado. Aquí puedes ver que este está coloreado, como colorido, porque fue realmente asignado. Este es una sugerencia.

Rápidamente vamos a repasar las alertas. Así que ahora lo que vamos a hacer es que vamos a volver a las alertas aquí, y tenemos tienes que enviar una notificación para nuevos problemas, pero voy a crear una nueva alerta personalizada. Va a estar basada en problemas, pero solo quiero hacerlo en nuestro React Summit para el entorno de producción. No me importa si ocurre un problema en desarrollo, eso va a ser normal. Voy a decir cuando se crea un problema y puedes añadir filtros adicionales aquí. Así que puedes tener etiquetas, Puedes tener ciertos atributos, categorías, básicamente cualquier cosa que puedas querer tener algún tipo de filtro para, y luego realizarías una acción particular aquí. Estas son algunas de las condiciones que ocurrirían. Podemos configurar Slack, como dije, y voy a configurar un intervalo de cada cinco minutos. Esta es solo una regla de alerta regular. ¿Deberíamos configurar una alerta personalizada en su lugar? Yo haría como un número de errores. Sí. En lugar de que solo ocurra un problema. Buen punto. OK. Así que el número de errores en un intervalo de un minuto en este particular solo para el tipo de evento de producción de error. Y voy a decir que si se envían cinco errores. Entonces la diferencia, sabes, un problema es algo que puede tener muchas transacciones diferentes dentro de él. Así que estoy diciendo cada vez que una de esas transacciones de error ocurre. Así que si ocurre cinco veces. En un solo minuto. En un solo minuto. Entonces es crítico. Si ocurre tres veces en un solo minuto, entonces solo vamos a recibir una advertencia. Voy a crear una acción para el estado crítico que va a enviar un correo electrónico a todo el equipo, y va a enviar un correo electrónico a todos en el equipo de Sentry DevRel. También podemos configurar una acción para un estado de advertencia que solo enviará un correo electrónico a Plaza. y luego nos estableceríamos como los propietarios, introducir el algo está roto. Obviamente no es un buen nombre de rol, pero solo para los propósitos de esta demostración. Perfecto. Así que tenemos esto aquí. Tenemos ese problema listo. Lo siento, esa alerta está lista para alertar. Sí. Así que vamos a intentarlo. Necesitamos provocar muchos errores ahora. Sí. Vale. Y por cierto, cuando te asignan automáticamente un problema, realmente recibes un correo electrónico de Sentry diciendo que este problema te ha sido asignado. Así que puedo ir y comprobarlo inmediatamente. Vale, creo que fue mucho. Sí, deberíamos ver el gráfico. Ahí vamos. ¿Ves esa pequeña línea allí? Sí, esto es para los últimos siete días. Puedes cambiar el rango de fechas en la parte superior para ser como los últimos cinco minutos. también puedes escribirlo en los últimos cinco minutos que funciona también ¿Funcionará bien, no va a funcionar en este caso va a funcionar en el caso de los problemas Sí, porque creo que esto es sí las alertas tienen una diferente. Pero puedes ver esa línea allí

Y lo último que vamos a hacer es una demostración sobre el seguimiento distribuido y la reproducción de sesiones. Y luego terminaremos. Así que volvamos a las 15 pasadas la hora. Lo bueno de esperar ese minuto o así es que tenemos el correo electrónico inicial donde algo está roto. Eso fue lo que nombramos nuestra alerta, por cierto. Así que si lo nombraste algo más interesante, sería mejor. Podemos ver algo así como, ya sabes, podemos descargar el gráfico. Podemos verlo aquí mismo en el correo electrónico. Podemos hacer clic en la alerta misma y profundizar en por qué. Así que el número de alertas estaba por encima de cinco en un minuto. Esa es la razón por la que se activó. Podemos ver cuáles, como qué problemas estaban relacionados con eso y luego notar que dice que el estado de la alerta está resuelto aquí y eso es porque un minuto ha pasado y no tuvimos ninguna, así que lo más probable es que ya no sea un problema pero recibimos ambos correos electrónicos, el uno donde algo malo pasó así como el uno donde ellos como sabes qué creo que probablemente está bien um era solo un Sí. Pero porque recibes ambos correos electrónicos o se activa de la manera que prefieras correo electrónico, slack, equipos, etc. Todavía puedes hacer un seguimiento. También puedes silenciar esta alerta. Esto lo abre de nuevo en Sentry y automáticamente silencia la alerta. pero luego te permite estar aquí y desactivar el silencio si es necesario. También puedes silenciar para ti mismo, silenciar para todos, editar la regla, duplicarla si tienes una regla bastante compleja que entonces necesitas hacer lo mismo una y otra vez. Así que muchas oportunidades diferentes para las alertas aquí. Ese silencio para todos, eso puede ser una buena broma de April Fool's. Oh, Dios. Sí, como, hey, no pasa nada. No hay problemas con nuestra aplicación, April Fool's. Hay muchos problemas. Eso sería tan morboso. Sí. Así es como se ven los correos electrónicos. Y para terminar, lo que hicimos en la última hora fue usar el asistente para configurar nuestro proyecto de React con Sentry. Creamos un nuevo proyecto en Sentry. Usamos el asistente para hacer eso, para conectarlo. Usamos el asistente para conectar los mapas de origen. Añadimos contexto de eventos. Eso era la dirección de correo electrónico del usuario. Añadimos etiquetas personalizadas. Eso era qué operación estaba intentando realizar el usuario. Configuramos alertas y asignaciones de problemas donde asignamos cualquier cosa relacionada con tarjetas a él y cualquier cosa relacionada con categorías a mí. Y luego configuramos alertas para que si teníamos cualquier número de errores de eventos, número de transacciones de esos errores ocurriendo, tres o más, sería una advertencia, cinco o más, sería un error, como un error crítico, y recibiríamos un correo electrónico todo sucediendo en un minuto. Eso es lo que hemos hecho hasta ahora. Y a continuación, lo que vamos a hacer es continuar con esta misma aplicación. Así que no tendrás que pasar por toda esa configuración de nuevo, pero vamos a hacer algunas cosas de monitoreo ligeramente más, en mi opinión, interesantes con el seguimiento distribuido y la reproducción de sesiones.

Así que te lo paso a ti, señor.

Vale, esto puede funcionar. Así que vamos a empezar con el seguimiento distribuido. Así que, el seguimiento distribuido es una técnica de depuración realmente genial que existe por una razón. Hagamos una breve historia, para que podamos ver por qué existe el seguimiento distribuido. Como en los años 90, cuando teníamos una única concurrencia. Estamos hablando del servidor HTTP de Apache. Cuando una solicitud llegaba al servidor, el servidor simplemente manejaba esa solicitud en su propio proceso hijo. Así que si queríamos ver qué pasa con esa solicitud, simplemente sacábamos los registros del proceso hijo y éramos felices. Eso funcionó para la época. Luego tuvimos frameworks un poco más avanzados, como por ejemplo ASP.NET en AIS, donde en lugar de manejar todo en un solo proceso hijo, no bifurcaba un proceso hijo, sino que manejaba esa solicitud específica en un solo hilo. Así que para averiguar qué pasó en esa solicitud específica, no podíamos simplemente sacar los registros del proceso hijo. Necesitábamos etiquetar basándonos en el nombre del hilo. Así que cuando sacamos los registros simplemente filtramos todos los registros que son para estos hilos y ahí vamos podemos ver todo lo que pasó desde nuestro console.log. Y eso funcionó entonces tuvimos la nueva ola de frameworks que todavía eran concurrencia avanzada y estamos hablando de frameworks como Node.js, el basado en el bucle de eventos, el asincrónico promesas, características basadas en frameworks, ¿verdad? Así que lo que hace Node.js es cuando llega una solicitud, no va a manejarla solo en un solo hilo, varios hilos van a manejar esa solicitud así que para leer los registros no podemos simplemente filtrar en un hilo porque nuestros registros están básicamente en todas partes ahora. Así que, lo que hicimos y lo que necesitábamos hacer es averiguar cómo etiquetar los mensajes de registro con algo único para esa solicitud. Y recuerda esto, porque va a ser importante.

Generamos como un ID para cada solicitud entrante y prefijamos todos nuestros registros con Con esa solicitud, podemos obtener los registros, filtrar en función de ese ID único específico, y todavía podemos ver qué está pasando. ¿Y luego qué pasa? Alrededor de 2010, Docker y AWS entran en escena, y hacen espacio para aplicaciones contenerizadas. ¿Y adivina qué? Nuestro backend podría ni siquiera vivir en el mismo hardware. Entonces nuestros registros están extremadamente distribuidos y podemos ir de microservicio a microservicio para leer los registros, ¿verdad? No tiene sentido. Ese es el punto en el que pensamos, está bien, necesitamos una mejor herramienta para depurar, una mejor herramienta para que podamos seguir la ejecución de las solicitudes, saltar entre los microservices como lo hace y ver el panorama completo al final. Y eso es básicamente el seguimiento distribuido. Entonces, aquí tengo una vista y esa es una vista de rastreo para una transacción. Como puedes leer desde arriba, está actualizando tarjetas de memoria. ¿Vale? Y si te desplazas hacia abajo, vamos a ver la cascada de spans. Hay un span de marca, que es un span que no tiene ninguna longitud. dice haciendo la solicitud de API. Así que esto es solo como una pequeña bandera. Luego hacemos el cliente HTTP que ejecuta una solicitud put a la API / flashcards / el slug, que tarda como 1.1 segundos como podemos ver. Hay un span de caché mutando es doble tu caché que tardó unos 200 milisegundos ahí vamos ahí está la mutación de caché real y al final tenemos un serializado respuesta así que esto es más o menos lo que también podemos hacer en console log porque esto es lo que el navegador nos da, ¿verdad? Pero lo interesante del seguimiento distribuido es que podemos expandir ciertos spans así que comenzamos la transacción o comenzamos el rastreo en el lado del cliente pero luego enviamos eso identificador único que se llama un ID de rastreo. Enviamos eso al manejador de API en nuestra aplicación Next.js y el servidor real continuó ese rastreo. Y si hacemos clic en el más aquí que está en el real solicitud HTTP y expandir en ella vamos a ver lo que pasó en el backend mientras se ejecutaba esta solicitud. Entonces, primero, db.sql.prismaspam sucedió, user find unique. Eso significa que intentamos encontrar al usuario que está haciendo estas solicitudes. Luego intentamos encontrar la categoría. Luego realizamos algunas comprobaciones de categoría. Y voy a entrar en el código y mostrarte todo esto. Solo quería establecer la escena mostrándote esta parte para que sepas qué es el rastreo, y luego podemos sumergirnos. Pero sí, comprobaciones de categoría, luego otro span de Prisma que intentó encontrar una tarjeta de memoria específica. Luego hicimos algunas comprobaciones de tarjetas de memoria también, que es solo una función. Y luego al final, tenemos otro span de Prisma, que es la actualización de la tarjeta de memoria, y eso tarda 756 milisegundos. Si, por ejemplo, consideras que esta solicitud tarda mucho más de lo que esperarías, con el seguimiento distribuido, puedes ver claramente dónde se va la mayor parte del tiempo, y puedes ver cualquier cuello de botella de performance que puedas tener en tu aplicación. Entonces, por ejemplo, en este caso, estamos hablando de una escritura en la database que tarda 756 milisegundos en comparación con las lecturas, que son como 150 y 80 milisegundos. ¿Es eso demasiado tiempo o es normal? Eso depende de ti decidir. Todo depende de la tecnología que estés utilizando. Si es una database serverless o está justo allí en la misma red cerca de tu VPS, etc. Pero sí, eso depende de ti decidir, pero tendrás una visión general de todas las funciones y operaciones que ocurren a lo largo de esa solicitud. Y los spans, como puedes ver, están tratando de reflejar la estructura de nuestro código, ¿verdad? Así que estamos haciendo un par de consultas de Prisma aquí. Tenemos una función para verificar la legitimidad de la categoría. luego hacemos otra consulta, luego creamos otra función para verificar la legitimidad de las tarjetas de memoria que se recuperaron. Y al final actualizamos todo cuando las comprobaciones se realizaron con éxito. Así que veamos cómo podemos lograr esto. Y por cierto, sí, como mencioné, esto es la actualización de tarjetas de memoria. Así que al ir a esta pantalla y presionar el botón de actualización, es cuando ocurre el rastreo. Va al backend, instrumenta las consultas de Prisma, y luego vuelve al lado del cliente para realizar el resto de las cosas, que son, por supuesto, mutar la caché, esta es la mutación de la caché, y luego, de nuevo, serializar la respuesta. Bien, entonces, eso es el seguimiento distribuido. Veamos cómo se implementa realmente. Entonces, voy a saltar al archivo source / hook / flashcards y sí, este es solo un archivo donde guardo todos mis hooks. Si vamos a la línea 87 vamos a ver el método de actualización. Entonces este es el método exacto que estamos importando en nuestra página y estamos configurando el botón on click para ejecutar en esto. Entonces, primero podemos ver que obtenemos el alcance actual. Y es como century.getCurrentHub.get scope. ¿Qué es un hub? ¿Qué es un scope? El hub es básicamente el lugar central donde el SDK mantiene todo lo que necesita para enviar, como todos los datos de la transacción que necesita para enviar a la instancia de Sentry real. Ya sea que se trate del SAS, el Sentry.io, o tu propia instancia de Sentry autoimplementada. Así que eso es el hub. Sabe cómo recibir data y cómo enviar los data para que puedas verlos más tarde. Y un hub se crea cada vez que llamas a Sentry.init. Y si te das cuenta de que, por ejemplo, si vas a Sentry.client.config, así es como inicializamos Sentry en nuestra aplicación Sentry.init pasamos el DSN que apunta a cuál es nuestro proyecto y nuestra implementación, etc. así es cómo sabe dónde vive tu cuenta de Sentry, ¿verdad? cuando esto sucede cuando el Sentry.init método se ejecuta un hub se crea para nosotros y luego encima de el hub inmediatamente se crea un scope para él y el scope Scope es en realidad más orientado al usuario, por lo que no podrás, no podrás, pero no necesariamente estarás interfaz con el hub. No te va a importar el hub, pero podrías estar interfaz con el scope porque el scope mantiene todos los datos adicionales que queremos enviar junto con la transacción. Por ejemplo, en la primera parte, Sarah agregó etiquetas, agregó un contexto adicional a la Todas esas cosas se guardan en el scope. Entonces, cuando queremos enviar una transacción a nuestra cuenta de Sentry, el scope se extrae del hub actual y se envía junto con toda la información que guarda. Y luego creamos el scope nuevamente con una pizarra limpia, ¿verdad? Entonces, para hacer esto, necesitamos obtener el scope actua

Entonces eso fue, volvamos a kitty. Ahí vamos. Así es como hacemos esa pequeña bandera, ese span de marca. Y notamos que hay un método de finalización al final. Eso significa envolver todo y agregarlo a la transacción real para que pueda enviarse al final. Si no llamamos al método de finalización, no aparecerá en nuestro rastreo. Bueno, así es como creamos el primero.

Luego obtuvimos las cabeceras. Y luego agregamos el SentryTrace al Sentry-TraceHeather. ID de rastreo, eso es el ID único que mencioné antes, que queremos agregar o crear para cada solicitud, para que podamos rastrear la ejecución de la misma, aunque esté en el backend o aunque abarque 10 diferentes microservices. La transacción tiene su propio método toTraceParents que devuelve una cadena, y si enviamos este Sentry-trace header, el backend o el microservicio al que vamos a golpear o lo que sea que reciba nuestras solicitudes, sabrá cómo continuar el rastreo desde este punto en adelante, ¿verdad? Porque todavía estamos en el hook. Todavía estamos en el navegador. Cuando enviamos la solicitud, aquí es donde empezamos, así que el backend puede ser como, vale, veo un rastreo. Solo voy a seguir contribuyendo spans a este rastreo y luego lo devolveré, o, como, lo enviaré a un microservicio diferente. Así es como conectamos el lado del cliente y el back-end, ¿verdad? El front-end y el back-end. De nuevo, esto no es algo que necesites hacer. El SDK de Next.js hará esto por ti. Pero, por ejemplo, si tuvieras un proyecto diferente que quizás no tenga esto construido automáticamente en el mismo SDK de Sentry, así es como lo harías. El padre de rastreo real devuelve el ID de rastreo - el último ID de span - un valor, que es como cero o uno para indicar si la transacción es muestreada o no. Pero eso es básicamente todo. Es solo una cadena. Así que mientras técnicamente podamos transferir la cadena, podemos continuar el rastreo a través de todos los servicios de backend incluso trabajos de Chrome como podemos guardar esto en una database recuperarlo no sé en un trabajo de Chrome a medianoche agarrar este rastreo de entrada y agregarlo a la básicamente agregarlo a en la transacción para que podamos continuar el rastreo que ocurrió quizás hace unos días todavía podemos contribuir a él, ¿verdad? así es como conectamos estos servicios para contribuir y para contribuir al mismo rastreo genial entonces esto sucede y luego simplemente creamos un poco método de búsqueda con nuestras cabeceras uh sets um que creamos previamente y esto básicamente es la instancia de, uh, automáticamente, como el SDK de Sentry siendo capaz de instrumentarlo automáticamente. Y eso es este span aquí, el cliente HTTP, porque creamos el span de marca, pero no creamos el cliente HTTP. Y eso se hizo automáticamente por el SDK de Sentry, porque podemos ver ver que ocurre un evento de red y el SDK en sí va a crear ese span para ti. Por eso mencioné que no necesitas preocuparte por esto. Pero bueno genial. Estamos enviando esto y luego continuamos en el backend. Y puedo abrir el backend ahora, así que sería eso sería páginas / api / flashcards / slack porque ahí es donde enviamos las solicitudes HTTP. Si bajamos vamos a ver Esta parte aquí obtener usuario de la sesión. Esa es la primera Span que vemos ahí vamos usuarios encontrar único Y luego si bajamos al manejador de solicitud put ahí vamos Ves que lo mismo sucede aquí dame el hub actual y dame el scope activo actual pero esta vez no voy a crear una transacción. Esta vez voy a intentar obtener la transacción que ya está creada. Y por supuesto el SDK de Sentry Next.js creará eso para nosotros porque va a ver que hay una cabecera llamada Sentry-trace. Así que el SDK sabe, de acuerdo, así que tenemos un rastreo en marcha. Solo voy a crear esta transacción para ti automáticamente porque aparentemente quieres continuar el rastreo. Así que aquí está la transacción. no te molestes en crear una nueva. Vale, genial. Estamos obteniendo eso, y luego esperamos este método, obtener categoría por ID. Así que si vamos a este método, solo vamos a ver que solo estamos usando Prisma para encontrar una categoría única donde el ID coincide con el que pasamos desde el exterior. Y ahí está, categoría, encontrar único. Eso es exactamente lo que hicimos. Y esto es posible porque Sentry también tiene una integración que podemos instalar en nuestra configuración del servidor. Así que nuestras consultas de Prisma están automáticamente instrumentadas. Así que no necesitamos crear manualmente spans para nosotros. Por ejemplo, si vamos a Sentry-server.config.js y bajamos, ahí vamos. en el campo de integraciones, podemos ver que tenemos un nuevo siglo.integraciones.prisma, y pasamos ese cliente Prisma a la integración. Así que cada vez que ejecutamos una consulta SQL, la integración de Prisma va a crear ese span automáticamente para nosotros. De nuevo, el trabajo para un DevRel de Sentry es duro porque todo está automatizado y todo simplemente, simplemente funciona. Pero aquí estamos. Vale, luego creamos esa función de verificación de categorías, span que vimos en nuestro árbol, y mira lo que pasa. Estamos creando el span de verificación de categorías. Creamos o realizamos las verificaciones. Si no existe, establecemos el estado en No Encontrado y terminamos el span. Si no pertenece a este usuario, ¿verdad? por ejemplo, estoy intentando editar la categoría de Sarah. No debería poder hacer eso, ¿verdad? Entonces no. Estamos estableciendo el estado en no autenticado, y luego lo terminamos. Y si todo está bien, entonces solo voy a terminar este span de verificación de categorías. Y básicamente, las verificaciones, si quieres saberlo, tardaron 0.04 milisegundos, esas dos condiciones si ahí.

Vale, sigamos. Luego hacemos la parte de flash, get-flash. que de nuevo, es solo un... Si vamos al cuerpo, es solo una consulta de Prisma. Nada sofisticado, automáticamente instrumentado y ahí vamos, flashcards, fine. Primero eso tardó unos 80 milisegundos, ¿verdad? Eso es lo que tardó Prisma en devolvernos esas tarjetas al back-end desde la database. Lo mismo sucede aquí. Dame un nuevo span, crea un nuevo span, comprueba si se encuentra la parte flash o comprueba si los data están bien o si pertenece a este usuario, etc. De lo contrario, simplemente termínalo si todo está bien y luego haz las actualizaciones reales. De nuevo, automáticamente instrumentado y ahí está este pen aquí que tarda 756 milisegundos. Al final nosotros simplemente cerramos la respuesta, establecemos el estado, traemos de vuelta los métodos actualizados, lo siento, las tarjetas actualizadas de vuelta al cliente, pero podrías notar que en realidad no estamos llamando al finish a la transacción. Eso es porque no la creamos.

No es nuestro trabajo terminarlo. El SDK sabrá cómo manejar la finalización de la transacción. Bien, nosotros lo tomamos prestado por un segundo, añadimos todos estos spans extra que queremos y luego lo soltamos. Así que el SDK lo terminará y lo llevará de vuelta al cliente. Si vamos, por ejemplo, de nuevo a source slash hook slash flashcards, aquí está nuestra solicitud de API que hicimos y todos los spans del backend dentro. Luego, por ejemplo, si la respuesta está bien, entonces voy a crear un nuevo span que va a ser el span de mutación de caché. Voy a invocar el método swr mutate aquí para que pueda refrescar los data y como mutar la caché y luego terminar este span de mutación de caché que tardó unos 200 milisegundos y como puedes ver porque establecí la operación en caché este tiene un color diferente al de abajo porque este es una operación de caché y este es una solicitud HTTP Ahí vamos, es una solicitud GET para obtener los nuevos data. Luego al final solo tenemos un span serializado. Para terminar con esto, esperamos con .json, terminamos este span serializado y luego nosotros también terminamos la transacción al final y esta es la que creamos, ¿verdad? Estamos de vuelta en el archivo de hooks. Terminamos este porque queremos que se envíe a Sentry. Esta es la línea crucial. Si no hacemos esto, no podremos ver nada en Sentry. Llamar al método finish tomará toda la transacción y todo lo que es, como los data completos, que viven en el scope actual, y lo llevará al hub actual, para que el hub pueda enviarlo a Sentry para que podamos verlo más tarde. Y así es como instrumenté la funcionalidad de actualizar tarjetas de memoria. Y así es como podemos ver si algo tarda mucho. Tal vez uno de nuestros usuarios nos enviará un mensaje diciendo que actualizar la tarjeta de memoria tarda demasiado. Deberíamos poder ver qué es lo que más tarda. Y en este caso, podemos ir directamente a la consulta de actualización porque es la mayoría del tiempo o duración que tomó esta solicitud. No voy a molestarme con el resto de la funcionalidad. Puedo centrarme en el problema real aquí y hacer algo al respecto. Así que, eso es el rastreo distribuido. Esa es una forma de depurar sus aplicaciones y de identificar los cuellos de botella de rendimiento que podrías tener. Lo siguiente que quiero mostrarles son las reproducciones de sesión. Así que, las Reproducciones de Sesión son bastante geniales. Personalmente, es mi característica favorita en Sentry. Básicamente registra su DOM para cada usuario. Te muestra cómo tus usuarios están realmente usando tu aplicación. Como, literalmente, cómo mueven el ratón, cómo navegan por las páginas, etc. Funciona en dos... El disparador puede ser dos eventos separados. Uno es si ocurre un error, graba, como, los últimos 30 segundos, por ejemplo, alrededor del error y envía eso a Sentry para que podamos ver lo que el usuario vio en su pantalla mientras ocurrió un cierto error. Y como puedes ver aquí, tenemos, como, nueve errores aquí, ¿verdad? Y si vamos a los problemas aquí, Y tal vez este tiene, sí? Este es el problema que Sarah creó en la primera parte de esta masterclass. Pero si hacemos clic en las reproducciones aquí, podemos ver que hay una reproducción adjunta a este error, ¿OK? Así que veamos lo que Sarah vio cuando causó que el error ocurriera. Si hacemos clic aquí, nos encontraremos con esta pantalla. Así que estoy seriamente ampliado, porque estoy en mi portátil. Va a ser un poco mejor para usted cuando lo abra en su extremo. Pero básicamente, tenemos una línea de tiempo de toda la sesión del usuario. Está llena de estos pequeños puntos, que son eventos. Los rojos son un error. Los verdes son eventos de navegación, etc. Y lo verás más tarde. Entraremos en ello. En el lado izquierdo, tenemos el reproductor real, en el que podemos hacer clic y ver cómo el usuario... qué pasó cuando el usuario estaba usando nuestra aplicación, y ocurrió el error. Y en el lado derecho, tenemos un montón de información. Pero quiero mostrarte esto primero. Voy a entrar en pantalla completa y darle al Play. Cuando no tenemos ningún... Ahí vamos. ¿Ves eso? Y de nuevo, así es como Sarah movió su ratón, borró el nombre y hizo clic en el botón de actualizar tarjeta de memoria que causó ese error. Y ahí vamos. Ahora creamos otro. Hacemos lo mismo. Y si ves en la parte inferior, a veces se acelera, a veces no. Cuando hay inactividad, se acelera automáticamente para ti. En el lado derecho aquí, verás los eventos que ocurren. Déjame pausar esto aquí mismo. Por ejemplo, si paso el ratón sobre este evento de clic de usuario, vamos a ver, como... presta atención aquí en la línea de tiempo. Cuando paso el ratón sobre el evento de clic de usuario real, vamos a ver un nuevo círculo aparecer, y este es donde ese clic ocurre. pero mientras estoy pasando el ratón, entonces verás que este botón aquí se resalta. Ese es el botón en el que el usuario hizo clic. Y si simplemente hago clic en este evento, volverá a este punto, y puedo darle al play y ver qué pasó allí. Ahí vamos. Así que estos son las mismas migas de pan que Sarah te mostró anteriormente. Solo que se nos muestran de manera oportuna tal como ocurrieron en la máquina del usuario real. Así que sí, esto es cuando ocurre un problema. Así que podemos hacer clic aquí para volver a este tiempo, a este punto en el tiempo, y luego simplemente hacer clic en play y ver lo que el usuario hizo que desencadenó este problema. Pero eso no es todo. Esto es solo una grabación, Y esto no es un video, por cierto, puedo entrar y seleccionar esto. A continuación, es una grabación de DOM.

Estamos recreando el DOM en esta ventana aquí. También puedes hacer, si quieres, puedes hacer inspeccionar elemento y verás el marcado real de tu aplicación aquí. Sí, si eso es algo que quieres hacer ahora, déjame volver atrás y deshacerme de, ahí vamos.

Así que esta es la grabación. Y puedes ver que estamos enmascarando todo el texto aquí. No enviamos la información PII. No podrás ver un correo electrónico o los data o las tarjetas de memoria privadas de los usuarios. Solo verás estrellas. Pero sabes qué es esta pantalla porque también puedes verla aquí en la URL en la parte superior. Simplemente no verás los data reales de los usuarios. Pero ¿adivina qué? Eso ni siquiera te importa. Quieres ver lo que hizo el usuario, no lo que el usuario vio o creó en términos de data.

Así que ese es el reproductor. Déjame refrescar, y quiero mostrarte algo nuevo. Voy a alejar un poco, y eso no fue un poco. Eso fue mucho. Aquí, míralo. Tenemos la pestaña de consola. Esta es literalmente la pestaña de consola que podemos ver que está en el navegador. esta pestaña de consola así que si tienes registros de consola dentro de tu aplicación van a aparecer aquí en la pestaña de consola nos olvidamos de añadir alguno pero sí aparecerán exactamente igual que aparecerían en la consola y también ves la red tienes todas las solicitudes de red que es de nuevo lo mismo haz clic derecho inspecciona lo mismo que verás aquí en la pestaña de red de tu navegador así que también capturamos esos y puedes ver ahí estamos podemos ver todas las solicitudes cuál fue la solicitud cuál fue la respuesta Escojamos algo más significativo. Ahí vamos. Ahí está el 400. ¿Ves cómo está etiquetado? Si abrimos este, veremos los detalles. ¿Cuál es la URL? ¿Cuál es el tipo de método? Fue una solicitud de pie. Resultó en un código de estado 400. El tamaño del cuerpo para la solicitud era de unos 121 bytes. La respuesta fue más pequeña. Fueron como 26 bytes. tardó 187 milisegundos y esta es la marca de tiempo, por cierto, cuando eso sucede. Así que podemos hacer clic aquí y saltará a ese punto específico en el tiempo donde ocurre este evento y también lo verás aquí. Mira cómo estos son como un texto más oscuro y los de abajo tienen un texto en gris. Eso significa que aún no han sucedido. Así que si pulsamos play veremos cuando suceden. Y simplemente se van, ahí vamos. Ahora está hasta aquí. Pero sí, básicamente tienes todos los data justo como si el error sucede para el usuario y estás literalmente allí en la sala con el usuario y abres el elemento de inspección revisas la consola revisas la pestaña de red ves lo que enviaron en cuáles fueron los resultados reales de las solicitudes no tengo configurado este pero sí verás en todos los data ahí mismo también están los errores así que aquí están todos los errores que sucedieron durante esta sesión y si pasas el ratón sobre ellos los verás en la línea de tiempo. Como se resaltan en la línea de tiempo de arriba. Estoy seguro de que puedes ver esto. Como hay un pequeño subrayado cuando paso por la línea de tiempo. Los errores aquí se resaltan. También está la etiqueta de rastreo que es prácticamente lo mismo que yo te mostré antes con el ejemplo de rastreo distribuido. Pero sí, esta vez básicamente puedes volver atrás y pulsar play. Y lo hará, veamos, vamos hasta este punto, verás una pequeña línea que pasa por todos los spans a medida que suceden. También puedes revisar los gráficos de memoria, como cómo la memoria, el tamaño del montón, la memoria de las miniaturas, etc., se comportaba mientras el usuario realizaba esta sesión. Y al final, también puedes ver cualquiera de las etiquetas que capturamos en esta transacción específica en esta sesión. Y esto es la reproducción de sesión. Esta es mi característica favorita en Sentry. Y con esto, mi presentación ha terminado. Sí, es bastante genial. Teníamos una pregunta sobre dónde están, dónde se almacenan las reproducciones? Almacenado ahora mismo. Retenemos las reproducciones durante 90 días en Sentry. No creo que me corrijas si me equivoco No creo que haya una forma de configurar un cubo AWS para almacenar tus reproducciones No, no creo que haya Pero si se van por ejemplo, si vendes la versión post Sentry entonces estos vivirán en tu servidor Sí, sí Si tu cuenta de Sentry está en la versión SAS el central io entonces va a vivir en nuestros servidores Si despliegas Sentry en tu servidor, van a vivir en tu servidor. También tuvimos una pregunta en el chat de Zoom sobre el overhead de la reproducción de sesión, para lo cual tenemos un documento de overhead de performance, que compartí en el Discord y en el chat de Zoom también. Estamos a punto de terminar. Voy a compartir mi pantalla una vez más, y vamos a compartir un montón de enlaces también. Una pregunta más. Sí, por favor. Noté que una de las nuevas características son los clics más muertos y los clics más de ira. Me preguntaba si podrían hablar un poco de esta nueva característica y por qué les gusta y cómo la han utilizado. Es muy simple. Cuando tus usuarios están haciendo clic con ira en tu sitio web, Sentry lo detectará. que tienen como múltiples clics consecutivos en el mismo en el mismo elemento que entonces consideramos eso como un clic de ira no estoy seguro sobre la condición real de qué es ese clic o qué es un clic de ira pero sí el sdk es capaz de capturar esos y obtendrás básicamente una lista de los eventos o lo siento los elementos uh ahí vamos verás una lista de los elementos que fueron como víctimas de un clic de ira o algo más. Así que sí, aparecerá aquí en la línea de tiempo. Puedes hacer clic en eso para ver más información y voy a enviar este enlace a este post de blog aquí en un momento. Así que sube una imagen. Sí, básicamente este usuario está intentando subir una imagen pero El selector de archivos no existe, así que siguen haciendo clic en subir imagen, subir imagen, pero sí. Exactamente. Y mira, pero ese es un error que no va a aparecer en – No aparece. Sí.

No es un error real. No es un fallo, pero está impidiendo que el usuario haga lo que quiere hacer. Exactamente. Y lo capturarás con esto. Si, por ejemplo, Sentry solo informara de fallos, no serías notificado cuando algo como esto sucede porque no hay fallo. Sí. No aparece ninguna ventana emergente de archivo. ¿Selector de archivos? Sí.

Así que rápido, solo un resumen. Voy a enviar todos estos enlaces. Um, aquí hay algunos enlaces que puedes escanear este código QR o simplemente usar react summit us como código para obtener tres meses gratis. Si quieres, voy a enviar todos estos en el canal de discordia aquí en solo un segundo. Um, en realidad, déjame hacerlo ahora. Ya lo tengo. Ya los escribí todos. Um, solo necesito copiar y pegar. Eso es inteligente. Lo haremos ahora. Entonces, sí, hay un montón de enlaces allí para ti. Y además de eso, no dudes en seguirnos. Creo que somos prácticamente estos nombres de usuario en la mayoría de las cuentas que puedes hacer. Las diapositivas están aquí, el repositorio de demostración. Y luego también la próxima semana tenemos la semana de lanzamiento, que es donde cada día vamos a tener un montón de lanzamientos relacionados con Sentry. Todos los días a las 9 a.m. hora del Pacífico, tendremos un nuevo video lanzamiento. Tendremos una conversación en Discord. Lo verás en las redes sociales. Así que únete a nosotros cada día para eso porque debería ser muy divertido. pero gracias a todos por unirse a nosotros hoy realmente apreciamos que hayan pasado las últimas horas con nosotros esperamos que hayan obtenido una visión general que fue efectiva para cómo pueden configurar el monitoreo de sus aplicaciones y con los tres meses gratis con Sentry esperamos que puedan darle una prueba también nos quedaremos aquí solo por un par de minutos más en el discord y en la llamada de zoom para charlar si tienen alguna otra pregunta um de lo contrario Muchas gracias a todos por unirse. Realmente lo apreciamos. Gracias a todos. Adiós.

Una persona preguntó, ¿cuáles son las ventajas del monitoreo de Sentry sobre las herramientas enterprise como Dynatrace? Quiero decir, creo que esa pregunta siempre es muy difícil para mí de preguntar, lo siento, responder en términos de muy específicos. ¿Cuáles son las mejores ventajas? Yo diría que nuestra frase de cabecera si se quiere es que siempre intentamos pensar en el desarrollador primero en lugar de en el monitoreo como una herramienta, es más como el monitoreo como una herramienta para que un desarrollador solucione un problema rápidamente es como la mayor diferencia que siempre estamos intentando averiguar cómo podemos ayudar al desarrollador a ser más efectivo en la resolución de este problema lo más pronto posible. Entonces, no estoy seguro. No sé si tenemos como un Sentry versus Dynatrace simple pequeña cosa pero no creo que realmente tenga una. Es tan difícil compararlos, diría. Sí. Definitivamente, quiero decir, y definitivamente estamos añadiendo mucho más. Una cosa agradable que realmente aprecio de Sentry en general es que, de nuevo, somos de código abierto por lo que puedes saltar a nuestras discusiones de GitHub y dar feedback sobre el producto y cosas así. Intentamos tener integraciones con prácticamente todo. Bien. Genial. De nuevo, gracias a todos por saltar. Muchas gracias. Me alegro de que te haya gustado la masterclass. Nos vemos por ahí, a todos. Que tengan un gran día. Adiós.