Seguimiento de errores y ralentizaciones en aplicaciones JS utilizando Sentry

♪♪ Muy bien. Voy a comenzar. Hola a todos. Mi nombre es Simon. Soy un ingeniero de soluciones en Sentry. Voy a comenzar a compartir mi pantalla aquí. Asegurémonos... Compartir. Mi escritorio. Muy bien. Todos deberían ver mi escritorio. Tengo una presentación preparada para nosotros y podemos revisar este tema por el que todos estamos aquí que es el seguimiento de errores y ralentizaciones en aplicaciones JS utilizando Sentry.

Como introducción, mi nombre es Simon Zhang. Soy un ingeniero de soluciones en Sentry. Y tengo algunas diapositivas para que revisemos el proceso completo de situarnos con Sentry, el SDK en nuestra aplicación y también cómo podemos ingresar a Sentry para, ya saben, hacer un seguimiento de los errores, ralentizaciones, notificar a las personas necesarias, trabajar a través del flujo de trabajo que ofrecemos en Sentry, optimizar la experiencia del usuario y del desarrollador todo con nuestra plataforma aquí. Para continuar con esta agenda y mantenernos organizados hoy, comenzaré describiendo el monitoreo de aplicaciones, para qué está diseñado Sentry y por qué es importante. Luego entraremos en detalles con los pasos de integración de Sentry. Esto incluye obtener el SDK en nuestras aplicaciones. Tengo un par de aplicaciones para hacer esto, una interfaz de usuario de React y un backend de Node Express. Ambas aplicaciones son de JavaScript. Crearemos un proyecto en Sentry e integraremos estas aplicaciones con esos proyectos de Sentry. Entonces, proyecto de Sentry y aplicación, están mapeados uno a uno. Entraremos en los detalles allí pero, en el tercer punto, errores y rendimiento. Hablaremos sobre el monitoreo de errores y el monitoreo de rendimiento. El cuarto punto, o capítulo cuatro para nosotros, será el tema de las alertas. Notificar a las personas adecuadas sobre los errores y el rendimiento, los datos que capturamos. Organizamos los datos por versiones. Hablaremos de eso también y repasaremos Discover y Dashboard, cómo organizamos y filtramos los datos que nos interesan en nuestro equipo y nuestra organización o simplemente para ver nuestros datos por diversión. Lo que queramos hacer con los datos que capturamos, podemos hacerlo a través de Discover y Dashboards.

Ahora, con la reunión que tenemos juntos, ¿esto es en Zoom, verdad? Y parece que nuestra función de preguntas y respuestas puede tener algunos problemas hoy. Así que intentaremos solucionarlo.

Siéntanse libres de activar el sonido cuando, ya saben, haga una pausa para preguntas y también haré una pausa a la mitad y al final de la sesión, para responder preguntas o siéntanse libres de escribirlas en el chat y las responderé cuando, durante la reunión también.

Entonces, con eso, comencemos con la primera parte aquí. Entonces, ¿qué es el monitoreo de aplicaciones y por qué? Comencemos primero revisando una aplicación problemática. Esto nos dará un ejemplo más práctico de lo que estamos buscando. Tengo esta aplicación que se bloquea periódicamente. Así que simplemente la voy a actualizar un poco y se bloqueó. Ok, ¿qué diablos pasó? Entonces, esta es una de las cosas de las que debemos preocuparnos en esta aplicación problemática. A veces se bloquea, a veces no al actualizar, al cargar. Otro problema con esta aplicación es cuando veo estos productos, es un sitio de comercio electrónico, estoy buscando y tratando de comprar cosas como un usuario final, ¿verdad? Tengo mi sombrero de usuario final puesto, me llevó mucho tiempo ver los productos que quiero comprar, y por último, cuando intento pagar y comprar los productos que agregué a mi carrito, nos encontramos con un error. Así que tenemos tres problemas con esta aplicación y como usuario final, estoy frustrado, confundido, no sé qué está pasando. Tal vez haga clic aquí para contactar a los desarrolladores o a quien esté a cargo, ya saben, para notificarles de estos problemas, pero no es una forma cohesiva de hacerlo. Y como usuario final, tal vez simplemente, ya saben, lo intente de nuevo más tarde o simplemente renuncie a comprar estas cosas en mi carrito. Eso es sin Sentry y algo que necesitamos solucionar. Esa es la situación del problema, lo que estamos tratando de solucionar juntos.

Ahora, sin Sentry, tal vez nos notifiquen de este problema que estamos experimentando, tratemos de reproducirlo a medida que, ya saben, ingresamos al problema a través de esa carga de página. Oh, no puedo reproducirlo, ¿qué está pasando? O eventualmente lo reproduzco y miro mi consola para investigar cuál es el problema, tal vez reviso la pestaña de red a medida que reproducimos el problema también. Aquí hay oportunidades para descubrir ese problema que experimentamos como usuario final, pero no es tan eficiente y fluido como nos gustaría, tampoco es tan rastreable. Por eso nos importa el monitoreo de aplicaciones. Queremos, como desarrolladores, conocer los problemas en nuestro código y la user experience con el código que escribimos. Por eso tenemos Sentry, ¿verdad? Sentry se enfoca en la observability del código. Monitoreamos la salud de una aplicación desde el front end hasta el back end. Y con el SDK de Sentry en tu aplicación, el concepto es configurar alertas. Y estas son alertas específicas que no son ruidosas y no están llenando de spam a los miembros del equipo. Configuraremos alertas muy específicas y detalladas con nuestra plataforma de alertas, para que los miembros del equipo importantes y los desarrolladores sean notificados y puedan trabajar en el problema. Todos los detalles capturados por Sentry están disponibles para que comprendan el contexto, la user experience también, cualquier pista sobre qué problemas podrían estar relacionados y también qué partes del código son importantes, cosas así, información contextual a través de una línea de tiempo de actividad y también hablaremos de las etiquetas. Al final del día, descubriremos qué está pasando, haremos los commits necesarios y luego solucionaremos el problema, ¿verdad? Esa es la forma en que incorporaríamos Sentry en nuestra aplicación.

