Tracing: Frontend Issues With Backend Solutions

Te invitamos a seguirnos. Es una masterclass de dos horas. Tomaremos un breve descanso en el medio. Tendremos instrucciones para que puedas seguirnos. Ya que estás aquí un poco temprano, si quieres asegurarte de que al menos tienes, vamos a usar Visual Studio Code. Puedes usar el editor que quieras, Python y Docker. Así que si te aseguras de tener esas cosas y una cuenta de GitHub, entonces deberíamos estar listos para comenzar.

Y me disculpo si mi voz se pone un poco ronca. Me enfermé ayer. No sé de dónde. Mi hijo volvió a la escuela después de cinco días de no estar allí y debe haber recogido algo. Así que, ya sabes, ¿qué vas a hacer? Así que vamos a empezar. Tenemos una especie de inicio lento. Así que si la gente se está uniendo, gracias. Si la gente se está uniendo un poco de manera continua, eso debería estar totalmente bien. Pero bienvenidos. Mi nombre es Sarah Guthals y lidero DevRel en Sentry. Vamos a darte una breve introducción a Sentry y luego vamos a entrar en una demostración en vivo donde podrás seguirnos. Como dije, estoy basada en el estado de Washington, un poco fuera de Redmond. Y este es mi colega, Lazar. Hola a todos. Estoy en la oficina hoy, lo cual es bastante genial. Genial. Yo también estoy en una oficina, pero es mi oficina en casa. Muy bien. Así que vamos a empezar.

Un par de cosas administrativas. Como mencioné, el chat está abierto. Siéntete libre de decirnos desde dónde te estás conectando si aún no lo has hecho. Háznos saber cualquier pregunta que tengas y solo impresiones o comentarios o cosas que puedas tener allí también. Bien. Entonces, ¿qué vamos a hacer? Vamos a hacer un rápido análisis profundo de monitoreo. Te mostraremos esta aplicación que nosotros, bueno, Lazar ha construido, que tiene un frontend de Next.js y un backend de Django. Vamos a depurar esta aplicación juntos. Puedes simplemente seguirnos y mirar. Todo esto está disponible gratuitamente. Así que eres bienvenido a intentarlo ahora o intentarlo más tarde. Y luego te daremos tiempo para que realmente lo intentes por tu cuenta y compartas lo que has aprendido. Bien. Así que vamos a empezar.

Primero que nada, sabes, Sentry es una plataforma de monitoreo. Sin embargo, queremos empujar lo que eso significa. Qué monitoreo, APM, observabilidad, como todos estos términos, solo como las palabras mismas, implican una sensación de pasividad, y eso definitivamente no es lo que estamos tratando de construir. Lo que siempre estamos tratando de construir es algo que sea más proactivo, ni siquiera solo activo, sino proactivo. Así que queremos animarte a no solo observar, sino a depurar. ¿Y qué significa realmente esto? La forma en que me gusta pensar en ello es que las plataformas que apoyan a los desarrolladores a lo largo de su flujo de trabajo de depuración deberían ayudarte en tres áreas clave. Deberían ayudarte a contextualizar, priorizar y rastrear. Entonces, ¿qué queremos decir con esto? Bueno, contextualizar. Entender el contexto sobre lo que salió mal. ¿Está sucediendo en cada navegador o solo está sucediendo en Chrome? ¿Está sucediendo en cada dispositivo o solo en Android? ¿Está afectando, como, ya sabes, cada, como si tu aplicación estuviera completamente caída o solo está afectando esta área realmente específica de la aplicación que no mucha gente está usando? Este tipo de información te ayuda a contextualizar, te ayuda a entender dónde podría estar el problema y te ayuda a entender el siguiente paso, si deberías priorizar el problema. Y además de esa información, priorizar no es solo saber cuán importante es un problema en sí mismo, sino saber cuán importante es un problema en comparación con todos los otros problemas. Entonces, ¿tienes otros problemas que están escalando que están afectando tu proceso de pago frente a uno que podría estar afectando, como dije, alguna área más pequeña y específica de tu aplicación o tu sitio web? ¿Tienes un error o una ralentización que está afectando a uno de tus grupos de usuarios clave y a los que tal vez están pagando más y por lo tanto quieres priorizar esas correcciones más rápido? ¿O está afectando a personas que están en un plan gratuito que tal vez solo están probándolo? Obviamente, en un mundo ideal, arreglaríamos todos los errores lo más rápido posible y tendríamos una aplicación funcionando perfectamente, pero esa no es la realidad a la que nos enfrentamos todos los días. Y luego, una vez que has podido entender cuál es el problema y priorizar basándote en esos conocimientos si deberías o no arreglarlo, queremos tomar acción. La contextualización y priorización es como esa parte más pasiva, ya sabes, observar o monitorear. El rastreo es realmente donde entra esa parte activa donde estamos depurando activamente.

Así que en lugar de revisar montañas de registros o mirar comentarios de usuarios que solo dicen que está roto y tú dices lo sé, pero ¿puedes darme más información? ¿Puedes darme una captura de pantalla? ¿Puedes decirme algo que me ayude a resolver esto? Queremos ayudarte a rastrear hasta la causa raíz del problema. Idealmente, esa línea de código o esa consulta de base de datos que está causando ese problema. Poder hacer esa corrección rápidamente, desplegar esa corrección rápidamente y asegurarte de que eso no vuelva a ocurrir en el futuro. Así que nuevamente, tenemos tres áreas principales, contextualizar, priorizar y rastrear. Y esto es lo que significa tener una plataforma o una herramienta que te ayude a depurar.

Así que cualquier pregunta sobre monitoreo o depuración, por favor siéntete libre de añadirlas en el chat. De lo contrario, creo que lo más importante es que realmente veamos esto en acción, porque puedo decirte todo el día lo que está pasando. Pero realmente veamos qué está pasando, ¿verdad? Así que vamos a depurar algo código malo. Nuevamente, para comenzar, asegúrate de tener Docker y Python, algún tipo de editor. Vamos a clonar este repositorio. Pondremos enlaces en el chat. Y luego necesitas iniciar tu contenedor de Docker. Ahora, voy a hacer esto contigo. Así que, ya sabes, no necesitas, como, apresurarte, pero vamos a hacer esto juntos. Vamos a poner esto en marcha, y vamos a probarlo. Bien.

Esta aplicación que estamos depurando es una aplicación de tarjetas de memoria. Como dije, tiene un frontend de Next.js y un backend de Python Django. Así que vamos a intentarlo. Este es el repositorio. Es de código abierto. Es nuestro repositorio de tarjetas de memoria. Y solo voy a tomar esto aquí. Y voy a abrir VS Code. Y voy a clonar esto. Así que vamos aquí y clonamos el repositorio de GitHub. Genial. Y sabes qué, solo lo vamos a poner en documentos por ahora. Suena bien. Bien. Así que vamos a clonar esto, y ahora lo tengo en mi máquina local. Así que espero que hayas hecho lo mismo. Echemos un vistazo a lo que tenemos aquí. Lazar, tú construiste esto.

Lazar, tú construiste esto. ¿Quieres guiarnos un poco sobre lo que tenemos en este repositorio? Sí. Así que en la raíz, solo tenemos una carpeta, que es la carpeta de paquetes. Piensa en esto como un monorepo, pero no lo es. Es una estructura que contiene dos tipos diferentes de proyectos. Uno es la API, que está en Python Django. Y el otro es el web, que está en Next.js. También tenemos un archivo compose en la raíz del proyecto. Ahí vamos. Y esto básicamente une todo. Va a iniciar una base de datos Postgres para nosotros. Va a ejecutar algunos scripts de migración para configurar la base de datos después de que la ejecutemos por primera vez. Y luego va a arrancar el proyecto API, que es el de Django, y también el proyecto web, que es el de Next.js. Así que técnicamente, estamos iniciando tres servidores diferentes y un script de migración con esto. Y las carpetas principales para los proyectos son API y web. Cada uno de ellos tiene su propio Dockerfile, que hice funcionar para que incluso si cambiamos algo, debería técnicamente reiniciar el contenedor. Si no, es cuestión de volver a ejecutar el último comando que ejecutamos. Así que, sí, así es como está configurado el proyecto y podemos profundizar en detalles específicos más tarde cuando vayamos a entrar en el código.

Y aquí está la cosa. ¿Cuándo es útil una plataforma que te ayuda a depurar? Obviamente, cuando solo estás tratando de corregir un error. Pero más importante, tal vez cuando estás de guardia y entra un error crítico o una ralentización del rendimiento y en realidad no has tocado esta parte del código antes. No eres parte de ese equipo, digamos. Incluso si no vas a depurarlo activamente, necesitas entender a quién necesitas etiquetar a continuación. Esa es una instancia. Otra instancia es si estás en proceso de incorporación. Así que, no he explorado mucho esta versión de la aplicación de tarjetas de memoria antes. Tuvimos versiones anteriores. Esta vez estamos usando un backend de Django y Lazad ha reescrito y refactorizado completamente esto. Así que, esta es una base de código bastante nueva para mí. Así que vamos a aprender esta base de código juntos y vamos a aprovechar Sentry para poder hacer eso.

Bien. Así que, genial. Tengo mi repositorio clonado. Sí. Y tengo Docker en ejecución. Ahí está. Quiero decir, nada está en ejecución, pero lo tengo abierto. Así que, vamos a abrir una terminal. Y si recuerdo correctamente, en tu readme, también tienes esto, ¿verdad? Solo tenemos que ejecutar Docker compose. Wow. Fue el primer comando en la sección de introducción. Ahí está. Sí. Simplemente lo pasé por alto porque mi cerebro dijo, eso es de un color diferente. No voy a mirarlo. Compose up dash dash build. Perfecto. Sí. Así que vamos a ejecutar este comando aquí en la terminal NBS code. Y solo vamos a ver qué está pasando. El dash dash build, aquí tenemos los argumentos que no siempre pueden ser necesarios. Pero solo lo añadí por precaución porque a veces la recarga en caliente no funciona y no recoge los cambios. Así que, algunos de los cambios pueden no ser recargados. Si añado el, cuando añadí el dash dash build, todo estaba funcionando perfectamente. Así que, sí, tenlo en cuenta. Sí. Bien. Así que lo tenemos en ejecución. Lo tenemos en ejecución. Arrancado. ¿Lo revisamos realmente? Oh, esto fue de cuando lo estaba probando antes. Oh, déjame simplemente, así que, voy a, adelante. Iba a decir, estos están en modo dev. Así que va a ser bastante lento porque estamos ejecutando básicamente npm run dev, al menos para el sitio de Next.js. Así que va a ser más lento. Si lo construimos y lo ejecutamos, va a ser mucho más rápido, ¿o no? Veremos. Espero que sí. Porque eso fue bastante lento. Bien. Ahora, no tenemos Sentry instalado en esto todavía en absoluto. Vamos a hacer eso juntos. Así que, si nos encontramos con errores, vamos a ver qué podemos intentar averiguar, pero probablemente no va a ser mucho. Especialmente porque, ya sabes, todos ustedes que están asistiendo y yo, no estamos muy familiarizados con toda esta base de código. Así que Lazad podría ser capaz de ver algo sucediendo y decir, oh, sé exactamente dónde arreglar eso. No necesariamente vamos a poder hacer eso. Así que parece que tenemos algunas categorías. Tenemos tarjetas de memoria. Podemos gestionarlas. Podemos practicarlas. Y luego tenemos este práctico y útil poblar base de datos porque, ya sabes, en este caso, solo estamos haciendo una aplicación de demostración local. Sentry es más útil, sin embargo, cuando realmente lo tienes en producción y lo estás usando en el mundo real. Así que vamos a poblar la base de datos, asumiendo que alguien ya ha poblado algo de sus tarjetas de memoria. También podemos simplemente crear una haciendo clic en esto. Oh, tal vez no. Hmm. Bien. Interesante. En realidad, creo que sé. Tal vez porque no tenemos, oh, no, no sé.

