Seguimiento de errores y ralentizaciones en aplicaciones JS utilizando Sentry

Rate this content
Bookmark

Repasaremos la configuración de Sentry paso a paso para obtener visibilidad en nuestro frontend y backend. Una vez integrado, rastrearemos y solucionaremos errores + transacciones que se muestren en Sentry desde nuestros servicios para comprender por qué/dónde/cómo ocurrieron errores y ralentizaciones dentro de nuestro código de aplicación.

59 min
29 Mar, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Este masterclass sobre Sentry y Monitoreo de Aplicaciones cubre temas como el seguimiento de errores y ralentizaciones en aplicaciones JS, la integración de Sentry en React y Express, la configuración de alertas y notificaciones, el análisis de detalles de errores y rendimiento, y el uso de paneles de control y el sandbox. También destaca la importancia de la observabilidad del código, el uso de mapas de origen para descifrar código minificado y la capacidad de rastrear errores desde el frontend hasta el backend. Además, menciona las características del monitoreo de rendimiento, como el análisis de transacciones y el uso de métricas web. También se enfatizan las herramientas de eliminación de datos y el cumplimiento de GDPR.

Available in English

1. Introducción a Sentry y Monitoreo de Aplicaciones

Short description:

Hola a todos. Mi nombre es Simon. Soy un ingeniero de soluciones en Sentry. Hoy, hablaré sobre el seguimiento de errores y ralentizaciones en aplicaciones JS utilizando Sentry. Cubriremos el monitoreo de aplicaciones, los pasos de integración de Sentry, el monitoreo de errores y rendimiento, las alertas y la organización de datos a través de Discover y Dashboards. ¡Comencemos!

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

2. Introducción al Monitoreo de Aplicaciones y Sentry

Short description:

Comencemos con una aplicación problemática que se bloquea periódicamente, tarda mucho tiempo en cargar productos y encuentra errores durante el proceso de pago. Sin Sentry, es difícil identificar y solucionar eficientemente estos problemas. Por eso necesitamos el monitoreo de aplicaciones. Sentry se enfoca en la observabilidad del código, monitoreando la salud de una aplicación desde el front end hasta el back end. Con el SDK de Sentry, podemos configurar alertas específicas y capturar todos los detalles necesarios para comprender el contexto y la experiencia del usuario. Al incorporar Sentry en nuestra aplicación, podemos identificar y solucionar problemas de manera efectiva.

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.

3. Integración de Sentry en React y Express

Short description:

Si deseas integrar Sentry en tu propia aplicación, te guiaremos a través de los pasos para React y Express. Puedes crear una nueva aplicación o utilizar una existente. Regístrate en Sentry.io, crea proyectos y sigue nuestra documentación para React y Express. Una vez configurado, Sentry capturará automáticamente todas las excepciones no controladas. También tenemos integraciones con React Router y Redux. Comencemos creando un proyecto en nuestra propia organización. Configura tus ajustes de alerta predeterminados y podemos comenzar.

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.

4. Configuración de Sentry e Instrumentación

Short description:

Crea el proyecto y sigue las instrucciones proporcionadas. Instala los paquetes Century React y Century Tracing. Importa Century Init en index.js y reemplaza la clave DSN. Agrega integraciones para la instrumentación automática. Configura el seguimiento del navegador e integraciones con React Router y Redux. Verifica la página de problemas para ver errores visibles.

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.

5. Integración de Sentry y Subida de Source Maps

Short description:

Hemos creado el proyecto DevOps React y ahora estamos haciendo lo mismo para nuestro proyecto Express. La configuración es similar, incluyendo el nombre de origen de datos e integraciones. Estamos ejecutando ambos proyectos localmente. Hablemos sobre la subida de source maps para la aplicación de front-end. Los source maps nos ayudan a descifrar el código minificado al subirlos a Sentry. Podemos hacer esto directamente o a través de la herramienta Sentry CLI. Estos detalles se consolidarán y compartirán con las páginas de documentación relevantes después de la sesión.

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.

6. Configuración de Alertas y Notificaciones de Sentry

Short description:

Enviaremos los detalles de la sesión a Sentry para comprender la tasa de sesiones sin errores. Hemos configurado alertas para recibir notificaciones de errores. Recibiremos notificaciones a través de Slack con contexto sobre los problemas. La misma alerta está configurada para nuestros proyectos de Express y React.

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.

7. Integración de Sentry y Monitoreo de Errores

Short description:

Podemos agregar múltiples acciones eliminando la anterior y agregando una nueva. Usemos el espacio de trabajo de demostración de Sentry para nuestra demostración. Ahora, nuestra aplicación se bloquea intermitentemente y podemos ver los detalles. También experimentamos ralentizaciones al cargar productos y capturamos esa información. Con Sentry integrado, recibimos notificaciones de los errores en nuestra aplicación local. Ahora, profundicemos en los errores y exploremos los detalles. Podemos acceder a los errores a través de las notificaciones y usar las etiquetas para determinar su relevancia. Tenemos errores en nuestros proyectos de DevOps Express y React.

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.