Ahora, para seguir, tenemos una aplicación de demostración. Eso es para lo que es esta URL, pero si quieren, también la revisaremos juntos. Tengo una que se está ejecutando localmente y también tengo una que está alojada. Así que revisaremos ambas y jugaremos un poco con la que tengo ejecutándose localmente.

Si deseas seguir con tu propia aplicación, te guiaremos a través de los pasos para integrar Sentry, el SDK en React y Express. Puedes crear tu propia aplicación con create React app o Express generator, y eso será como una pizarra en blanco a la que puedes agregar Sentry, generar errores y verlos también. Pero yo usaré mi propia aplicación de demostración que se ejecuta localmente y que hemos clonado de este repositorio.

Después de decidir qué aplicación queremos usar para esto, puedes registrarte a través de Sentry.io, crear proyectos desde allí, pero lo haremos juntos. También grabaremos esta reunión. Así que siéntete libre de simplemente sentarte y observar. Tenemos documentación disponible sobre cómo comenzar con React y Express específicamente, así como otros frameworks y lenguajes. Puedes encontrarla en nuestra página de documentación en Sentry.io. Tenemos todos los lenguajes y frameworks compatibles justo en la página principal, pero para todos ellos, puedes hacer clic en este botón para ver los detalles de la aplicación con la que deseas ejecutar Sentry.

En cualquier caso, comencemos. Bien, aquí estoy. Con la configuración, tenemos detalles en estas páginas de documentación. Así que desde nuestra página de documentación, podemos acceder a nuestra documentación de React a través de este botón. Y lo que esto hace, o los detalles descritos en esta página de documentación, es cómo instalar, ¿verdad? Cómo obtener nuestras bibliotecas con una instalación de NPM o un agregado de Yarn. Y luego configuraremos Sentry con Sentry.init. Con estos detalles, incorporaremos Sentry en nuestra aplicación, como se describe aquí. Una vez hecho esto, todas las excepciones no controladas se capturarán automáticamente con Sentry. Eso es en el lado de React. También tenemos integraciones con React Router y Redux, que mostraré en mi aplicación aquí.

Tengo mi aplicación aquí, y los detalles sobre Sentry.init, solo para replicar y coincidir con lo que vemos aquí. Lo explicaré con más detalle. En realidad, comencemos creando nuestro proyecto. Una vez que te registres, tendrás tu propia organización y podrás crear un proyecto como estoy haciendo aquí. Así que voy a crear un proyecto. Comencemos con React, como hemos estado hablando, y con React, o con cualquier proyecto en realidad, puedes configurar tus ajustes de alerta predeterminados. Esta es una alerta muy básica y profundizaremos en detalles sobre alertas más complejas en el capítulo cuatro. Podemos comenzar simplemente con la alerta de notificarme sobre cada nuevo problema. Así que comenzaremos con eso, establecemos nuestro nombre. Digamos DevOps React. Tenemos a nuestros usuarios organizados por equipos.

Así que tengo mi equipo Simone Limon. Crea el proyecto de inmediato. Y una vez que crees el proyecto, los detalles sobre cómo comenzar se reflejan básicamente en la siguiente página. Así que todo lo que ves aquí también está disponible en la documentación directamente para más detalles. Pero vamos a basarnos en esto.

Así que tenemos nuestros paquetes Century React y Century Tracing que necesitamos. Así que volviendo a mi aplicación, eso está en mi package JSON. Así que Century React, Century Tracing se agregan allí. Así que lo instalaría con NPM install para mí.

Ahora volviendo a la parte de Century Init, también los importaremos, pero yendo a la parte de Century Init. Así que eso está en mi index.js. Ya lo tenemos. Y la clave DSN, eso es el nombre de origen de datos, también se crea o se reemplaza en este paso. Entonces, este DSN le dice a tu aplicación dónde enviar los eventos de error y transacción, y eso es este proyecto específico en Sentry. Voy a copiar esto, pegarlo en mi código, y podemos agregar integraciones.

Esto es lo que podemos instrumentar automáticamente con Sentry. Los detalles sobre eso también están disponibles en la documentación a través de esta página, pero más específicamente en la guía de React. Así que los detalles sobre la instrumentación automática de la integración de seguimiento del navegador se detallan aquí. Entonces, lo que esto hará por nosotros es que con cada carga de página y navegación, se generará una transacción. Explicaremos qué significa eso, pero ten en cuenta que es una transacción cada vez que hay una carga de página o navegación.

De acuerdo. Ahora, volviendo de estos pasos a mi aplicación aquí, tenemos nuestras integraciones con el seguimiento del navegador. Así que lo he configurado, agregué algunos orígenes de seguimiento para permitir que se rastreen ciertas partes. Y también hablamos un poco sobre la integración de React Router y también Redux. Así que esos detalles están disponibles en el lado de la instrumentación con Redux. Detalles de integración de Redux aquí y detalles de React Router aquí. Así que los agregué y veremos cómo se representan en nuestra aplicación. Una vez que tengamos eso y haya reemplazado el nombre del origen de datos con el proporcionado al crear el proyecto. Ahora podemos ir a nuestros problemas. A medida que esta aplicación se está ejecutando los errores y transacciones serían visibles en nuestra página de problemas.