Tendremos que resolver esto. Así que, vamos a hacer una actualización forzada por si acaso. Y voy a poblar la base de datos aquí. Nuevamente, esto está destinado a tener errores, pero no todos los errores fueron intencionales. Así que, veremos. Como con todo el código.

Así que, tenemos algunas tarjetas de memoria que han sido creadas. Lazat, ¿cómo creaste estas tarjetas de memoria tan rápido? AI. Estoy usando AI. Como todos los demás en este mundo. Me encanta. Increíble. Encontré un LLM gratuito que me permitió simplemente consultarlo con una pregunta específica y obtener la información de vuelta y analizarla. Noticia de última hora. Si el LLM genera mucho más de lo que puede transferir, me dará un JSON inválido. Así que, toda la operación de poblar la base de datos simplemente se romperá. Y no podré arreglar eso. Así que, en caso de que estés probando esto ahora mismo y poblar la base de datos no puebla realmente la base de datos, simplemente haz clic de nuevo.

Bien. Estamos trabajando con LLMs. No siempre son completos, etc. Pero, sí. Las tarjetas de memoria y categorías, como puedes ver, las categorías son súper tiendas, mega tiendas. Y las tarjetas de memoria, tienen una pregunta y respuesta. La pregunta es un producto que se puede encontrar en la súper tienda, que está siendo vendido por la súper tienda. Y la respuesta es un departamento. Así que, piénsalo como si te contrataran... Te contratan por una de estas mega tiendas y tu trabajo es aprender dónde está cada producto. ¿Verdad? Pero hay un... Quiero decir, ¿quién no sabría dónde están las bicicletas que eructan, sin embargo? Vamos. Sí. Están en la tienda de motocicletas, ¿verdad? Sí. Las montañas mentales. No hagas preguntas. Están en la agencia de viajes, ¿verdad? Así que, sí. Así que podemos practicar esto y elegir una de las mega tiendas. Vamos a elegir Wonderworld, iniciar sesión de práctica. Hmm. Eso es bastante lento. Así que, eso podría ser algo que queramos investigar. Afortunadamente, tenemos algo para beber. Wow. Ahí vamos. Zapatos voladores. Zapatos voladores. ¿Están en el departamento de zapatos? Están en la librería. Debería haberlo sabido. Bien. Así que, esto es lo que es la app. Papel tapiz susurrante en la tienda de pintura. Obviamente, banquetes olvidados en la cocina. No sé. Restaurante. Estuve cerca. Bien. Así que, entiendes el punto. Esperamos haber demorado lo suficiente para que no solo hayas clonado esto en tu máquina local y lo hayas ejecutado con Docker, sino también para entender un poco qué es esta aplicación y cuál es el alcance de esta aplicación. Bastante simple. Sin cuentas. Sin ningún tipo de seguimiento de nada.

Solo creando categorías, creando tarjetas de memoria, y pudiendo practicarlas. Bien. Tengo la sensación de que probablemente deberíamos configurar Sentry ahora, porque tenemos algunos problemas. No sé qué está pasando. Solo quiero poder contextualizar, priorizar y rastrear. Si aún no tienes una cuenta de Sentry, entonces vamos a – ¿dónde fue eso? ¿Primera pestaña, verdad? Ahí vamos. Este es el código QR y/o el enlace. Puedes verlo aquí arriba. Prueba Sentry, y también lo pusimos en el chat. Esto te dará tres meses gratis de básicamente spans y transacciones ilimitadas con Sentry. Podrás probar básicamente cada característica durante tres meses gratis. Te animamos a hacer esto si estás evaluando si quieres usar Sentry para tus propios proyectos personales o para tu empresa. Esto es crítico por un par de razones. Cuando configuras Sentry, y lo veremos ahora, configuras tasas de muestra para tus errores, para capturar transacciones, para capturar repeticiones de sesión, etc. Veremos qué es cada uno de esos. Estos tres meses son tu oportunidad para ver qué tipo de tasa de muestra podrías querer establecer. Usa esto, úsalo tanto como puedas, para que de esa manera puedas ver cómo configurarlo correctamente. Quiero mencionar que Sentry es de fuente justa. Si no has oído hablar del OpenSource Pledge aún, puedes ir a OSSPledge.com y verlo. Eso significa que Sentry está disponible en GitHub y podrías alojarlo tú mismo si quisieras. Además de eso, tenemos planes para desarrolladores individuales que son gratuitos. Si solo estás usando esto como un desarrollador independiente, puedes usarlo completamente gratis. Nuestro plan de equipo comienza en menos de $30 al mes. Eso no es por persona, es en total. Muy asequible, algo que definitivamente deberías probar. Si quieres seguir lo que estamos haciendo hoy, regístrate para esos tres meses gratis ya sea usando este código QR con ese código o ese enlace que está ahí arriba. Eso te dará ese mismo código en esos mismos tres meses. Tengo una cuenta de Sentry y tengo algunos otros proyectos en ejecución, pero vamos a instalar Sentry.

Tenemos dos proyectos. Nos diste algo de código aquí para configurar Sentry.

Así que, primero que nada, necesitamos configurar Sentry para el front-end. Ahora, la forma en que instrumentas tu aplicación con Sentry es básicamente con un montón de SDKs. Queremos configurar Sentry para el lado del front-end de Next.js y queremos configurar Sentry para el lado del back-end de Django. Al hacer esto, podremos rastrear problemas que tal vez aparezcan en el front-end, como una ralentización o un usuario diciendo, oye, algo está mal. Podremos rastrear esos problemas hasta el back-end, como tal vez hay alguna consulta de base de datos sucediendo en el Python que está causando la ralentización. Configuraremos esto tanto para el front-end como para el back-end, y recomendamos encarecidamente que hagas esto para tus proyectos también.

Regístrate o inicia sesión en Sentry y vamos a crear un nuevo proyecto Next.js y luego vamos a ejecutar el asistente de configuración. Estos son los comandos para el asistente de configuración, pero ni siquiera tienes que recordarlos porque una vez que crees un nuevo proyecto Next.js en Sentry, lo compartiremos contigo. Vamos a ir a proyectos. Esto es Sentry. Si no lo has visto antes, nos sumergiremos en esto y exploraremos todas las cosas en breve. Vamos a crear un nuevo proyecto, vamos a crear un proyecto Next.js. ¿Mencioné que Sentry admite más de 100 lenguajes y frameworks? Es ridículo. Estos son algunos de los populares que muchos de nuestros clientes usan, pero realmente puedes hacer cualquier cosa. Es una locura todo el soporte que tenemos. Encuentra lo que necesites, pero para este caso, vamos a usar Next.js. Elegiremos Next.js. Mantendremos esto tal como está por ahora porque quiero tratar de averiguar qué necesito cuando estoy haciendo este proyecto. Como con cualquier herramienta, al igual que con las tasas de muestra, quieres ver qué alertas son útiles para tu equipo, para tu proyecto, para la forma en que se está utilizando tu aplicación o sitio web, y puedes ajustarlas en cualquier momento. Vamos a quedarnos con alertarme sobre problemas de alta prioridad. Confío en que Sentry identifique si algo es de alta prioridad. Vamos a hacer eso por ahora. Vamos a tener notificaciones por correo electrónico. También puedes notificar a través de cualquier integración que tengas. También podríamos decir notifícame en Slack, pero por ahora solo haré notificaciones por correo electrónico. Vamos a cambiar esto. Voy a llamar a esto flashcards React server. Lo mantendremos en este equipo. Crear proyecto. Obtén las diapositivas para referencia futura. Honestamente, las diapositivas, esta información aquí está toda en el repositorio, y todo lo demás estará solo en los documentos o en Sentry. Pero sí, deberíamos poder enviarte un enlace para verlas. Tal vez si quieres hacer que el enlace sea accesible solo para ver y compartir, eso podría ser útil. Luego podemos ejecutar el asistente. Este es un comando grande y largo. Esto es más largo de lo que mostramos aquí. Eso es porque puedes simplemente ejecutar este comando aquí, npx at SentryWizardLatest-i Next.js. Sin embargo, cuando haces eso, te hará una serie de preguntas. Por ejemplo, ¿estás autoalojando o estás usando SAS? ¿En qué organización estás tratando de encontrar el proyecto? ¿Cuál es el proyecto? Puedes simplemente ejecutar la primera mitad de este comando, pero si no quieres responder a todas esas preguntas, puedes simplemente ejecutar la versión más larga. Dado que puedes simplemente copiarlo, es bastante simple. Vamos a ir adelante y simplemente copiar este comando aquí. Voy a abrir VS Code de nuevo. Voy a ejecutar un nuevo terminal. Voy a entrar en mi web. Ahora estoy aquí y vamos a pegar eso. Aquí está el comando. Esto configurará Sentry para mí automáticamente. Vamos a hacerlo. ¿Puede instalar los siguientes paquetes? Sí. Oh, no. ¿Qué pasó? El archivo existe. Pensé que eliminamos Sentry. Sí, tal vez. Está en la caché. Está en la caché. Oh, no. Está en la caché de inicio. Sí. Como si ya tuvieras el asistente instalado, ¿es ese el caso? ¿Puedes ejecutar esto de nuevo? Creo que ese podría ser el caso. Creo que es que ya tenía el asistente instalado. Ejecútalo de nuevo. ¿Quién anticiparía esto? Bueno, está bien. Si es solo la caché, podemos simplemente eliminarla. También voy a intentar esto porque me pregunto si tal vez hay algo como... Sí, supongo que será lo mismo. ¿Puedes hacer como rm-rm? Al menos sabes que es en vivo. Sí. Bueno, no rezamos a los dioses de la demostración. No rezamos a los dioses de la demostración. Bueno, no rezamos a los dioses de la demostración. No lo hicimos. Eso es lo que obtenemos. Queríamos entrar en ello. Bien. Rm-rf. Hagamos tilda slash npm.npm slash underscore CA. Underscore C-A cache. C-A cache. Si es caché, sí, ahí vamos. O lo mismo. Sí. Permiso denegado. Así que necesitamos sudo. Sí. Ctrl C e intenta sudo esto. Si es caché, podemos eliminarlo entonces. Va a poblarlo de nuevo. Pero esta vez, con suerte, será correcto, ¿verdad? Odio cuando estás en terminal y no te muestra cuánto has escrito porque...

Al menos como estrellas, ¿verdad? Lo sé, ¿verdad? O al menos dime cuando haya sido totalmente eliminado, ¿verdad? Está bien. No, no, no esperes. Está eliminando. Oh, no funcionó. Está bien, está bien. Sí. Intentémoslo de nuevo. Está bien. Intentemos esto de nuevo, JK. Y sí, adelante y ejecuta eso o instala ese paquete para mí. Lo aprecio. Maravilloso. Mira eso. Gracias. Sí, la lucha nunca termina. Esto es cierto. Esta es la parte de ser desarrollador que odio más, pero también es como lo que lo hace... Lo que nos mantiene humildes, llamémoslo así.

Está bien, sí, ya tengo una cuenta de Sentry. Solo va a verificar. Así que aunque especificamos qué proyecto y qué organización, obviamente, necesita verificar que estábamos en la misma organización. Obviamente, necesita verificar que estamos autorizados para acceder a eso, por lo que necesita hacer una verificación. Y si no especificas el proyecto y la organización, puedes elegir eso en el navegador. Puedes.