8. Detalles del Error y Rendimiento

Short description:

Ahora aquí tenemos los detalles sobre quién, qué, cuándo y dónde del error que hemos generado juntos. Veamos el correspondiente error, pero desde una aplicación que ha estado en funcionamiento durante un tiempo. Hemos agrupado estas 172 veces donde ocurrió este error y afectó a 72 usuarios. Volviendo al que creamos juntos, DevOps React, ¿hablamos de los mapas de origen, verdad? Hemos subido nuestros mapas de origen. Tenemos una traza de pila sin minimizar para ver exactamente dónde ocurrió nuestro error dentro de nuestro código. También tenemos una línea de tiempo de actividades que llevaron a este error. Permítanme avanzar ahora para hablar sobre el rendimiento.

Ahora aquí tenemos los detalles sobre quién, qué, cuándo y dónde del error que hemos generado juntos. Como es un proyecto nuevo, vemos que ocurrió una vez para un usuario. Bien, tenemos detalles sobre la distribución a lo largo del tiempo. Así que el último día, los últimos 30 días en versiones, como también hemos mencionado. Y también tenemos información de etiquetas. Esto es genial cuando tenemos más de un error. Es difícil agrupar solo uno. El error correspondiente en nuestro caso, vamos a fingir que estamos saltando, viajemos en el tiempo por un minuto porque ya tengo esto situado con una aplicación más madura. Pero veamos el correspondiente error, pero desde una aplicación que ha estado en funcionamiento durante un tiempo. Así que tengo este, la misma aplicación que creamos juntos en realidad con nuestra aplicación problemática. Y aquí tenemos los mismos detalles pero con más datos para mostrar, hemos agrupado estas 172 veces donde ocurrió este error y afectó a 72 usuarios. Su distribución, más interesante, en el último día y los últimos 30 días en versiones. Y también ahora en nuestras etiquetas, tenemos información más interesante. Esto es un agregado de las 172 veces donde ocurrió este error. Y también tenemos detalles de etiquetas sobre esto, esta vez de las 172 veces que ocurrió este error. Bien. Ahora, volviendo al que creamos juntos, DevOps React, hablamos de los mapas de origen, ¿verdad? Hemos subido nuestros mapas de origen. Ahora, en lugar de ver esa traza de pila minimizada donde no se puede leer, no sabemos qué está pasando, tenemos una traza de pila sin minimizar para ver exactamente dónde ocurrió nuestro error dentro de nuestro código. Y también tenemos una línea de tiempo de actividades que llevaron a este error. Tenemos comprensión de alguna información de consola que ocurrió, una llamada fetch a nuestro backend, parece, y también llegamos a este error 500. También tenemos, en la parte superior, un conector que muestra este evento con un evento secundario. Aquí es donde viene esa traza distribuida, de la cual entraremos en más detalles en un minuto. Pero también quería hablar sobre los detalles del error que ocurrió, no solo en nuestra aplicación frontend, lo siento, aquí mismo, no solo en nuestra aplicación frontend con la aplicación DevOps React, sino también en nuestro backend. Así que nuestra aplicación DevOps Express, también la hemos activado localmente. Y los detalles sobre eso, quién, qué, cuándo y dónde, también están disponibles aquí. Ahora es desde la perspectiva del backend. Bien.

9. Monitoreo de rendimiento en Sentry

Short description:

Hablemos del rendimiento en Sentry. Representamos las transacciones a través de trazas, que son solicitudes a las aplicaciones. Las trazas se consolidan utilizando identificadores de traza únicos que se pasan como encabezados personalizados. Los spans son operaciones individuales dentro de una transacción. Podemos medir el rendimiento de la aplicación web utilizando Web Vitals y el User Misery Score. Las etiquetas y las migas de pan proporcionan información sobre el rendimiento. Sin embargo, para una nueva aplicación, es necesario proporcionar suficientes datos a Sentry para un análisis significativo.

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

10. Análisis de rendimiento y trazabilidad distribuida

Short description:

Aquí tenemos la misma aplicación con datos de Web Vitals. Podemos analizar el rendimiento de nuestras transacciones, especialmente las solicitudes problemáticas de productos. La página de Web Vitals permite un análisis más profundo y una comparación con los estándares de la industria. Al resaltar los eventos de Contentful Paint más grandes, podemos centrarnos en las transacciones problemáticas. Los detalles individuales de las transacciones, incluidos los spans y los Web Vitals, brindan información sobre problemas específicos. Además, la función de trazabilidad distribuida nos permite comprender la actividad desde el backend y las consultas a la base de datos.

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.

11. Complementando Detalles de Transacciones y Migras de Pan

Short description:

Tenemos tres aplicaciones no bloqueantes, incluyendo una aplicación Python que llama a una aplicación Rails. Al ver los detalles de la transacción, podemos analizar el rendimiento de la actividad de Flask. Podemos establecer manualmente spans, agregar datos personalizados y actualizar los detalles de la operación. En el lado de Sentry, podemos editar y complementar los detalles de la transacción, incluyendo etiquetas y datos personalizados. Las migas de pan proporcionan contexto adicional de la actividad en la línea de tiempo.

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.

12. Etiquetas, Línea de Tiempo, Rastreo de Errores y Alertas

Short description:

Hice una masterclass con monday.com la semana pasada, y tienen esta publicación de blog espectacular donde hablan sobre cómo han utilizado Sentry e incorporado etiquetas en las migas de pan. Construir una línea de tiempo significativa es importante para comprender la experiencia del usuario. Podemos rastrear errores desde el front-end hasta el back-end utilizando el ID de rastreo unificado. Dentro de este rastreo, tenemos dos transacciones y dos errores ocurriendo. Podemos ver las transacciones para ver el desglose de la operación y ver dónde ocurrió el error. También podemos alternar entre la transacción y el error, y pasar del error al error del back-end o a la transacción del back-end. Continuemos con las alertas y reproduzcamos la alerta de problemas que revisamos juntos.

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.

13. Configuración de Alertas de Problemas y Métricas

Short description:

Existen varias opciones para configurar alertas de problemas, incluyendo criterios basados en el número de eventos, picos en la aplicación y diferentes operadores y filtros. Sentry se integra con plataformas de notificación como Slack, PagerDuty y Teams, y puede crear problemas en JIRA. Los detalles de integración y la vinculación bidireccional con JIRA están disponibles. Las alertas de estilo métrico se pueden configurar en función del rendimiento de transacciones o la duración, con umbrales personalizables y gráficos de vista previa.

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.

14. Configuración de Alertas y Notificaciones

Short description:

Podemos configurar alertas basadas en diferentes umbrales y recibir notificaciones a través de Slack o correo electrónico. Las alertas están codificadas por colores y se pueden personalizar según criterios específicos. Hay documentación detallada disponible para referencia.

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.

15. Liberaciones, Estados de Problemas, Descubrimiento y Paneles de Control

Short description:

En Sentry, las liberaciones proporcionan detalles sobre los commits, los archivos modificados y los problemas asociados. La pestaña de Liberaciones muestra diferentes versiones del código implementado, ordenadas por versiones de liberación y organizadas por entornos. También muestra tasas de sesiones sin fallos y métricas de salud para cada liberación. Los estados de problemas en Sentry ayudan a realizar un seguimiento del estado de los problemas, marcándolos como no resueltos, resueltos o regresados. Descubrimiento es una plataforma de consultas en Sentry que permite analizar los datos capturados. Se pueden utilizar consultas predefinidas de Descubrimiento para analizar errores, como errores para clientes empresariales organizados por navegador.

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.

16. Analizando Errores por Navegador para Usuarios Empresariales

Short description:

Agreguemos la etiqueta de tipo de cliente y filtremos los errores para usuarios empresariales por navegador. Podemos aplicar columnas para ver el desglose de errores en las últimas 24 horas. Si estamos satisfechos, podemos agregarlo a un panel de control. Podemos profundizar en el conjunto de resultados, explorar los detalles del evento, rastrear errores y transacciones. Desafortunadamente, no tenemos tiempo para el segundo ejemplo, pero podemos discutirlo en un correo electrónico de seguimiento.

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

17. Paneles de control y Sandbox

Short description:

Hablemos de los paneles de control y el sandbox. Los paneles de control son una agregación de consultas de descubrimiento que se pueden personalizar para equipos, organizaciones o individuos. El sandbox te permite jugar con Sentry sin necesidad de configuración. Está disponible en la página de Sentry.io. Tenemos unos minutos para preguntas, y si quieres empezar con Sentry, visita Sentry.io/signup. Cumplimos con el GDPR y tenemos medidas para garantizar la seguridad de los datos.

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.

18. Data Scrubbing, GitHub Link, and Error Filtering

Short description:

Tenemos herramientas de eliminación de datos para garantizar que la información sensible no se envíe ni se guarde en Sentry. Cumplimos con el GDPR. Compartiré el enlace de GitHub para el monitoreo de aplicaciones y la demostración de la planta de energía. En cuanto a la filtración de errores, los problemas en Sentry se agrupan a través de trazas de pila, pero las reglas de agrupación se pueden ajustar para considerar tramas específicas o mensajes de error.

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.

Watch more workshops on topic

DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
DevOps.js Conf 2022DevOps.js Conf 2022
163 min
How to develop, build, and deploy Node.js microservices with Pulumi and Azure DevOps
Workshop
The workshop gives a practical perspective of key principles needed to develop, build, and maintain a set of microservices in the Node.js stack. It covers specifics of creating isolated TypeScript services using the monorepo approach with lerna and yarn workspaces. The workshop includes an overview and a live exercise to create cloud environment with Pulumi framework and Azure services. The sessions fits the best developers who want to learn and practice build and deploy techniques using Azure stack and Pulumi for Node.js.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!