De acuerdo, hemos creado uno, nuestro proyecto DevOps React justo ahora. Vamos a hacer lo mismo, pero ahora para nuestro proyecto Express. Así que crearé mi proyecto, Express. Hagamos las mismas alertas para que me avisen de cada nuevo problema. DevOps Express, mismo equipo, mantengámoslo simple.

Crea el proyecto, ahora lo mismo. Tengo mi aplicación Express aquí, agregué el paquete sentry node, sentry tracing en mi package json. Así que tengo las últimas versiones también. La configuración es lo mismo. Estoy copiando el nombre de origen de datos en mi aplicación y configurando las integraciones en consecuencia también. Los detalles sobre qué configuraciones están disponibles se enumeran en esta página o también en la página de documentación correspondiente. Específicamente para Express, puedes encontrarlo dentro de NodeJS.

De acuerdo, con ambos, con el nombre de origen de datos actualizado ahora, simplemente voy a seguir adelante y por favor ignora todos los errores que aparezcan cuando haga un npm install, pero haré lo mismo para ambos. Mis aplicaciones locales aquí. Y inicio los proyectos. De acuerdo, con eso, los estoy ejecutando localmente, continuemos desde aquí. Hemos hablado sobre la configuración, lo que está disponible a través de las guías, los detalles sobre las integraciones allí, lo que se captura automáticamente, esos errores y excepciones. Y ahora, podemos hablar sobre cómo situarnos con las integraciones de Sentry, y eso es subiendo nuestros source maps, especialmente para nuestra aplicación de front-end.

Entonces, en nuestro proyecto React, tengo configurados los source maps, y también he configurado los entornos y los detalles de lanzamiento a través de nuestro script de ejecución. Los source maps, específicamente, creo que todos estamos un poco familiarizados, donde nuestro código de nivel de producción se minifica para un rendimiento óptimo, ¿verdad? Pero eso hace que sea un poco complicado para nosotros descifrar cuál es el rastro de la pila porque está minificado, no es legible para los humanos. Entonces, la solución a eso es subir tus source maps a Sentry. Tenemos una página de documentación disponible para más detalles allí. Cómo podemos proporcionarlos a Sentry, podemos subirlos directamente, y eso es lo que recomendamos. Lo tengo configurado a través de la herramienta Sentry CLI. La forma en que funciona para mí, y puedes replicarlo de la misma manera, es con la herramienta Sentry CLI, podemos configurar los detalles de lanzamiento, los detalles de nuestro proyecto también, decirle a Sentry con qué lanzamiento asociar nuestros source maps, y a partir de ahí, nuestros source maps se subirán durante nuestro proceso de compilación y cuando lo sirvamos localmente.

De acuerdo. Bien, y estas páginas de documentación se consolidarán y se enviarán después de esta sesión. Así que a medida que lleguen las preguntas también, veremos qué es relevante para todos ustedes y compartiremos los detalles relevantes o las páginas de documentación correspondientes para que puedan profundizar en ellos. De acuerdo, esos son los detalles de los source maps y también los hemos configurado en mi aplicación local. Ahora estamos integrados.

Entonces, con la aplicación problemática que experimentamos anteriormente, enviaremos los detalles de la sesión a Sentry que nos ayudará a descubrir si los usuarios tuvieron una salida limpia o no. Sabes, cuando están usando tu aplicación de principio a fin, ¿experimentaron algún error? Eso nos ayudará a comprender la tasa de sesiones sin errores detallada según las versiones.

También enviamos errores a Sentry y transacciones a medida que los usuarios interactúan con nuestra aplicación. Genial. Entonces ahora, con Sentry, hagamos lo mismo. Ahora estoy ejecutando desde Localhost. Entonces, antes de profundizar demasiado en esto, ¿creamos alertas, verdad? Y queremos ser notificados cuando ocurran errores. Con nuestros proyectos de DevOps, déjame ver, en realidad no hay errores ocurriendo todavía. No los hemos provocado, pero configuramos esas alertas predeterminadas. Ahora, las alertas predeterminadas, no las enviaremos a ningún lugar en particular todavía hasta que realmente les digamos dónde enviarlas. Pueden enviarse a los propietarios del problema, pero no tenemos una forma de establecer los propietarios del problema hasta que lleguemos a las reglas, lo cual haremos. Pero solo para empezar, voy a decir que para este rol de alerta, cuando se crea un nuevo problema, quiero ser notificado a través de Slack. Ya tengo configurada la integración de Slack. Pero una vez que lo hayas configurado, básicamente defines el espacio de trabajo y dónde irán esas notificaciones. Para mí, quiero que se envíen a este canal de Slack.

De acuerdo. Con eso, agreguemos el espacio de trabajo SimonSentry catch-all. Agreguemos algo de contexto como el tipo de cliente. También mostremos otra información. Entonces, cuando recibamos notificaciones de los problemas, también obtendremos algo de contexto en la notificación. El tipo de cliente es útil, agreguemos el entorno, y esto está separado por comas. Y también obtengamos la información del usuario. Con eso, podemos establecer un intervalo de acción para no recibir spam. Cada cinco minutos, podemos recibir notificaciones, está bien. No está mal. Y eso es suficiente. Así es para nuestra alerta de Express, y también tenemos la misma alerta para nuestro proyecto de react. Actualicémoslo. La misma información.