Está bien, entonces, ¿quieres enrutar las solicitudes de Sentry en el navegador a través de un servidor Next.js para evitar bloqueadores de anuncios? Esto va a ser una preferencia personal para ti, dependiendo, nuevamente, de tu aplicación y del tipo de cosas que estás haciendo y cómo están configuradas las cosas. Nota, sin embargo, si dices que sí, eso obviamente, potencialmente aumentará la carga de tu servidor y la factura de alojamiento. Pero obtendrás todas las cosas que están causando problemas, independientemente de los bloqueadores de anuncios. Así que vamos a decir que sí por ahora, porque solo vamos a ejecutar esto localmente de todos modos. Realmente no importa en este caso. Lo que esto hace es básicamente configurar una ruta API para ti, de modo que en lugar de que el SDK del navegador Next.js, que es cuando instalas el SDK de Next.js instala el Node.js en el servidor y también el navegador. El navegador no va a enviar solicitudes a Sentry. Va a enviar solicitudes al servidor y el servidor teniendo la ruta API básicamente hará de proxy. Tomará las entradas y luego simplemente las enviará a Sentry. Pero los bloqueadores de anuncios, cuando vean esta solicitud, van a ver que está enviando la solicitud al mismo origen, ¿verdad? Es el servidor Next.js. No es como un servidor de terceros. Eso podría ser analítica. Eso podría ser anuncios. Eso podría ser otra cosa. Así que no lo va a bloquear. Así es como evitamos eso. Pero sí, significa que el servidor necesita manejar eso, y si estás ejecutando sin servidor en Vercel, eso significa que podrías incluso, ya sabes, vas a obtener una factura un poco más grande. Pero sí, tenlo en cuenta. Esto es cierto. También, solo para notar, Sentry es extremadamente primero en privacidad, y así lo mencionaremos en muchas áreas. Pero como una mención inicial, por ejemplo, incluso en nuestras páginas de marketing, no tenemos cookies. Y la razón es que no queremos rastrearte. No queremos rastrear a tus clientes. Queremos ayudarte a depurar, y ese es el límite hasta el cual recopilamos datos e información y almacenamos datos e información. Así que tienes mucho control sobre eso, también. Tenemos residencia de datos en la UE, además de los EE. UU.

Así que si necesitas tener tus datos almacenados en otro lugar, y luego, por supuesto, nuevamente, puedes autoalojar. Está bien. ¿Quieres habilitar anotaciones de componentes React para hacer que las migas de pan y las repeticiones de sesión sean más legibles? Voy a decir que sí, obviamente, porque cuando estoy depurando, especialmente si es un tipo nuevo de base de código, esto va a ser interesante. Ahora, creo que esto es más interesante cuando estás ejecutando, como, una aplicación React nativa. Pero no he tenido, como, un problema cuando estoy ejecutando solo una aplicación XJS.

Sigo olvidando que he hecho clic fuera de mi terminal. Está bien. ¿Quieres habilitar el tracing para rastrear el rendimiento de tu aplicación? Entonces, nuevamente, como mencionamos, porque vamos a instrumentar nuestro frontend y nuestro backend con Sentry, podremos no solo rastrear a través de cada capa individual, sino también a través de las capas y, en particular, poder rastrear el rendimiento que está ocurriendo. Entonces, dentro de un trace, podremos ver cuándo se inició esto, fue todo el camino de regreso a esta consulta de base de datos y de regreso, y aquí están esas partes que están ralentizando, y te lo mostraremos visualmente. Así que sí, definitivamente, esto va a ser una parte de esta demostración. Así que, si estás siguiendo, asegúrate de hacer clic en sí allí.

¿Quieres habilitar la repetición de sesión de Sentry para obtener reproducciones similares a videos de errores durante una sesión de usuario? La repetición de sesión tiene que ser, como, mi característica favorita de Sentry. Es una recreación del DOM. Como, es una recreación de los cambios del DOM. Así que no estamos capturando video y enviando video a los servidores de Sentry de ninguna manera. No te preocupes. También estamos ofuscando todo el texto e imágenes en el dispositivo del cliente antes de enviarlo a los servidores de Sentry. Y tienes controles sobre eso, pero esencialmente puedes ver cuándo hay una ralentización, cuándo hay un error, qué estaba sucediendo, qué estaba haciendo tu usuario, tu usuario real, realmente en su dispositivo real cuando esto sucedió. Esto puede ser particularmente útil para esos problemas realmente difíciles de depurar. Hubo uno, por ejemplo, del que estaba hablando con un cliente donde parecía que el usuario estaba haciendo clic con rabia. Esto es cuando el usuario está haciendo clic varias veces en un elemento en un corto período de tiempo. Lo llamamos un clic con rabia porque probablemente están muy molestos. Y los desarrolladores, como, revisando los registros y no podían entender por qué en el mundo esto estaría sucediendo. ¿Por qué un usuario estaría haciendo esto en absoluto? Resulta que había, como, un pop-up sobre él. Y ese pop-up, como, no estaba funcionando correctamente y no era clicable. Y entonces, su aplicación estaba realmente capturando el clic. Fue solo un error salvaje. Realmente no tenía nada que ver con donde pensaban en la base de código que este problema estaba. Y sin poder ver visualmente lo que sus usuarios estaban haciendo, pudieron resolver eso. Así que también te mostraremos la repetición de sesión. Y recomendamos que configures eso.

¿Quieres crear una página de ejemplo para probar tu configuración de Sentry? Recomiendo que hagas esto cuando estés ejecutando esto por tu cuenta. Solo para que puedas empezar a tener la sensación de cómo funciona Sentry. Cómo, ya sabes, ocurre la interacción del usuario. Y luego entrar en los paneles de Sentry y poder ver realmente lo que está sucediendo. En este caso, voy a decir que no porque de eso se trata toda esta demostración.

¿Estás utilizando una herramienta de CI-CD para construir y desplegar tus aplicaciones? Nuevamente, soportamos más de 100 lenguajes y frameworks. Tenemos integraciones con cosas como Slack y Teams. También, obviamente, tenemos integraciones con la totalidad del resto de tu flujo de trabajo de herramientas de desarrollo. Así que, si estás usando GitHub Actions o GitLab o Jenkins o Vercel, lo que sea que estés usando, probablemente tengamos algún tipo de soporte para ello. En este caso, ni siquiera estamos desplegando. No nos vamos a preocupar por esto por ahora porque lo que vamos a hacer es simplemente ejecutar esto localmente. Pero recomendamos encarecidamente hacer esto. Sí.

Entonces, ¿en qué forma se va a mostrar el video de imagen a los desarrolladores de software con la repetición de sesión? Vamos a mostrarte que se verá como un video. Es una reproducción similar a un video. Así que reproducimos lo que estaba sucediendo de manera similar a un video. Lo verás.

Bien. Así que, hemos instalado con éxito el Sentry Next.js SDK. Maravilloso. Sin embargo, eso no es el final porque tenemos un back end. No solo estamos tratando con el front end. Así que, volveremos aquí. Y Lazar ha compartido algunas instrucciones para ahora cómo configurar el proyecto Django. Así que, de hecho, instalé esto solo en la web. ¿Debería haber hecho eso o debería haberlo instalado en su totalidad? Ahora, necesitamos entrar en el proyecto de Python ahora. Y puedes instalarlo con Pip si estás ejecutando Python gestionado por run server. Pero porque estamos en un entorno Docker, técnicamente, podemos entrar, ¿verdad? Podemos entrar en el contenedor y ejecutar Pip nosotros mismos o ejecutar Python nosotros mismos. Pero es mejor si simplemente lo añadimos al archivo requirements.txt para que cuando reconstruyamos el contenedor Docker, el Sentry SDK se instale automáticamente. Así que, sí, podemos simplemente añadir esto donde sea aquí. Ahí vamos. Presiona guardar. Hecho. Y así es como lo instalamos. Ahora, necesitamos ir y pegar eso justo ahí en el settings.py. Así que, settings.py en Django es como NextConfig.js en Next.js. Está en source. Está en shared esta vez. Bien. Así que, estoy haciendo un poco de DDD, un poco de diseño dirigido por el dominio en este proyecto. Así que, sí, infra. Eso fue correcto. Era infra. Django, sí. Ahí vamos. Por eso. Bien. Así que, en cualquier lugar aquí arriba en las importaciones, puedes, sí, debajo del entorno, por ejemplo, debajo del env. Carguemos eso primero. Y luego vamos a inicializar el Sentry SDK. Ahora, esto significa que necesitamos proporcionar un DSN, ya sea codificar el DSN o extraerlo de las variables de entorno. Para la demostración, podemos simplemente codificarlo. Así que, una vez que creemos el proyecto, vamos a obtener el DSN. Simplemente lo codificaremos en el proyecto. Y DSN, por cierto, es básicamente cómo le dices al SDK, aquí es donde necesitas enviar los datos de telemetría. Lo que captures necesita ser enviado aquí. Aquí, en este enlace, ¿verdad? Bajo esta organización. Lo que significa que también necesitamos un proyecto Django. Sí. También necesitamos un proyecto Django. Sí. Así que, vamos a crear ese proyecto Django. Ahí vamos. Y vamos a llamar a esto Flashcards Django. Aquí están esas instrucciones si quisieras ejecutarlo. Como una aplicación independiente. Aquí está mi DSN. No te preocupes, lo borraré después. Y luego puedes verificar con eso.

Bien. Ahí vamos. Entonces, como puedes ver, es básicamente una URL extraña que indica dónde está tu proyecto. ¿Verdad? Como mencionó Sarah, dado que Sentry es una fuente justa, puedes ponerlo en tu servidor. Eso significa que el DSN necesitará apuntar a tu servidor y la URL de tu servidor. ¿Verdad? Entonces, ese es el DSN.

Y tenemos la tasa de muestreo de trazas y la tasa de muestreo de perfiles. Y lo que esto hace es, si lo configuras en uno, eso significa que el 100% de las trazas y perfiles capturados durante una sesión se enviarán a Sentry. Y para el desarrollo, eso está bien. Pero recomendaría encarecidamente reducir eso a como 15% o 30%, como máximo, 30. Dependiendo de cuántos usuarios tengas y con qué frecuencia se use tu aplicación en producción. Entonces, si estás probando, envía todo. No va a ser, ya sabes, no va a ser demasiado duro con la cuota. Pero si estás llevando esto a producción, tienes que reducir.

Y no se trata solo de tu cuota. Obviamente, eso va a ser crítico. Entonces, cuando pensamos en Sentry y cómo se valora Sentry, como mencioné, tenemos múltiples planes. También puedes alojarlo tú mismo. Entonces, ya sabes, lo que sea. Pero esto es realmente importante de entender. Tenemos ciertas cuotas para ciertas partes de la aplicación. Como el monitoreo de errores. Puedes tener hasta 5,000 errores al mes. En el plan gratuito, hasta 50,000 en otros lugares. Trazado, obtienes 10 millones de spans en total. Repetición de sesión, obtienes 50 repeticiones en total, etcétera. Pero a medida que te desplazas hacia abajo, lo que encontrarás es que si necesitas más, puedes realmente aumentar a, no sé, 10 mil millones de trazas al mes. Obviamente, ninguno de nosotros necesita eso. Ese es un número ridículo. Y no se trata solo de la cuota y no se trata solo del hecho de que este es un número ridículo. Eso podría ser útil para alguien como, no sé, Amazon, ¿verdad? O Disney o lo que sea, ¿verdad?