Entonces, podemos agregar múltiples acciones, pero simplemente estoy eliminando la anterior y agregando una nueva aquí. Hagamos lo mismo. Espacio de trabajo de demostración de Sentry, mi espacio de trabajo para todo. Y, por supuesto, puedes agregar otros espacios de trabajo para mantener todo organizado, pero para nuestra demostración, usaremos el mismo. Tipo de cliente, entorno y usuario. Cinco minutos, guardar.

De acuerdo. Ahora volviendo a nuestra aplicación, de vez en cuando se bloquea. Así que actualicémosla varias veces y luego se bloqueó. De acuerdo. Ahora tenemos los detalles allí. Vamos a actualizarla una vez más. ¿El otro error que experimentamos, verdad? Fueron las ralentizaciones al cargar productos. Permíteme entrar en eso. Queremos capturar esta información. Y ahora que tenemos Sentry integrado, a medida que esto sucede, los datos se transmiten o se envían a Sentry. Solo para replicar el mismo error que experimentamos anteriormente, agregué un par de elementos a nuestro carrito, realicé el pago y recibí el error. Ahora, en nuestro Sentry, en el canal de Slack de Simon Sentry Catch All, estoy empezando a recibir notificaciones de los errores que acabamos de producir con nuestro sombrero de usuario final en mi aplicación local. Así que tenemos tres errores. Genial. Ahora, con estos detalles, tenemos visibilidad. Con la integración con Sentry, tenemos visibilidad de esos bloqueos, ralentizaciones y errores.

Ahora, profundicemos en los errores. Recapitularemos una vez que hayamos revisado los detalles aquí. Podemos acceder a los errores directamente a través de las notificaciones. Recuerda que configuramos las notificaciones para que nos den las etiquetas con el tipo de cliente, entorno y usuarios. Eso nos ayuda como desarrolladores a determinar qué es relevante aquí. ¿Debería profundizar en ello? Digamos que sí, profundicemos en este, nuestro proyecto de Express de DevOps. Y también tenemos otro error, ¿verdad? Que llegó a través del canal de Slack. Este es nuestro proyecto de React de DevOps que creamos juntos.

Con eso, eso marca la casilla para nuestro lado de los errores. Permítanme avanzar ahora para hablar sobre el performance.

Entonces, el performance en Sentry se detalla a través de este diagrama. Podemos comenzar aquí. También tenemos un diagrama más divertido. Tal vez hagamos este.

Este diagrama muestra cómo representamos las transacciones en Sentry o los detalles de performance en Sentry. Tenemos una traza y una traza es una solicitud a una aplicación. Cuando tenemos una solicitud a una aplicación, comenzamos una traza si aún no hay ninguna, y tenemos esta aplicación amarilla, puedes pensar en ella de esta manera, aplicación amarilla, aplicación azul, aplicación morada. Nuestra aplicación amarilla está realizando una actividad y durante esa actividad, también realiza una solicitud a nuestra aplicación azul, que a su vez realiza una solicitud a nuestra aplicación morada. Y mientras esto sucede, pasamos un identificador de traza único. A medida que las aplicaciones reciben solicitudes, Sentry ha agregado ese identificador de traza como un encabezado personalizado. Así que sabe cómo incorporar la solicitud y la transacción y los detalles detrás de escena y consolidarlos juntos en Sentry. Así es como funciona la actividad de performance a través de una traza distribuida. Así que estamos rastreando la actividad en varias aplicaciones. Una vez que se completa la solicitud original, se finaliza la traza, ¿verdad? Así que eso es solo una descripción general de lo que son las transacciones.

Lo último, los spans. Los spans son operaciones individuales que ocurren durante una transacción. También podemos complementar los detalles de los spans con más data. También hablaremos sobre Web Vitals. Así es como podemos medir nuestra aplicación web y cómo los usuarios finales la experimentan. El User Misery Score nos guiará en términos de dónde buscar transacciones problemáticas. Y tenemos etiquetas y migas de pan, lo mismo que experimentamos anteriormente en el lado de los errores, pero ahora desde un ángulo de performance.

Entonces, teniendo eso en cuenta, lo que tenemos en la aplicación que desarrollamos o hicimos juntos, volviendo a nuestro error en el frontend o mejor dicho, en nuestro proyecto frontend, podemos ir a la página de performance. Y aquí tenemos la página de performance. Aquí tenemos detalles sobre nuestros Web Vitals. Como es una aplicación nueva, no es muy útil. No hemos proporcionado suficientes data para aprovecharlo realmente. Así que eso es algo importante a tener en cuenta con Sentry es que debes proporcionar suficientes data para que podamos entender lo que está sucediendo. Solo revisaré esto junto a nuestra aplicación existente aquí.

Aquí tenemos la misma aplicación, pero esta vez tenemos data alimentada con algunos Web Vitals que se muestran de inmediato. Los detalles de Contentful Paint más grandes como cuánto tiempo tardó en cargarse lo más grande. FCP es lo primero en cargarse, lo primero en despreciarse. Cómo se comportan nuestras transacciones en comparación con esos Web Vitals. Por ejemplo, nuestras solicitudes de productos son muy problemáticas. También tenemos un alto puntaje de miseria del usuario en eso. Entonces, Sentry nos está guiando para que echemos un vistazo a nuestras transacciones de productos.

Aquí tenemos los detalles de solo las transacciones de productos, sus Web Vitals en comparación, cómo se desempeñan en relación con nuestros Web Vitals en las últimas 24 horas, que se pueden ajustar. Si queremos analizar más a fondo los Web Vitals, también podemos hacerlo en nuestra página de Web Vitals. Esto es si realmente nos importa cómo se desempeña nuestra aplicación en relación con este tipo de problemas. ¿Estándares de la industria, verdad? Con el Contentful Paint más grande y detalles sobre cómo se miden también están disponibles aquí. Con nuestro Contentful Paint más grande, podemos hacer clic y arrastrar para resaltar nuestro conjunto de eventos que nos interesan.

Al ver ese conjunto de eventos, tenemos todas nuestras transacciones problemáticas de Contentful Paint más grande aquí. Con eso, podemos ver los detalles de una transacción individual. Esos spans, para volver al diagrama que teníamos antes, estos spans son estas operaciones individuales que hemos enumerado. Entonces, con nuestra aplicación React, estamos capturando automáticamente cierta actividad del navegador, cargas de recursos, actividad de montaje de React. También tenemos la función de trazabilidad distribuida ya que tenemos Sentry incorporado en nuestras otras aplicaciones. Tenemos esos detalles, esas transacciones y sus spans disponibles para expandir aquí desde una vista única. Para nuestra transacción de productos desde nuestra aplicación frontend, también tenemos los Web Vitals específicos de este evento. Entonces, está fallando en el Contentful Paint más grande, ocurrió durante 10 segundos de 10 segundos y medio. Y la mayor parte del tiempo, mientras revisamos esto, ocurre en esta operación de cliente HTTP. Detalles de etiquetas para ayudarnos a comprender mejor qué está sucediendo aquí y también una línea de tiempo de actividades. Estas migas de pan nos ayudan a entender la experiencia del usuario también. Ahora, con Sentry, ya que tenemos la aplicación o el SDK en nuestra aplicación backend y otras aplicaciones relacionadas, podemos desde aquí ampliar para comprender la actividad desde el backend. Y aquí tenemos detalles sobre las consultas a la base de datos que ocurrieron durante esta transacción. Podemos averiguar por qué está tardando tanto. Si queremos complementar los spans con más detalles para entender más de lo que está sucediendo, eso también es muy importante y útil. Pero a partir de esta trazabilidad distribuida, también quería cambiar la vista para que podamos ver la traza completa. Entonces, con este ID de traza, recordemos que tenemos una sola traza aquí, y en nuestro caso, tenemos seis transacciones ocurriendo. Entonces, nuestra aplicación frontend llama a otras aplicaciones, en este caso, nuestra aplicación Python.

Y también tenemos dentro de una aplicación Python que llama a nuestra aplicación Rails. Así que tenemos tres aplicaciones similares a este diagrama, y son no bloqueantes. Por lo tanto, estas están ocurriendo de forma asíncrona, no hay problema. Entrando en aquella que está tomando la mayor parte del tiempo, podemos ver la transacción para eso, ver los mismos detalles que vimos anteriormente en el desglose del tiempo de operación, pero ahora tenemos información de etiqueta sobre esta actividad de Flask. Así que esta es solo otra forma de sumergirse en los detalles de performance que se han capturado a través de Sentry.

Bien, hemos hablado sobre Web Vitals, el puntaje de miseria del usuario que nos llevó a la transacción que revisamos y también etiquetas y migas de pan para contexto adicional. Una forma de complementar una etiqueta y data dentro de una transacción, voy a ir a esta transacción de unión de productos que he editado en mi aplicación local. He agregado esta información. Entonces, dentro de esa transacción, he establecido manualmente, por lo que podemos establecer manualmente spans y establecer manualmente data. Así que he establecido manualmente en este caso, puedes ver el resaltado en verde, creado un span con la operación llamada operación elegante con una nueva descripción, mi nueva descripción, y puedo complementar este span con data, como puedes ver aquí con datos personalizados, establecer datos personalizados. Muy detallado, pero también podemos agregar migas de pan de manera similar. Entonces, si queremos complementar los data que estamos enviando a Sentry, eso está disponible a través del SDK como puedes ver aquí.

Ahora, ¿cómo se representa esto en el lado de Sentry? Echemos un vistazo. Entonces, en mi aplicación React, vamos a todas las transacciones para encontrar nuestra operación de unión de productos. Las tenemos todas enumeradas, todas dos. No muy útil, ¿verdad? Pero es nuestra aplicación local, no hay problema. Así que aquí tenemos nuestra operación elegante de la que hablamos. Así que aquí podemos actualizar manualmente los detalles de la operación y los detalles de la descripción, incluso si los hemos recibido de un span instrumentado automáticamente. Así que siempre podemos editarlos. Podemos actualizar los detalles y también podemos complementar los data dentro de él. Así que he activado esta operación elegante, si puedes ver aquí. Y tenemos detalles en consecuencia con las etiquetas que hemos establecido. Y así es como se representa esto. Y también los datos personalizados que hemos agregado dentro del span. Y esto ayuda, así que como desarrolladores, podemos hacer clic en spans individuales para entender qué está sucediendo y también complementarlos específicamente. También podemos complementar la transacción con etiquetas. Hablamos sobre agregar migas de pan. Entonces, con eso, en mi aplicación, he agregado una categoría personalizada, cat personalizado con un marcador de enrutamiento. Así que mientras trabajamos en nuestra aplicación aquí, si queremos complementar más actividad en la línea de tiempo, eso está disponible a través de las migas de pan. Así que tenemos un marcador de enrutamiento en nuestras migas de pan.