De lo que se trata es de si es útil o no. Así que por eso, nuevamente, recomendamos encarecidamente que establezcas estas tasas de muestreo. Para este caso, sí, configúralo en 100 para que de esa manera podamos realmente capturarlos mientras hacemos esto y asegurarnos de capturarlos todos para que podamos rastrear efectivamente. Cuando estés por primera vez en producción, configúralos bajos. Configúralos muy bajos para comenzar y ver si necesitas más información para poder depurar efectivamente. No necesitas cada instancia de alguien encontrando el mismo error exacto para poder depurar efectivamente, ¿verdad? Necesitas algunas instancias de eso para capturar la variedad de tus usuarios y su red, ya sabes, la fiabilidad y sus dispositivos y todo eso. Necesitas algunos ejemplos de eso para poder depurar, rastrear, y resolver problemas efectivamente. Cuando piensas en esto, nuevamente, en mi opinión, cuando estás aprovechando herramientas como Sentry, cuando estás aprovechando AI, lo que sea que estés aprovechando dentro de tu flujo de trabajo de desarrollador, úsalos para poder permitirte elevar tu pensamiento y convertirte nuevamente en ingeniero y no solo en codificar todo el día y pensar como, ¿cómo se va a usar esto? ¿Cómo lo van a usar mis usuarios? ¿Cómo lo va a usar mi equipo? ¿Cómo voy a usar esto para depurar? Y establece tus tasas de muestreo y configura tu proyecto para que coincida con eso. Bien, me bajaré de mi tribuna ahora. Genial. Así que tenemos Sentry instalado. ¿Deberíamos mostrar también qué cambios se hicieron con el, tenemos esos errores globales pero qué son los errores globales? El error global es como algo extra. Es básicamente cómo manejas errores que surgen de cualquier componente en el árbol de la interfaz de usuario y Sentry agrega eso. Eso es como errores dispersos. También queremos asegurarnos de que enviamos esos a Sentry. Ese es el error global básicamente. Ahí está. El archivo instrumentation.ts sigue siendo una cosa de Next.js. Ahí vamos. Y esto es básicamente cómo registramos los servidores y los SDKs de Edge cuando desplegamos y ejecutamos esto. No sé, por ejemplo, en nuestros servidores va a ser el Node.js o si desplegamos como un serverless en Vercel, va a ser el segundo si el tiempo de ejecución es va a ser Edge. Así que queremos configurar la configuración de Edge. ¿Cuáles son esos en la parte inferior? Agregamos tres. Así que tenemos la integración de repetición que se agregó porque dijimos sí a incluir la repetición. Tenemos una tasa de muestreo de trazas del 100% también. Tasa de muestreo de sesión de repeticiones y tasa de muestreo de repeticiones en error. Así que esto es probablemente, esto está configurado al 10%. Puedes nuevamente configurarlo al 100% mientras estás en desarrollo, lo cual voy a hacer. Solo para que de esa manera podamos ver todo y luego cada vez que haya un error, también obtendremos una repetición para eso. Sí, así que eso fue como el 10% en caso de, solo como el 10% de las sesiones si quieres ver cómo la gente generalmente usa tu aplicación. Pero si ocurren errores, entonces definitivamente, sí, en caso de un error, definitivamente queremos ver una reproducción. Genial. Y luego tenemos el Edge en el servidor y estos también son importantes porque estamos perdiendo algo. Bien. Estos dos, como mencioné, cuando desplegamos ya sea en nuestro servidor, en un VPS, o en Vercel, o Netlify, o donde sea que estemos desplegando la aplicación Next, así es como se configurará la parte de backend de la aplicación Next.js, el SDK de backend será configurado. Así que para, porque la aplicación la construí como el contenido del sitio del navegador Next.js envía la solicitud al sitio del servidor Next.js y luego el lado del servidor Next.js envía la solicitud a la API de Django. Así que la comunicación ocurre entre la API de Django y la parte del servidor de Next.js, no la parte del navegador. Y para conectar los rasgos, necesitamos agregar una propiedad más aquí porque si no la agregamos, cuando comenzamos el rastreo, la parte de Next.js simplemente querrá, no va a propagar el rastreo iniciado al backend porque no sabe qué es el backend. Y si no le decimos explícitamente que lo haga, no va a filtrar nuestro rastreo por nosotros. Así que necesitamos agregar una propiedad de objetivos de propagación de trazas aquí en Edge y también en el servidor, dependiendo de dónde estemos desplegando. Y voy a abrir los documentos, para que de esa manera podamos, también sepas, porque no sé ustedes, pero no soy bueno recordando lo que la gente me dice al azar cuando estoy en una masterclass o estoy viendo un video. Más bien quiero saber dónde puedo ir a averiguarlo más tarde cuando esté solo y esté tratando de resolverlo por mi cuenta. Y así, este es nuestro, voy a alejar un poco porque estoy muy acercado aquí, lo que lo hace ver un poco extraño. Bien. Así que, estos son nuestros documentos de Next.js a nivel alto aquí. Y así, lo que estamos diciendo es que necesitamos agregar esa propagación de trazas y creo que queremos hacer algo, no está en la configuración manual, ¿verdad? Debería estar aquí. Si lo buscas, deberías verlo. Debería haber como una propiedad aquí porque esta página es básicamente aquí están todas las propiedades y cómo puedes usarlas. Todas las diferentes maneras. Sí, así que puedes como, voy a encontrarlo aquí. No, no está aquí. Va a estar en la configuración de rastreo. ¿Por qué no buscamos en los documentos? Exactamente, sí. Sí, configuración de rastreo. Bien, así que tenemos configuración de rastreo. Aquí vamos. Objetivos de propagación de trazas justo aquí. Sí, es un array de registros temporales o a largo plazo del sitio de solicitud y podemos ir a la fuente de datos desde nuestro Docker de Next.js aquí. Así que, tenemos una fuente de datos aquí que necesitamos sí, es un array de cadenas o coincidencias de regex y lo que vamos a poner dentro del array va a ser dos cadenas localhost y solo API. Sí, así que localhost en lugar de mi proyecto, pero esta va a ser tu URL cuando lo despliegues. Estoy literalmente solo localhost sin HTTPS, sin nada. Sí, y luego la API solo toma todo y ponlo en una cadena. No estoy acostumbrado a, oh Dios mío, deja de pretender que sabes lo que estás haciendo. Bien, a veces nuestros editores se vuelven demasiado inteligentes para nosotros. Sí, así que necesitamos esta línea en el archivo de configuración del servidor también. Solo en caso de que queramos desplegar esto en serverless versus venta en ambos casos, queremos propagar el rastreo al sitio de django. Así que cuando abramos el rastreo en Century, podemos ver todo el flujo de operación. Hermoso. Eso es todo. Perfecto. Sí, así que ahora está funcionando y deberíamos simplemente detener el Docker y reconstruirlo. Sí, tenemos cosas nuevas en los requisitos de txt. js. En package. json, así que solo vuelve a ejecutar el comando de construcción. Si quieres detenerlo, solo Ctrl C para detenerlo y vamos a volver a ejecutar Docker compose up build. Bien, en unos minutos vamos a asegurarnos de que realmente podamos comenzar a rastrear un error y voy a mostrarte la interfaz de Century y luego vamos a tomar un breve descanso. Así que si tienes alguna pregunta antes de ese breve descanso, por favor siéntete libre de comenzar a hacerlas en el chat ahora y durante ese breve descanso, tendrás la oportunidad de explorar Century ahora que lo tenemos instrumentado. Así que sí, solo quería darte esa advertencia justa. Bien, vamos a volver aquí. Oh, ¿hubo un error? No estaba prestando atención. Intenta actualizar, pero creo que vi algo. Bien, sí, muy bien. Bien, veamos. Vamos a depurar esto entonces. Módulo no encontrado en la aplicación next config. ¿Puedes desplazarte un poco hacia arriba? Oh, hay un error. Bueno, no es un error. Está en la parte superior, pero va a ser un error de tipo porque es un js. Sí, no nos preocupamos por eso. ¿Puedes abrir la terminal y desplazarte un poco hacia arriba para que puedas ver cuál es el error real? Century next js. Eso debería haber sido cargado porque agregamos Century next js en el package.

Así que recreando este contenedor de Docker, instala Century next js. Ahí vamos. OK, intentemos esto. ¿Puedes abrir el Docker? ¿Puedes abrir la aplicación Docker?

Sí, ahí vamos. Así que probablemente necesitamos decir Docker compose down para detener este contenedor porque ahora mismo está como está en pausa. Sí, solo asegurémonos de que recreamos el contenedor. Así que Docker compose down. Así que vuelve a la aplicación Docker. No debería haber nada. Sí, no hay nada allí. Vamos a simplemente ejecutar el comando de construcción de nuevo. Esta configuración en particular es complicada también porque estamos usando Docker. Como viste, configurar Century solo en el front end fue solo usar el asistente en ese back end fue solo agregar a los requisitos y luego, ya sabes, agregar el init para el SDK de Century y luego lo único que hicimos fue agregar estas propagaciones de trazas aquí. Así que conectamos los dos proyectos. Pero debería funcionar ahora porque no vi el módulo no encontrado.

Solo necesitábamos recrear los contenedores. Muy bien, buen punto. Ahí vamos. Ahí vamos. OK, así que aquí está nuestra aplicación de flashcards de nuevo ahora con Century funcionando. Así que hubo un par de cosas que sucedieron cuando ejecutamos esto la primera vez y quiero solo mostrar un poco sobre lo que está pasando. Así que una cosa fue cuando fuimos a practicar, fue un poco lento si recuerdo bien. Creo que ese fue uno de ellos. Así que vamos a hacer clic en practicar. Eso fue un poco lento. En general, diremos iniciar sesión de práctica. Eso es lento seguro. Así que esto podría ser un problema que esperemos capture algo sobre smartphones durmiendo. Por supuesto, casi dije el, ya sabes, departamento de camas. Lo mismo. Así que tenemos eso. Y sabes qué? Solo quiero jugar un poco más con esta aplicación antes de abrir Century, ver si podemos encontrar otros problemas. Primero que nada, no sé si sabes esto, Lazard, pero en realidad abrí mi propia tienda. Oh, sí. Es, es, es así, ya sabes, sin la H. En realidad se llama Dr. G. Sí. Sí. Así que me llaman Dr. Guthals en otros lugares, pero Guthals es un nombre difícil de decir. Así que mucha gente solo me llama Dr. G. Y creo que ese es el nombre de mi supertienda. Puedes encontrarlo en el al lado del río donde vivo. Así que vamos a crearla. OK, genial. Categoría creada. Y voy a abrir una tarjeta de memoria y voy a decir, como, ya sabes, dónde vamos a tener que decir dónde, ¿verdad? Solo estamos haciendo esto. Así que tal vez como salmón. ¿Dónde vas a encontrar eso? Bueno, obviamente, en la gran roca a la izquierda. ¿Verdad? Y vamos a agregar esto a la categoría Dr. G que debería ser un error porque estoy bien. Aparentemente eso no se agregó. Sí, bueno, está bien. Categoría creada. Aún así lo hizo. Lo hizo. Así que eso es un poco molesto. Quiero más, más cosas. Estoy entrenando a un grupo completamente nuevo de personas en mis supertiendas. Así que voy a agregar un montón más de tarjetas de memoria para que puedan practicar esto en su tiempo libre, porque ese es el tipo de negocio que escribo. Estoy bromeando. Nunca haría eso. Pero vamos a seguir adelante y solo, como, agregar un montón más de tarjetas de memoria y hacer que parezca que tenemos tantos productos en todas nuestras supertiendas. Voy a esperar a que esta última se llene y solo voy a desplazarme hacia abajo hasta el final. Veamos qué tenemos que decir. Oh, haz esto. Correcto. Rooks. Sabes qué? Esto no está en suministros de ciencia. Esto está en el río. No sé por qué. Pero solo mantenlos allí. OK. ¿Es eso un error? Parece que sí. Ahí vamos. Oh, quiero decir, eso fue lento. Lo actualizó. Whoa. Whoa. OK. Lo siento, hice clic con rabia por un segundo allí. Lo siento. OK. Creo que hemos encontrado algunos errores, esperemos. Así que vamos a seguir adelante e ir a la escuela.