Ahora, solo para hacer un pequeño desvío, también quería mencionar, porque esto está en la mente, hice una masterclass con monday.com la semana pasada, y tienen esta publicación de blog espectacular, que recomiendo encarecidamente y compartiré después de esta reunión también, donde hablan sobre cómo han utilizado Sentry e incorporado etiquetas en las migas de pan que les han sido útiles. Entonces, en su caso, han agregado etiquetas en el lado de los problemas. Así que volviendo a un problema, han agregado su propio conjunto de etiquetas, ¿verdad? Tenemos una etiqueta personalizada, tipo de cliente, pero ellos han agregado las suyas que les han sido útiles. En su caso, las banderas de características fueron realmente útiles, el tipo de nivel también para ayudar a dividir los problemas y organizarlos por niveles y última acción. Así que esto es solo para inspirar, supongo, cómo puedes incorporar etiquetas que sean útiles para tu equipo o únicas para tu organización, lo que sea.

Ahora, lo siguiente que quería resaltar para nosotros es construir una línea de tiempo significativa, porque acabamos de hablar de agregar esas migas de pan personalizadas, ¿verdad? Así que las migas de pan personalizadas, oh, también tenemos migas de pan en nuestro lado de los problemas. Así que aquí tenemos nuestras migas de pan, la línea de tiempo de actividades que llevaron al error, que también se puede filtrar por diferentes tipos de actividades. Entonces, si queremos comprender al usuario desde la experiencia del usuario, podemos ver, por ejemplo, los clics de la interfaz de usuario a dónde navegaron y desde dónde, las llamadas de búsqueda que también ocurren detrás de escena que llevan al error. Así que esta línea de tiempo de actividades, también podemos complementarla con nuestras propias migas de pan. Así que eso se detalla aquí. Para Monday, les gustaba el último evento, el último evento de websocket enviado, algunos detalles de acciones de Redux más, eventos de análisis, pero puedes agregar los tuyos y esa secuencia de la línea de tiempo puede ayudar a solucionar problemas y hacer el diagnóstico, depuración, etc.

De acuerdo. Creo que este es un buen punto de parada. Solo quería, porque ya hemos hablado de rastreo distribuido, el navegador se encargará de conectar los puntos para el error. Pero también quería rastrear errores desde el front-end hasta el back-end. Esa es toda la premisa de esta reunión de todos modos, así que hagámoslo. Ya hemos rastreado el front-end y el back-end como ya hemos visto, pero ahora que hemos hablado de performance, veamos el rastreo completo. Así que recuerda que tenemos ese ID de rastreo unificado, y dentro de este rastreo, tenemos dos transacciones y dos errores ocurriendo durante esa experiencia. Podemos ver las transacciones como antes para ver el desglose de la operación, complementarlo con spans, si queremos, como hemos hablado. También podemos ver dónde ocurrió el error durante la transacción. Alternar desde la transacción, como tenemos aquí, hasta el error, y luego ir del error al error del back-end o del error a la transacción del back-end. Así que todo está disponible en el lado de Sentry desde esta vista unificada donde podemos ir desde las transacciones y los errores que están ocurriendo junto a ellas. Así que esa es la parte de rastreo de errores que quería destacar definitivamente para nosotros. Y eso es con esa función de rastreo distribuido que tenemos. Genial. Ahora, continuemos con las alertas. Así que recuerda que volvimos en el tiempo, configuramos nuestro Sentry en nuestra aplicación alojada públicamente, y también configuré alertas para nosotros. La alerta que tengo para nosotros fue similar a la que revisamos juntos, esa alerta de problemas. Repitamos, bueno, ya lo hemos hecho juntos a través de la página de alertas. Así que podemos crear una alerta, podemos crear más alertas a partir de estos diferentes tipos de alertas sugeridas con ejemplos también.

Aquí hay mucha variedad con la que podemos experimentar. Pero para el sitio de alertas de problemas, en lugar de algo muy básico, como cuando se crea un nuevo problema, también podemos considerar casos en los que el número de eventos en el problema sea, digamos, más que una cierta cantidad en una hora. También podemos agregar otros criterios a eso. Por ejemplo, el número de eventos de un problema es un porcentaje más alto, digamos, en una hora en comparación con otro período de tiempo anterior. Todo esto es configurable, por lo que si hay picos en tu aplicación, ciertamente podemos recibir notificaciones al respecto. A medida que agregamos más disparadores, como los llamamos, podemos usar un operador AND o OR en ellos. También podemos hacer lo mismo con los filtros. Podemos usar operadores AND, OR o NOT en ellos. Podemos ser muy detallados en este sentido también. Por ejemplo, si solo nos importa el entorno, donde es producción, cosas así. Podemos agregar filtros a partir de esto, y también podemos realizar diferentes tipos de acciones. Mostramos una notificación en Slack, pero también nos integramos con otras plataformas de notificación como PagerDuty y Teams. También podemos crear un problema en JIRA inmediatamente cuando estos disparadores y filtros activan esta alerta. Tenemos criterios sobre cómo funcionaría eso. Los detalles sobre nuestra integración con la configuración de enlaces de problemas que se establecen dentro de nuestra integración se pueden configurar aquí.

Solo para desviarnos un poco en el lado de la integración, todos están listados en la página de integración de nuestra organización. Con JIRA específicamente, hay una vinculación bidireccional, y ten en cuenta que hay JIRA y JIRA Server. Así que eso sería como las versiones alojadas versus en local. Con las configuraciones que establecemos, hay una vinculación bidireccional en términos de lo que está sucediendo en el lado de Sentry y qué actividad estaría sucediendo en el lado de JIRA. Así es como se sincronizaría. Compartiré los detalles después de la reunión en nuestra, también tenemos una página de documentación para esto. Así que eso es sobre el tipo de alerta de problemas.

También tenemos alertas de estilo métrico. Por ejemplo, si hay actividad, volviendo a nuestra actividad de performance, volvamos a nuestro proyecto más interesante, en realidad. Si hay alguna actividad de performance en, digamos, el lado del producto que nos interesa, podemos hacerlo a través de un rendimiento, es decir, con qué frecuencia ciertas transacciones están llegando a Sentry, o también podemos crear una alerta en función de la duración de la transacción si las cosas están tardando mucho tiempo. Así que volviendo a la transacción del producto que fue, ya sabes, muy lenta, podemos hacer un P95 durante, digamos, cinco minutos solo para obtener puntos de datos más específicos aquí. Y si las cosas están por encima de cierto número de segundos, digamos, ocho segundos, por encima de ocho segundos es crítico, de siete a ocho segundos es una advertencia, por debajo de siete segundos se puede resolver. Estos umbrales se resaltarían en nuestro gráfico de vista previa aquí. También podemos configurar el gráfico de vista previa para un período de tiempo diferente. También podemos establecer un cambio porcentual similar a lo que hablamos antes.

Entonces, si las cosas están aumentando rápidamente, podemos recibir una notificación al respecto y tomar medidas. Por lo tanto, podemos notificar según diferentes umbrales. Un ejemplo de cómo se vería esto se representa en las alertas que tengo aquí. Cuando pasamos de un umbral de advertencia a un umbral crítico, recibimos una alerta de esta manera, o si se resuelve, también recibimos una alerta. Esto es a través de Slack, pero también podemos configurar estas alertas a través de correo electrónico y se verían de la misma manera con la codificación de colores. Así que eso es en el lado de las alertas con la página de documentación que especifica todos los criterios y cuán detallados podemos ser con los diferentes tipos de notificaciones. Así que compartiré eso.

También quería hablar sobre las liberaciones. Así es como podemos prestar atención a cómo funcionan nuestras diferentes versiones de la aplicación. Tenemos detalles sobre los commits asociados que han ocurrido a través de integraciones con nuestro sistema de control de código fuente. ¿Qué commits ocurren allí? Y, oh, déjame habilitar esto. ¿Qué archivos han cambiado también? Y problemas y transacciones asociados con liberaciones específicas. Echemos un vistazo a cómo se representa esto en Sentry.

Entonces, con nuestras liberaciones, eso está en nuestra pestaña de Liberaciones, detallando diferentes versiones de nuestro código que se han implementado. Podemos ordenar por diferentes versiones de liberación. Así es, admitimos la versión semántica y puedes hacer algo como 22.X o lo que sea, organizado por diferentes entornos que se han configurado en un cierto período de tiempo, mostrando información de sesiones. A medida que los usuarios interactúan o interactúan con su aplicación, enviamos una sesión para determinar esa tasa de sin fallos. Durante su experiencia, si no hubo caídas, es decir, sin errores no capturados o excepciones, entonces eso sería sin fallos, bueno. Tenemos detalles en las últimas 24 horas para ver la tasa de adopción allí, y también en las últimas dos semanas. En las últimas dos semanas, 49% de adopción en esta versión 22.3.3, 51% en 22.3.2. Ahora, al ingresar a una liberación, solo para mapear de vuelta a nuestra diapositiva aquí, tenemos detalles sobre los commits, los archivos modificados y los problemas correspondientes. Información de commit detallada aquí, quién cometió qué, enlaces rápidos a nuestro repositorio de GitHub, archivos modificados también, para saber qué archivos se cambiaron para esta liberación específica, y también la salud de esta liberación en las diferentes perspectivas, supongo. Tasas de sesiones sin fallos, tasas de fallos, etc., otros tipos de gráficos curados que son útiles, comparando esta liberación con todas las liberaciones a través de este gráfico superpuesto, alguna información sobre qué autores hicieron la mayoría de los commits y también nuestros problemas para esta versión específica de la liberación.

Con los problemas, ya hemos hablado un poco sobre todos los datos que capturamos a través de una página de problemas. También quería aprovechar esta oportunidad para hablar sobre los estados de problemas, y eso es una parte importante de Sentry para mantenernos organizados con el estado de nuestros problemas. Cuando llegan, se marcan como no resueltos, a medida que nuestros desarrolladores los solucionan, una vez que lo han resuelto y no creen que volverá a ocurrir, lo marcarían como resuelto. Ahora, si el problema vuelve a ocurrir después de haber sido resuelto, es decir, regresión, problema visto nuevamente, eso significa que se enumeraría como un problema regresado. Así es como nos mantenemos organizados y ayudamos a guiar a nuestros usuarios finales sobre en qué prestar atención, especialmente en el lado de las regresiones. Bien, sé que solo nos quedan ocho minutos y tengo algunos temas más para repasar, así que gracias por aguantar aquí. También quería hablar sobre Descubrimiento y paneles de control. Tengo dos ejemplos para que los revisemos, uno de los cuales es comprender los errores para nuestros clientes de nivel empresarial y queremos comprender estos errores en el contexto de los navegadores, ¿verdad? Para hacer esto, tenemos nuestra consulta de Descubrimiento. Así es, es una plataforma de consultas para cortar y cortar los datos que hemos capturado a través de Sentry. Ahora, yendo a eso, tenemos algunas consultas predefinidas de Descubrimiento que puedo alternar. Al ingresar a los errores por título, eso es como una forma de comenzar nuestra consulta de Descubrimiento, por así decirlo. Podemos organizar por varios o uno o muchos o todos nuestros proyectos para cortar y cortar los datos, filtrar por entornos también o período de tiempo. Ahora, con la indicación, estamos buscando errores para clientes empresariales organizados por navegador. Este es solo un ejemplo para que lo veamos.