Vamos. ¿Sabes qué? Voy a. Oh, mira eso. Así que ya tenemos un par de issues. Así que vamos a hacer ese. Y también voy a mostrar este aquí. Así que vamos a seleccionar ambos proyectos. Nota que aquí en la vista de issues, tienes la capacidad de seleccionar qué proyectos quieres ver. También puedes especificar qué entornos. En este caso, solo tenemos un entorno. No estamos especificando entorno. Así que está bien. Pero podrías tener un entorno de desarrollo, un entorno de staging, un entorno de producción, etcétera. Y también puedes especificar tu rango de tiempo. Así que podemos decir los últimos 90 días, aunque solo hemos estado haciendo esto durante la última hora. Pero eso es solo como el valor por defecto.

Otra cosa que puedes hacer es filtrar o buscar para que podamos buscar cosas que no están resueltas. Podemos buscar cosas que son de alta prioridad. Y Sentry te permite hacer cualquier tipo de etiquetado personalizado, que también puedes luego buscar etiquetas específicas aquí. Pero incluso solo con los valores por defecto, lo que veo aquí es que tenemos dos issues ocurriendo. Oh, nombre de categoría demasiado corto. Apuesto a que eso es lo que pasó con mi categoría. Así que eso es interesante. Y luego también tenemos este error de valor. Y luego también tenemos el error de sintaxis. Así que no sé. Vamos a refrescar también, ver si algo más ha aparecido. No. No sé. ¿Deberíamos empezar con el error de sintaxis? Ese tiene como una calavera y dice no manejado. Sí. Sí. Podemos entrar en él y veamos qué dice. Qué es, ya sabes, qué tipo de datos nos da. Sí. Bien. Así que esta es nuestra vista de issues. Podemos ver que, ya sabes qué, ¿no actualizamos, subimos nuestros source maps? No lo hicimos. Oh, porque esto no se ve súper útil. Esto no se ve súper útil. Así que definitivamente quiero hacer eso. Pero tenemos como un poco de migas de pan. Creo que necesitamos actualizar nuestros source maps. Sí. Va a darnos mucho más. Hagámoslo. Guías, source maps. Bien. Así que los source maps van a habilitar realmente trazas de pila legibles para tus errores de Sentry. Esto obviamente va a ser realmente importante porque no sé ustedes, pero solo como leer esto no es súper útil. Y también esto es lo que obtendría si solo estuviera depurando localmente. Correcto. Y solo abriera las DevTools en Chrome, como esto es lo que obtendría. Y así quiero algo más que eso con mi compañero de depuración, AKA Sentry. Bien. Así que vamos a seguir adelante y usar el CLI tal vez. Sí, podemos hacer eso. Solo necesitamos etiquetar la release. Sí. Sí. Pero estoy pensando porque estamos ejecutando el Docker con NPM run dev. Correcto. Cuando estamos realmente construyendo la aplicación con NPM run build, el SDK de Next.js automáticamente subirá los source maps por nosotros. Así que supongo que lo que necesitamos hacer es o modificar el archivo Docker si quisiéramos para el Next.js o simplemente hacer build y ejecutar localmente. Pero vamos a intentar el Docker. Así que la última línea en este archivo, NPM run dev. No queremos hacer eso. Hagamos NPM run build en lugar de dev. Y luego añadimos más cadenas. Y luego haremos y termina como un doble ampersand. Sí. Y luego de nuevo, NPM run start. En lugar de eso, queremos hacer start. Así que esto va a hacer eso por nosotros. Sabes, invocará el comando de build y luego comenzará. El comando de build obtendrá todos los source maps y los subirá como artefactos. Así que intentemos esto. Tenemos el dot env, sentry build. Eso es importante porque esa es la clave de API. Va a autorizar la computadora para subir en nuestro nombre. Sí. Sí. Así que de nuevo, compose down. Y luego vuelve a ejecutar el comando. Una cosa que quiero mencionar con nuestros Docs es que de nuevo, puedes buscar en todas las plataformas. Así que incluso si no tenemos necesariamente como un SDK específico para uno de los miles de frameworks de JavaScript que existen hoy, el SDK básico de JavaScript soporta todos estos diferentes. Así que puedes entrar y obtener Docs que son específicos para lo que estás usando. Y eso es solo el JavaScript aquí. Obviamente tenemos otros también. Así que puedes entrar y ver si no estabas usando Django específicamente, pero estabas usando, no sé, fast API o Flask, entonces puedes especificar esos aquí también.

Así que vamos a reintentar algunas de estas cosas y ver qué está pasando aquí. Voy a reintentar agregar a Dr. G aquí. Todavía está cargando. ¿Podemos mirar los logs? Sí. Oh, todavía está construyendo el... No, otra vez no. Bien. Pero al menos nos mostró. Bien. Regresa. Esos son los logs. El nombre de la categoría demasiado corto que acabamos de ver. Y está bien. ¿Puedes regresar y, sí, reiniciar, refrescar el navegador de nuevo? Sí. Y prueba el mismo proceso. Sí, es bastante rápido esta vez. Dr. G. Sí. Así que dice que está creado, pero no está creado. Ahora vamos a ver el nuevo error de Sentry y con suerte tendrá source maps. Así que hace ocho minutos, bien. Y ahí vamos. Así que solo al agregar los source maps, realmente obtenemos el código versus solo... Esto está en el sitio de Python. Tenemos los source maps en el sitio de Python, pero también tenemos los source maps en el... Ese debería haber sido el otro error. Sí. Lo cual... No nos encontramos con él todavía. Sí. Sí, no tenemos... Necesitamos provocar un error en el... Veamos. Si tenemos uno que sea reciente... Ese no era. Este era el popular... Ese es uno viejo. Sí. Sí. Así que cuando hacemos clic en la base de datos popular, a veces falla porque el modelo LLM no nos devuelve datos válidos y realmente no podemos analizarlo y se rompe. Así que así está causando ese problema. Dependiendo del modelo LLM en sí, podríamos estar tratando de causar un error, pero esto podría haber funcionado realmente. Ahí está esa ralentización de nuevo. Sí. Eso es muy lento. Sí, pero sí, básicamente... Bien. Sí. Necesitamos crear... Necesitamos provocar un error para que ocurra en el navegador para ver los source maps en acción. Y el de la base de datos popular era... Creo que está... Sí, está en el río. Hicimos la base de datos popular, pero no pasó nada, ¿verdad? Veamos si podemos ver un nuevo error. Bien. Hermoso. Mira eso. Eso todavía está en el de Python. Sí. Lo siento. ¿Por qué sigue esto... Hace 57 segundos. No, intenta seleccionar el último error. Eso fue bueno en realidad. No, está en ese. Y trata de seleccionar no el recomendado, sino el último, a ver si lo conseguimos. Pero este es solo un error extraño. No creo que sea una buena representación de cómo se ven los errores. Pero bien. Sí. Esto no está relacionado con los codeways y cosas. Podemos revisarlo más tarde si tenemos tiempo. Y también... No tiene nada que ver con la creación de categorías. Correcto. Sí. Pero conseguimos esto. Interesante. Eso nos dice algo. Así que conseguimos... Esto suena como que podría ser una ralentización. Tenemos un problema de consulta N más uno. Estamos obteniendo información aquí en la parte superior de dónde está eso. Así que solo mostrando tarjetas flash, parece. Está ocurriendo en producción, porque ese es el único entorno que hemos especificado. Estamos obteniendo ese span de procedimiento. Y también estamos obteniendo cuál es el span repetido.

Así que podemos ver rápidamente... Como este es el N más uno. Estamos haciendo esto demasiadas veces. 237 veces. ¿Por qué haríamos eso? Es una locura. Un par de otras cosas que quería señalar. Aquí a la derecha, vamos a obtener algo de información. Así que este es un problema que si eres un desarrollador de Django o un desarrollador de React y tienes algún tipo de back-end de Django o Python, podrías estar familiarizado con ver esto y tal vez no lo sabías. O nunca supiste qué estaba pasando. Vas a obtener algo de información aquí con algunos enlaces a documentos. Puedes asignar esto. Una cosa que realmente me gusta es poder configurar code owners y poder asignar automáticamente cosas basadas en dónde está el código... Dónde está el error en el código. Pero puedes asignar cosas aquí. Esta información aquí es particularmente útil si estás lidiando con problemas que están ocurriendo a través de múltiples lanzamientos y que duran mucho tiempo. Así que podemos ver que fue visto por última vez... En las últimas 24 horas, vimos esto seis veces. En los últimos 30 días, vimos esto seis veces. Fue visto más recientemente hace cuatro minutos, pero fue visto por primera vez hace 11 minutos. Y en este caso, solo tenemos un lanzamiento. No estamos obteniendo datos de lanzamiento aquí. Pero en otras situaciones donde estás haciendo algo que es más... Como algo que está más desarrollado, lo cual voy a mostrarte aquí. Así que, por ejemplo, si tenemos algún tipo de página de pago, podemos ver que este fue... Fue visto por primera vez hace dos meses y lanzado 24.9.2. Pero fue visto más recientemente hace dos minutos y lanzado 24.11.2. Así que podemos ver que este problema ha estado ocurriendo a través de múltiples lanzamientos durante meses en este punto. Y eso podría ser algo que te gustaría priorizar. Como mencionamos, nos integramos con todas tus diferentes herramientas de desarrollo que podrías estar usando. Así que podrías inmediatamente crear un issue de GitHub para esto si has configurado tus integraciones de GitHub. Tenemos todas las etiquetas. Muchas de estas van a venir por defecto. Cosas como en qué lanzamiento está, dónde estaba ocurriendo la transacción, etc. Pero también puedes especificar algunas... O lo siento, algunas etiquetas personalizadas también. Tenemos nuestros commits sospechosos, que te permiten ver de dónde es probable que se origine el error. Así que este error no apareció hasta que este commit ocurrió en ese pull request. Y con nuestra última actualización de nuestra extensión de GitHub Copilot, en realidad te ayudaremos a identificar esa causa raíz, crear en el pull request en sí. Y así añadiremos un comentario a ese pull request que dice, oye, este pull request es el probable originador de este problema. Si es así, quieres que encontremos la causa raíz y sugiramos una auto-corrección para ti, lo cual creará un PR de borrador. Obtienes un montón de información contextual aquí en la parte superior, que es similar a la información que vimos aquí en esa barra lateral. Obtienes tu stack trace. Esto se verá diferente de cuando estamos haciendo consultas de base de datos aquí en un back-end. En el front-end, obviamente, esto se verá más como solo mostrándote dónde está ese código. Obtenemos nuestras repeticiones de sesión, obtenemos nuestras migas de pan, y luego pasamos a solo datos adicionales. Así que esta es una vista de muy alto nivel de cómo se ve un problema en el front-end y en el back-end. Podemos saltar a un trace completo para ver qué estaba pasando. Podemos mirar aquí abajo incluso para ver solo cualquier momento. Creo que fue este tal vez justo aquí. Es como este. Es el que fue seleccionado. Lo siento. El de arriba. Sí, ese. Sí, este de aquí arriba. Quiero decir, en cualquier caso, el punto que estoy tratando de hacer es que puedes rastrear los problemas y puedes ver como, está bien, hay esta ralentización de 15 segundos justo aquí. Así que, ¿qué está representando realmente eso? Esta es la cosa de rastreo que mencionamos. Porque podemos ver el logo de Next.js y el logo de Django en el trace, eso significa que conectamos estos dos con los objetivos de propagación de trace. Así que comenzando desde el servidor de Next.js, Sarah, ¿puedes hacer clic en el de arriba de ese, el servidor HTTP en las tarjetas flash? Ese. Sí. Así que podemos ver que el servidor de Next.js envió una solicitud GET en manage. En realidad, el navegador envió una solicitud GET en slash manage. Y todo lo que está sucediendo en este trace o en este span está sucediendo en el lado del servidor de Next.js. Y luego tenemos un componente de página, un componente de servidor de página que es un componente de servidor de React que envía la solicitud HTTP GET a la API en el puerto 8000 slash categories. Y así es como obtenemos categorías del back-end de Django. Y si lo miras, verás el logo de Django, ¿verdad? Así que ahora desde este punto en adelante, todo lo que está sucediendo está sucediendo en el servidor de Django. Y en realidad podemos ver lo que está sucediendo en el servidor de Django y también lo que sucedió en el servidor de Next.js. Ambos proyectos contribuyen a un solo trace, ¿verdad? Y la agrupación automática allí, puedes ver, ahí estamos, básicamente la solicitud salta entre los middlewares que Django ha definido. Y luego entra en el GET all categories en la API, ¿verdad? Así que básicamente así es como podemos mirar un trace y literalmente seguirlo desde el navegador hasta el back-end de Next.js, luego al back-end de Django, que es un lenguaje de programación totalmente diferente, incluso, ¿verdad? Y luego también podemos volver y ver qué sucede desde ese punto y cómo se devuelve la solicitud al navegador. Pero sí. Y a medida que haces clic a través de diferentes spans en este trace, podrás obtener información adicional. Así que, por ejemplo, cuando hacemos clic en esta consulta de DB, que es esa selección de categoría, podemos ver la consulta justo aquí. Incluso podemos copiarla para que si necesitáramos ejecutarla en otro lugar para probar algo, obtenemos alguna información general sobre lo que está pasando. Y puedes decidir cómo quieres depurar esto más a fondo. También obtienes cosas como web vitals. Así que verás aquí arriba, aquí está nuestro LCP, y obtendrás como todos estos web vitals también listados justo aquí. Sí. Especialmente importante, por ejemplo, si la carga de la página es lenta, vas a ver qué sucedió en el back-end que causó que la página fuera lenta. Y si la página es lenta, eso significa que probablemente el TTFB va a ser un gran puntaje, etc. Así que sí, por eso es importante tener esos dos. Y vamos a señalar algo de esta ralentización. Así que 7.9 milisegundos no es terriblemente largo, pero es algo que tenemos como un error asociado con ello. Y así podemos hacer un seguimiento de ese error. Quiero darnos un breve descanso. ¿Sabes algo que nunca intentamos? ¿Qué pasa si no tenemos ninguna tarjeta flash todavía? Sin categorías, sin tarjetas flash, sin tarjetas, sin tarjetas flash, no hay nada allí. Está bien. Pero intento practicar. Oh. No sé. ¿Pensaste en eso cuando estabas construyendo esto? Porque me gusta romper cosas.

Porque me gusta romper cosas. No realmente. Muy bien. Así que veamos cómo va esto. Así que voy a ir a practicar. Ahí vamos. Muy bien. Ahí vamos. Así que definitivamente codificaste algo aquí sin ningún tipo de capturas. Así que tal vez esto podría haber sido algo bastante simple de atrapar, pero ya sabes, como que realmente no, está bien, no mucha información. No te vas a perder nada. No vas a ver esto en producción. Además, no va a ser tu computadora. Va a ser la computadora de tus usuarios. Y no te van a enviar una captura de pantalla. No. Simplemente no van a practicar. Y luego vas a tener un montón de empleados que no saben cómo hacer nada. Va a ser horrible. Está bien. Así que vamos a volver a nuestros problemas. Esperemos que hayamos encontrado algo en eso. Así que voy a abrir nuestra tarjeta flash para el front-end ahora. Muy bien. Así que esa era la antigua, pero acabamos de hace 57 segundos, obtener este error de tipo. Así que vamos a investigar eso. Está bien. Así que tenemos algo de información aquí. Así que tenemos un trace completo de nuevo, tal como vimos con nuestro error de back-end, tenemos que no está manejado, que no puede leer propiedades de algo indefinido. Tenemos que está realmente en desarrollo y que estaba en Chrome. Y ahora tenemos nuestro stack trace porque subimos esos source maps. Así que podemos ver esto aquí mismo. Así que esto es algo que pudimos ver con ese otro mensaje de error en el navegador, pero podemos configurar el mapeo de código y realmente poder abrir eso dentro de GitHub de inmediato, lo cual me encanta absolutamente y recomiendo encarecidamente. Y obtenemos nuestra repetición. Nuestra repetición también nos da algunas, o también obtenemos nuestras migas de pan, etc. Así que vamos a entrar en esta repetición rápidamente, porque teníamos algunas preguntas sobre eso. Está bien. Como dije, la repetición es una de mis características favoritas de Sentry porque es esa reproducción tipo video. Así que vamos a desplazarnos un poco por aquí. Simplemente vamos a hacer clic en reproducir y vamos a ver esto un poco. Nota, esto es lo que estaba sucediendo antes de que siquiera obtuviéramos el error, ¿verdad? Hice clic en ese eliminar, ya sabes, borrar toda la base de datos. Y una cosa a tener en cuenta es que estás obteniendo muchos asteriscos aquí, ¿verdad? Y como mencioné, somos privacidad por defecto. Así que eso significa que cuando configuras la repetición de sesión, vas a tener todos los textos e imágenes ofuscados por defecto. Esto es para reducir la probabilidad de ver accidentalmente o compartir o liberar o poner en los servidores de Sentry o que tus desarrolladores vean cualquier información sensible o PII, información de identificación personal. No queremos que cosas como tarjetas de crédito y cosas así se compartan. Nota, sin embargo, que puedes configurar una repetición y este enmascaramiento de elementos, bloqueo, esto va a, podemos abrir esto en una nueva pestaña aquí, y podemos ver que es muy simple dentro de ese archivo de configuración, puedes especificar como, ya sabes qué, ninguno de mis textos, este es un sitio estático, quiero que la gente pueda usarlo, pero no hay forma de que pueda haber datos sensibles en mi texto o mi media. Así que voy a permitir que todo eso esté sin enmascarar. Y específicamente, si estás usando la última versión, puedes tener información específica también. Está bien. Así que esas son clases que puedes añadir a elementos específicos. Así que si un elemento tiene la clase CSS Sentry unblocked o los atributos de datos Sentry unblocked, la repetición de sesión no va a ofuscar eso con estrellas o asteriscos. Simplemente te dará el texto completo. Así es como puedes seleccionar. Quiero como, esto no es un PII. Esto es parte del diseño o la interfaz de usuario muestra esto, por ejemplo, borrar base de datos. No hay nada personal sobre borrar base de datos y es constante, ¿verdad? Así que podemos hacer eso o las etiquetas que vemos aquí, podemos añadir esas clases a esos elementos y van a aparecer como el texto, pero eso es nuestra responsabilidad. Así que si añadimos esas clases a un elemento que podría ser PII, eso es un lío. Sí. También la ofuscación está sucediendo en tu dispositivo del cliente. Así que no estamos enviando esa información a Sentry y luego ofuscando, estamos ofuscando antes de que llegue a Sentry. Así que porque esto es parte de, esto es un SDK, que es parte de tu aplicación, podemos hacer eso. Nota que mientras hacíamos esto, estamos obteniendo cosas como la repetición comenzó, los usuarios estaban haciendo clic, estamos obteniendo navegación, estamos mostrando un poco dónde están haciendo clic. Así que eso es genial. Podemos continuar desplazándonos a través de esto. Podemos avanzar rápidamente a través de la inactividad si queremos. Y mientras hacemos esto, estamos viendo las migas de pan seguirnos. Así que en este punto, cuando hicimos clic en la práctica, obtuvimos un montón de diferentes tipos de errores que estaban sucediendo. Así que parece que intentamos hacer algunas llamadas diferentes. No está funcionando. Y eso es lo que estamos viendo aquí. Y luego estamos obteniendo ese mensaje de error. Así que esto nuevamente nos está dando esa visión de alto nivel de exactamente lo que estaba sucediendo en el dispositivo de tu usuario. También obtenemos lo que estás acostumbrado a, con la depuración local, como tu salida de consola, así que estamos obteniendo algo como, creo que esto es solo en cualquier lugar. Pero estamos obteniendo, como si pudieras depurar esto localmente, pero el problema es que no siempre estás depurando localmente, ¿verdad? El problema podría solo estar apareciendo cuando tus usuarios están en una red realmente pobre o cuando están usando un dispositivo realmente, realmente antiguo. Una de mis personas favoritas que habla sobre el rendimiento en general es Henri, se hace llamar Henri Helvetica, y a través de los archivos RUM. Y ha estado hablando sobre este problema con la cantidad de dispositivos Android realmente antiguos que existen en el mundo que están siendo utilizados activamente todos los días es increíble. Como, deberías buscar esto. Deberías estar informado por esto, porque no todos están usando los últimos dispositivos. No todos están usando los últimos sistemas operativos. No todos están usando, ya sabes, redes de alta gama. Así que poder entender quiénes son tus usuarios, en qué están realmente ejecutando, y reconocer que no podrás recrear cada uno de los problemas de tus usuarios. Funciona en mi máquina ya no funciona en este mundo. También obtenemos todas las llamadas de red y respuestas. Así que podemos ver aquí, estamos obteniendo un montón de, ya sabes, cosas buenas y luego estamos obteniendo un poco de esto, no sabemos qué está pasando. También estamos obteniendo todos los errores listados aquí. Podemos obtener una vista previa de la vista de trace aquí mismo con ese error. Así que podemos comenzar a depurar más y ver, como, oh, ¿qué estaba sucediendo realmente aquí? Está bien. Estábamos tratando de resolver, estamos tratando de hacer una respuesta, y luego tal vez lo intentamos de nuevo. Tal vez volvemos al back-end e intentamos obtener algo y estamos reconociendo todos estos problemas. Y luego tenemos... Lo que es genial de esta sección, ¿puedes volver al trace para mostrarte mi característica favorita?