Tenemos nuestra etiqueta de tipo de cliente, y puedes tener tus propias etiquetas como mencionamos anteriormente. Así que agreguémosla. Escribo, hago clic en eso, eso lo agregó como filtro. Además, podemos excluir el tipo de cliente enterprise, y eso básicamente nos dará todo lo que no sea enterprise. Así que eso también está disponible.

En cualquier caso, volviendo a la indicación, usuarios empresariales y queremos conocer la distribución de estos errores por navegadores. Así que hagámoslo juntos. Tenemos nuestro navegador, tenemos un nombre de navegador, y también podemos contar eso. Así que apliquemos estas columnas y eso actualizará nuestro conjunto de resultados. Y sabemos que solo en las últimas 24 horas, este es nuestro desglose de los errores para nuestros clientes enterprise según sus navegadores. Si nos gusta lo que vemos, siempre podemos agregarlo a un panel de control como lo llamamos. Así que esa es una agregación de estas consultas de descubrimiento. Y también podemos profundizar en un conjunto de resultados, echar un vistazo a ese agrupamiento, agruparlos, agregar más columnas, lo que sea, pero eventualmente llegar a los detalles del evento, volver al rastreo como revisamos antes juntos, entrar en los errores, entrar en la transacción, etc. Así que ese es solo un ejemplo. Y sé que solo nos quedan cinco minutos. Así que en realidad voy a pasar por alto el segundo ejemplo. Podemos hablar más al respecto, y también puedo guiarlos a través de los detalles en un correo electrónico de seguimiento aquí.

Pero en cuanto a los paneles de control, permíteme ir a nuestra pestaña de paneles de control aquí. Como mencioné, es una agregación de consultas de descubrimiento que hemos guardado en él. Esto es muy dinámico y se puede configurar por equipo o por organización o incluso por persona. Así que es cualquier data que sea relevante para ti o para quien sea y se organiza y visualiza de manera única donde detrás de escena hay una consulta de descubrimiento. Y también podemos cambiar la visualización de un número a un gráfico o un diagrama, etc. Así que eso es en el lado del descubrimiento. Es la tabla de eventos data, donde puedes guardar lo que te gusta y visualizarlo de diferentes maneras.

Tenemos consultas de descubrimiento bastante reunidas en paneles de control que ayudamos a nuestros usuarios. Así que descubrir qué es único para ti o qué te resulta útil. Estamos encantados, como ingenieros de soluciones de descubrirlo juntos. Genial. Las últimas cosas que quería hacer juntos, parece que esto está un poco defectuoso, es hablar sobre el sandbox para que todos ustedes puedan jugar con Sentry sin necesidad de configurarlo como lo hemos hecho juntos. Aunque no es demasiado complicado, pero una forma fácil de empezar con Sentry es simplemente ir a Sentry.io. Estoy en modo incógnito. Puedes ir al sandbox. Y desde aquí, puedes jugar con los problemas como hemos hablado del lado del performance que también hemos visto juntos. Descubrir y los paneles de control son muy divertidos para explorar, entender diferentes, supongo, perspectivas de errores y transacciones y formas de analizar como hemos hablado. Así que eso está disponible directamente desde la página de Sentry.io y el botón de sandbox aquí. Así que también compartiré esos detalles. Ahora, mi presentación se ha congelado, pero eso es básicamente la esencia de ello.

Tenemos unos minutos para preguntas aquí y por último, me dijeron que tenemos esta página para dejarte. Así que si quieres empezar con Sentry, no dudes en ir a Sentry.io/signup y seguir con nosotros allí. Ahora, disculpa por eso. Tengo algunas preguntas en el chat. Perfecto. Las responderé. Sé que nos quedan solo un par de minutos. Así que 4lex o Alex está preguntando, ¿es seguro en términos de GDPR usar Sentry actualmente en la UE ya que es una empresa de EE. UU.? Sí, lo es. Tenemos respuestas específicas. Cumplimos con el GDPR, y tenemos formas de eliminar data.

Tenemos herramientas de eliminación de datos en el lado de la aplicación y en el lado del servidor para asegurarnos de que la información sensible como información de identificación personal no se envíe a Sentry ni se guarde en Sentry. Pero cumplimos con el GDPR, así que todo está bien.

Hola, ¿puedes, okay, así que esto es Mohamed. Hola, ¿puedes compartir tu enlace de GitHub, por favor? Oh, perfecto, sí, lo enviaré. Así que ese es el monitoreo de aplicaciones y la demostración de la planta de energía que revisamos juntos. Ciertamente puedo compartir eso en el seguimiento.

Okay, can, all right, así que la siguiente pregunta de Daniel A es, ¿puedo ver errores de ataque contra la aplicación, errores de ataque, ¿se integran con otra plataforma de security para filtrar los errores en la categoría correcta? Puedo ver el alcance de la configuración actual, solo necesito ver cuál es el enfoque en eso. Okay, esto es interesante. No estoy seguro de si entiendo completamente, pero cuando se trata de problemas que tenemos en Sentry, se agrupan a través de la traza de pila como puedes ver aquí con nuestros 39,000 eventos que se han agregado juntos. Es a través de la traza de pila originalmente, pero si quisiéramos ajustar las reglas de agrupación de problemas, eso está disponible para considerar tal vez solo el primer marco o el segundo marco o un cierto número de marcos o eliminar la regla de huella digital para ver cómo los agrupamos juntos y solo mirar el mensaje de error. Así que agrupamos por mensaje de error. Hay diferentes formas de agregar estos problemas juntos o estos errores juntos. Okay.