Ahí vamos. ¿Ves eso cuando pasas el ratón sobre él? Hay un cabezal de reproducción que va, como, encima del trace y te muestra lo que sucede en el back-end y realmente ves lo que sucede en la pantalla. Así que, como, esta pantalla aquí mismo es, como, Y eso realmente está sucediendo a través, ¿verdad? Como, sí, donde sea que estés, ese cabezal de reproducción va a estar siguiéndote. Sí. Así que eso es, como, lo más loco. Como, a la izquierda, ves lo que está pasando en la pantalla, en el monitor del usuario. Y, de nuevo, esto puede ser cualquier usuario en cualquier parte del mundo que esté usando tu aplicación. Pero a la derecha, realmente ves el trace y lo que sucede en el lado de Django. Al mismo tiempo. Así que esto es, sí, estos son superpoderes de depuración, si me preguntas. Sí. 100%. Bien. Así que eso es la repetición de sesión. Tenemos... Sabes, tienes tu trace completo aquí. Tenemos toda esa información contextual aquí. Tenemos el stack trace. Tenemos la repetición de sesión. Probablemente podamos depurar esto ahora y averiguar, más o menos, qué está pasando. Sí. Bueno, técnicamente lo sabemos, ¿verdad? Porque en el front end, cuando intentamos crear la categoría, decía categoría creada con éxito. Pero también vimos ese problema, el nombre de la categoría es demasiado corto. Así que es... Eso me dice que no estamos manejando realmente la respuesta del servidor, o el servidor no responde de una manera específica. Podemos profundizar en ello y realmente arreglarlo en esta masterclass. Pero creo que eso es, como, suficiente información ahora mismo para que podamos entrar en ello. No tenemos que hacer eso en este momento, pero cuando conectas los puntos, este dice nombre demasiado corto, este dice categoría exitosa, entonces es la comunicación entre esos dos. Así que solo iría al sitio del cliente e iría al lugar donde estoy haciendo la solicitud fetch, cuando estoy haciendo el post o patch. No sé qué era, pero iré allí y veré cómo estoy haciendo el fetch. Lo más probable es que Un par de otras cosas que solo quiero señalar, tenemos insights, insights de rendimiento, los dividimos entre front end, back end, móvil, AI, para que podamos ver que nuestro front end, que es este proyecto en particular, obtenemos muchos insights de ese front end. Así que podemos ver que este es nuestro front end, que es un proyecto, y ese front end es nuestro back end, que es un proyecto. Pero podemos ver que nuestro back end, así que podemos ver que nuestro front end, que es este proyecto en particular, obtenemos algunas mejores oportunidades para hacer algunas mejoras en nuestro rendimiento. Así que esa página de práctica, cada vez que íbamos a practicar, ya sea que obtuviéramos un error, como un error o un crash porque no teníamos ninguna tarjeta flash, o si recuerdas, tomaba una eternidad cada vez. Así que podríamos empezar a ver eso como una oportunidad para explorar hacer mejoras. Nuestro manage era meh, como que no es genial, pero no era horrible. Pero esa práctica es absolutamente horrible. Y luego también teníamos esto para cuando hay ese error. Obtienes tu P50, tu P75, obtienes tu P95, cuántos usuarios están siendo afectados por esto. Y también obtienes esto, que es la miseria del usuario. La miseria del usuario es básicamente nuestra métrica de cuán molestos probablemente estén tus usuarios, cuán miserables probablemente estén debido a estas ralentizaciones. Así que esto es si tú, como dije al principio, monitoreo, observabilidad, estas cosas implican un sentido de pasividad. Queremos que seas más activo. Así que si solo estás recibiendo muchos informes que no tienen mucha información detallada sobre cosas que simplemente están funcionando lentamente, este podría ser un lugar donde empieces. Podrías decir, está bien, solo encontremos el fruto más bajo. ¿Dónde está la mayor oportunidad para que hagamos una mejora de rendimiento? Y podrías empezar desde estos insights aquí. Sí. Así que revisemos esta ralentización que vimos cuando intentamos hacer una práctica. Y fue como girando por más tiempo. Para capturar eso, lo llevaría a de dos maneras diferentes. Así que primero vimos que obtuvimos el N más uno. El N más uno nos dijo que hay algo pasando. N más uno significa que estamos solicitando la información para N número de recursos en el back end. Por ejemplo, si estamos pidiendo tarjetas flash, estamos pidiendo detalles para 237 tarjetas flash, si recuerdo el número correctamente. Así que estamos pidiendo 237, pero luego más uno, que es dame todas las tarjetas flash, ¿verdad? Y lo más probable, ahí vamos, 237. Y lo más probable es que estos estén siendo invocados de manera en cascada. Así que Sentry ya me notificó como desarrollador. Mira eso. ¿Ves esa cascada? Sí. Es como una tras otra. Es tan largo. Necesitamos mirar esto en el trace, pero sí. Mira eso. Todo eso sucede en cascada. Exactamente. Sí. Así que una forma es que Sentry nos diga, tienes un error terrible en tu código y está causando problemas de N más uno. Ve y arréglalo. Correcto. Y si vamos al trace, vamos a ver dónde estamos. Así que ¿puedes ir al trace? Ver trace completo. Y ahí vamos. Esas son las tarjetas flash. Expande esa. No, la que está seleccionada en azul. Sí. Sí. Profundiza en eso. Y ahí están los 237. ¿Ves? Selecciona categoría, selecciona categoría, selecciona. Eso es lo que está causando la ralentización. Pero averigüemos dónde está porque ahora mismo no tenemos instrumentación personalizada, ¿verdad? Esto solo nos dice que hay muchas llamadas a la base de datos Y no creo que haya un escenario válido donde una aplicación realmente necesite crear 237 llamadas. A menos que sea como un trabajo de Cron que haga algo tan complejo. Sí. Pero lo que me dice, lo que puedo ver aquí es que puedo ver los métodos view.render de Django que dicen, obtener todas las tarjetas flash y está en la API. ¿Ves eso? Tres spans por encima del actualmente seleccionado uno. Puedes ver el render de vista. Sí. Obtener todas las tarjetas flash.

Así que podemos, podemos profundizar en eso. Correcto. Podemos entrar en el proyecto Django, el proyecto Django, entrar en el código fuente de la API que se va a compartir. Presentación y luego el resto y luego la API. Así que aquí es donde todas nuestras rutas están definidas. Y están las dos rutas de categorías y flashcards. ¿Qué era lo de nuevo en Century? Sí. Básicamente aquí es donde definimos los routers de flashcards. Así que si es un flashcards que, deberíamos mirar en el directorio de flashcards o el router de flashcards. Ve a la definición. Sí. Puedes hacer eso también. Ahí vamos. Entonces, ¿qué era obtener todas las flashcards? Ahí vamos. Así que dentro de aquí, es donde suceden las cosas. Podemos ver que tenemos una consulta de flashcards y estamos invocando el método obtener todas las flashcards. Esto es CQRS. Vamos a entrar en ello. Y como puedes ver, nos falta instrumentación. Estamos invocando un montón de cosas, pero necesitamos algo de instrumentación. Así que vamos a suplementar esta parte justo aquí, Sarah. Así que si puedes importar el SDK de Century en la parte superior. Haz la importación. Y voy a abrir nuestros documentos para que todos puedan seguir de esa manera también. Y estamos hablando de Django ahora. Sí, lo estamos. Y necesitamos ir a trazabilidad. Necesitamos ir a trazabilidad en algún lugar. Configurar trazabilidad. Configurar trazabilidad. Bien. Personalizado. Hay dos maneras. Así que primero es que podemos importar el SDK de Century y podemos usar el ContextManager. Ahí vamos. Podemos usar el ContextManager si queremos envolver múltiples áreas de una sola función usando las palabras clave with. Así que si comer pizza contiene múltiples unidades de trabajo. Digamos no el patrón de diseño U de W, sino simplemente como múltiples unidades de trabajo. Podemos usar el... Tenemos que usar el ContextManager aquí. Pero hay una mejor manera, al menos para mí, y es usar un decorador. Así que en lugar de hacer eso, podemos simplemente añadir el century SDK.trace encima de la función. Y esa va a ser la función de trazabilidad. Así que habilitamos la trazabilidad para esta función. Pero si queremos añadir múltiples spans en una sola función, tenemos que usar el ContextManager. Así que sí. Vamos a ir y añadir el decorador de Century a todos los métodos aquí. Solo copia y pega eso e instrumenta todos estos. Instrumenta todos estos y porque el problema estaba en obtener todas las flashcards, ¿verdad? Sí. Vamos a entrar en el repositorio de flashcards.findall. Vamos a entrar en ese. Ahí vamos. Y añade la instrumentación aquí. Añade eso y también importa el SDK de Century en la parte superior. Así que vamos a hacer esto y luego vamos a volver y añadir instrumentación al resto de estos métodos. findall, findallById. Mientras estamos aquí, vamos a instrumentar todos ellos porque tiene que ser alguien aquí. ¿Qué más tenemos? findById, y ese es un método estático, eliminar. Si queremos hacer eso, necesitamos añadir el decorador encima del método estático. ¿Qué decía el documento? Sí. Veamos. Métodos estáticos y de clase. Al trazar un método estático o de clase, debes añadir el century después del estático. Bien. Así que estamos equivocados. Necesitamos añadir el century trace después del decorador del método estático. De lo contrario, no va a funcionar. Ahí vamos. Bien. Así que esto debería ser suficiente. ¿Correcto? Deberíamos ser suficientes. Vamos a guardarlo y volver a ejecutar la configuración de Docker. Y solo como recordatorio, así que estábamos aquí y esto es donde vimos eso. Así que esperamos obtener algo de información adicional aquí. Sí, queremos ver dónde exactamente. Necesitamos re – no necesitamos re-Docker. Esperemos. Pero no estoy muy cómodo en el mecanismo de recarga. No confiemos en él. Así que lo que estamos mostrando aquí es que Century hace autoinstrumentación de fábrica. Vas a obtener mucho de lo que ya vimos. Así que eso ya fue bastante útil. Ya obtenemos algo de información. Ya podemos depurar mucho más. No solo porque estamos obteniendo esa información adicional e información contextual de Century. Lo siento. Zoom acaba de decirme que piensa que estoy hablando francés ahora. Oh, yo también. Pensé que era mi acento. Bien.

Lo siento. Eso fue una distracción. De todos modos, obtienes esa autoinstrumentación. Y de hecho, este es el documento que estaba tratando de mostrar. Obtienes mucha autoinstrumentación de forma predeterminada para la mayoría de nuestros SDKs. Sin embargo, Vimos los spans de la base de datos, ¿verdad? Esos están instrumentados automáticamente. Correcto. Sin embargo, nuevamente, porque estamos aprovechando una herramienta que es tan rica en información como Century, podemos dejar de preocuparnos por todos los pequeños detalles de la autoinstrumentación que Century está configurando para nosotros y en su lugar pensar en cómo se va a usar nuestra aplicación y cómo está construida nuestra aplicación para que podamos aplicar alguna instrumentación personalizada que será más efectiva para los tipos de errores que anticipamos que estaremos depurando en el futuro. Entonces, aunque comenzar con Century es bastante simple en términos de agregar esos o más bien instrumentar con los SDKs y obtener esa autoinstrumentación, recomendamos encarecidamente que te tomes un momento después de haberlo ejecutado durante tal vez un mes para ver dónde están tus errores, dónde deberías agregar esa instrumentación personalizada y enviar esos spans adicionales.

Está bien. Entonces, creo que estamos listos para comenzar. Déjame actualizar esto ahora. ¿Cuál era el flujo de operación que estábamos rastreando? ¿Puedes volver a la vista de trazas y ver qué necesitamos hacer en el front end para activar esto nuevamente? Estoy bastante seguro de que esto era solo donde estábamos Obtener slash gestionar. Sí, en el lado siguiente, ese es el obtener slash gestionar. Así que necesitamos ir a la página de gestión y hacer algunas actualizaciones o algo así. Y esto probablemente esté en caché ahora. Interesante. Va a ser divertido ver si esto aparece. Pero sí, ves lo rápido que es. Probablemente sea porque está en caché. Además, sí, nuestros números no se restablecieron. Interesante. Está bien. Entonces, volvamos aquí. Muy bien. Veamos si obtenemos un nuevo evento aquí. Si obtenemos el n más uno, es posible que no lo obtengamos. Si next JS mantiene todo en caché. Me pregunto si escribimos y luego repoblamos. Intentemos eso.

Sí. Pero necesita ser una carga de página. Estaba en obtener slash gestionar. Así que necesita ser una carga de página. Ese es el caso. ¿Y luego? Tengo una solución para eso. Sí, va a ser rápido. Sí, esto es next JS, básicamente. Vamos a ir y vamos a verificar esto a través del segundo enfoque que mencioné. Así que, vuelve al panel de Sentry. Y vamos a ir a la página de rendimiento esta vez, no a los problemas. Así que, vamos a ir al rendimiento y vamos a intentar encontrar la transacción obtener slash gestionar. Así que, haz clic en todas las transacciones, y deberíamos verla en la lista a continuación. Ahí vamos. Es la segunda. Así que, ve a eventos muestreados. Y esto nos va a mostrar una lista de todos los eventos que esos son solo los eventos lentos, los eventos más lentos. Esos no son como los últimos eventos. Podemos cambiar eso. Pero si vamos a la pestaña de eventos muestreados, sí, ahí vamos. Podemos ver una lista de ellos, una lista completa de ellos. Y la marca de tiempo es UTC y no estamos en UTC. Así que, no estoy seguro si ese es el que estamos buscando. Así que, simplemente haz clic de todos modos. Vamos a verlo. El 14 de noviembre es de hoy o tal vez es solo todo, no sé. Está bien. Así que, ve a flashcards, el segundo. Profundiza en él. No parece que esté allí. Sí. Así que, esto es definitivamente almacenamiento en caché de next JS. Intentemos hacer algo al respecto. Ve a Visual Studio code esta vez. Ve a Visual Studio codes. ¿Qué podemos hacer? Ve a la manage slash page.tsx. Puedes simplemente buscarlo. Saltará directamente al archivo con el comando B. Lo sé. Espera. Déjame encontrarlo de esta manera. Mi cerebro no funciona de esa manera. Está bien. Sí. Es molesto. ¿Quieres hacer manage flashcard? Sí, pero va a estar en la web, no en la API. Sí. Así que, fuente app manage page. Así que, veamos. Tenemos cache no store y ahí es donde se está realizando la búsqueda para obtener las flashcards. Así que, esto técnicamente debería causar eso, lo cual es extraño que no lo hizo, pero tal vez estamos perdiendo algo. Así que, dice cache no store, ¿verdad? Sí. Algo está en caché. Y si hubiéramos, si hubiera puesto un mecanismo de almacenamiento en caché adecuado, habría descubierto cuál es el problema. Este es el proyecto correcto, ¿verdad? Sí. Así que, no recuerdo que tuviéramos la ralentización en este. Veamos. Quiero decir, tuvimos que ralentizar aquí y comenzar la práctica también, pero no estábamos- Sí. Tal vez deberíamos rastrear eso. Así que, es más intencional.

No, probablemente no va a aparecer como un, probablemente no va a aparecer como un N más uno. Así que, necesitamos verlo. Necesitamos ir al rendimiento, ir a la página de rendimiento. Ahora, necesitamos encontrar esa transacción y esa transacción debería ser ya sea get on slash practice, o veamos, eso es una carga de página. La carga de página en sí misma podría no ser lenta, ¿verdad? Son tres segundos, no es la más lenta, pero tampoco es la más rápida. Para resolver esto, ¿puedes volver a la aplicación de flashcards y, no, no, en la pestaña de la aplicación.

Ve a practice, abre el elemento de inspección solo para que pueda ver lo que estamos haciendo. Sí. Y ahora, ve a la pestaña de red para que podamos ver qué solicitud estamos haciendo. Haz clic en este botón de iniciar sesión de práctica. Este en el botón, iniciar sesión de práctica. Oh, lo siento, mi cerebro. Sí. Solo vuelve a la pestaña de red. Flashcards. Bien. ¿Es esa la solicitud que enviamos? Probablemente no. Limpia la solicitud e intenta elegir una categoría diferente, porque ahí es donde estaba la ralentización. Elige una categoría diferente de la lista a la izquierda. Sí, esa es la solicitud lenta. Ves la de flashcards que aún está pendiente. Así que, haz clic en esa y veamos cuál es, qué solicitud es esa. Ve a los encabezados y eso va a ser API categories, el ID de la categoría, y luego tenemos las flashcards. Eso es lo que necesitamos buscar en el rendimiento justo aquí. Ahí está. Así que, en los eventos muestreados, deberíamos ver algunos eventos allí. Oh, sí. 12 segundos, 11 segundos. Sí.

Y por cierto, lo que acabamos de hacer aquí, eso es solo porque estamos ejecutando una aplicación de demostración y tratando de forzarnos a poder ver una ralentización simulada en los últimos minutos de esta masterclass, no porque necesitarías hacer eso mientras estás depurando activamente. Estos aparecerían si fueran problemas reales. Solo quiero señalar eso. Y si tuviéramos más de un usuario también. Sí. Así que, solo asegúrate, G, de que realmente estamos seleccionando el último después de que lo rastreamos. Así que, ese no era el último. Vuelve y ve a los eventos muestreados. Estos no son los últimos. Sí. Ahí vamos. Así que, esto es de las 6.04. No sé, tal vez sea ese. No, creo que es este. Está basado en la marca de tiempo, ¿verdad? Sí. Bien. Ve si puedes encontrar uno que haya sido... Eso no parece instrumentado. Haz clic en la marca de tiempo en el encabezado. Sí. En el encabezado mismo. Sí. Ahí tienes. ¿Cuál es el último? 6.50. Bien. Sí, ese es el que acabo de encontrar. Ese también tiene... Bien. Y el seleccionado es el último. Bien. Intenta... Esa es la única cosa. Bueno, ni siquiera estamos haciendo la solicitud allí. Oh, lo estamos, pero por alguna razón, nos falta el trace. Eso significa que el backend, en realidad no reconstruimos el backend. Porque deberíamos haberlo visto allí, al igual que podemos verlo arriba en el más antiguo... Sí, es una configuración de Docker. Nuevamente, lo siento mucho. Vamos a seguir adelante e intentar reconstruirlo y volver a ejecutar esto. Y de hecho, ni siquiera instrumentamos este, ¿verdad? Este fue el instrumento en el get... Así que, vamos a añadir eso rápidamente. Así que, eso va a estar en... Va a ser una fuente de API en categoría, en realidad. Gracias. Categoría, sí. Presentación. REST API, desplázate hasta el final. ¿Querremos importar ahora? No aquí, porque ya tenemos esto. Sí. Así que, ese es el getFlashcards para categoría. Tenemos dos. Primero, tenemos el getCategory, y luego tenemos el getFlashcards por categoría. Así que, ambas consultas de categoría. ¿Viste eso? Ese no es el, ese es un delete. Ese es el que estoy hablando. Sí. GetCategory, y también el getFlashcards. Sí. Estos no están instrumentados, ¿ves? Así que, necesitamos hacer esto de nuevo. Por eso no estamos viendo nada. ¿Qué estás buscando?

¿Qué estás buscando? De todos modos, está bien. Yo solo... Guion bajo como un juego. Gracias. Y necesitamos añadir el... Ahí vamos. Ahora, es inteligente. Bien. ¿Qué más tenemos allí? Tuvimos esta consulta, pero también tuvimos otra, ¿verdad? Tuvimos la... Oh, es la consulta de categoría. Así que, es automáticamente... Sí. Ya está ahí. Sí. Bien. Bien. Así que, este es el repositorio de Flashcard. También tenemos el repositorio de categoría. ¿Cuál instrumentamos? Categoría. No, de los repositorios. Ves, estos activan los métodos del repositorio. Así que, entra en uno de estos. Este es. Así que, este es el repositorio de Flashcard. Vamos al repositorio de categoría también, porque estamos usando... Ahí vamos. Así que, también necesitamos instrumentar estos, ¿verdad? Y esto es básicamente perforar desde la API, hasta el lugar donde nos comunicamos con la base de datos. Así que, esto va a configurar todo el trace que realmente necesitamos. Genial. Muy bien. Así que, tenemos que reconstruir ahora y asegurarnos de que estamos reconstruyendo. Compose down. Hicimos decompose down. Bien, genial. Déjame... Bueno, déjame asegurarme. Bien. Bien. ¿Ves ese caché? ¿Ves ese caché? Sí. Así que, no envió todo, pero digamos que no envió cosas que no necesitamos. Sí, ves, es la app. Bien. Bien, veamos si funciona ahora. Así que, necesitamos ir y activar la ralentización en la sesión de práctica. Así que, no la carga de la página, sino cuando hacemos clic en el botón o cambiamos la categoría. Sí, lo está construyendo en el fondo. Sí, ahí vamos. Muy bien. Muy bien. Vamos a Dreamcatcher. Muy bien. Ahí está esa ralentización. Así que, con suerte, veremos el trace si conectamos todo correctamente. Bien, genial. Así que, ahora si vamos, deberíamos ver otro que termina en 57. Ahí vamos. 56, 57. Ahí vamos. Muy bien. Así que, profundicemos en este. ¿Qué vemos? Eso es muy raro. Ves que tenemos un HTTP GET que envía la solicitud a ese, pero no vemos realmente el lado de Python. Eso es raro. ¿Qué pasa si lo abordamos desde el lado del backend? Como, ir a rendimiento y seleccionar el proyecto Django, no el de Next.js. Bien. ¿Qué tenemos aquí? ¿Tenemos el que estamos buscando? No. ¿Verdad? Hay GET CATEGORIES y FLASH CAS, pero no vemos el que es CATEGORY slash CATEGORY ID. Por eso lo estamos perdiendo. Supongo que algo pasó en nuestra construcción. Bueno, en cualquier caso, estamos casi sin tiempo. Así que, si tienes alguna otra pregunta, por favor hazla en el chat, pero, ya sabes, esencialmente, el código personalizado que necesitamos ejecutar. Así que, como recordatorio, nuestra vista de trace te permite no solo rastrear dentro de una sola aplicación, sino también a través de aplicaciones de múltiples servicios. Así que, de frontend a backend, con suerte pudiste ver eso y jugar un poco con eso, y puedes hacerlo sin perder contexto y sin tener que cambiar entre diferentes cosas. Déjame cerrar Slack, porque eso fue molesto. Bien. También tenemos cosas como session replay, que te permiten obtener esas reproducciones tipo video de tus sesiones de usuario. Nuevamente, ofuscado de fábrica por razones de privacidad. Algo que no mostramos hoy es nuestro widget de feedback de usuario, que es un widget muy simple que puedes simplemente incluir. También puedes personalizarlo con tus propios colores y lenguaje, etcétera. Pero esos widgets de feedback de usuario estarán completamente contextualizados dentro de Sentry. Así que, puedes ver ese widget apareciendo allí en ese GIF, y sí, digo GIF con una G dura. Y eso va a estar contextualizado. Va a ser parte de tus reproducciones. Va a ser parte de tus migas de pan, y podrás ver traces basados en el feedback de usuario desde allí mismo. Otra cosa que mencionamos pero no mostramos en esta masterclass de hoy fue nuestro aprovechamiento de la IA. Quiero decir, ¿qué tipo de empresa tecnológica seríamos si no pusiéramos IA en algún lugar? En particular, tenemos un par de cosas. Una es autofix. Así que, si das permiso a Sentry para usar IA, tenemos autofix, que determinará la causa raíz de los problemas, sugerirá una solución, e incluso abrirá un PR en GitHub para ti. Y también tenemos la extensión Sentry Copilot, que mencioné, que se puede usar dentro de Visual Studio Code, así como, si lo tienes configurado, comentará en el PR que probablemente sea la causa raíz del problema con un análisis de causa raíz sugerido, así como un PR, un autofix sugerido, que abrirá un borrador de PR en GitHub. Así que, básicamente, ya sea que estés en Sentry, en GitHub, o en Visual Studio Code, puedes aprovechar la IA que hemos incluido con Sentry de fábrica. Así que, estamos sin tiempo. Así que, quiero decir muchas gracias por unirte. Nuevamente, ahí está ese enlace. Puedes escanear el código QR, simplemente ir a registrarte y poner ese código, o ir a ese enlace bit.ly, todo lo cual te dará esos tres meses gratis de Sentry para que puedas probarlo. También, dirígete a nuestro blog y revisa nuestras últimas publicaciones del blog. Vamos a tener la semana de lanzamiento la próxima semana, que es básicamente solo una serie de publicaciones de blog y videos para describir algunas de nuestras características más nuevas. Así que, mantente atento a eso y contáctanos en GitHub, en Discord, en redes sociales, en cualquier lugar, en todas partes, si tienes más preguntas. Realmente apreciamos que todos se unan a nosotros. Y espero que tengas un gran resto de tu semana.