Monitoreo 101 para Desarrolladores de React

Please sign in to watch this workshop.
Sign in
Bookmark
Rate this content

Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, ve cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.

This workshop has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Sentry es una empresa que ofrece herramientas de monitoreo de aplicaciones. Se utiliza para identificar rápidamente problemas de rendimiento o errores en las aplicaciones, proporcionando a los desarrolladores datos e información detallada para resolver problemas eficientemente.

Para comenzar a usar Sentry, se recomienda registrarse en una cuenta gratuita de Sentry. Luego, puedes integrar Sentry en tu proyecto siguiendo la documentación específica para el framework o lenguaje que estés usando, como React o Next.js.

El trazado distribuido es una técnica en Sentry que ayuda a depurar problemas de rendimiento o errores en las aplicaciones siguiendo el flujo de operaciones a través del frontend y backend. Permite ver cómo las diferentes partes de la aplicación interactúan entre sí y dónde pueden estar ocurriendo los fallos.

La reproducción de sesión en Sentry permite ver exactamente lo que el usuario estaba haciendo en la aplicación cuando ocurrió un error. Registra eventos de clics, entradas, movimientos del mouse y más, proporcionando un contexto visual y detallado que ayuda a entender y resolver problemas específicos de la experiencia del usuario.

Las alertas en Sentry son notificaciones configurables que informan sobre problemas críticos o cambios en el rendimiento de la aplicación. Se pueden configurar para activarse bajo condiciones específicas, como un número elevado de errores en un corto periodo. Las alertas pueden enviarse a través de email, Slack, Discord, entre otros canales.

Sí, Sentry ofrece integraciones con una amplia variedad de plataformas y herramientas como GitHub, Slack, Jira, Bitbucket y más. Estas integraciones permiten mejorar la gestión de errores y el flujo de trabajo de desarrollo al conectar Sentry directamente con las herramientas utilizadas por los equipos de desarrollo.

Lazar Nikolov
Lazar Nikolov
Sarah Guthals
Sarah Guthals
112 min
16 Oct, 2023

Comments

Sign in or register to post your comment.
  • Sergio Vinicius de Sa Lucena
    Sergio Vinicius de Sa Lucena
    Nord Security
    Did you guys record the workshop? If so, Is there a link we could use to watch it?
  • Maria Eugenia Trapani
    Maria Eugenia Trapani
    Eleven labs
    Hello, could you please share the meeting passcode? Zoom is asking it to join the call. Thanks
Sign in to access video transcription and chapter summary.

Watch more workshops on topic

Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
Node Congress 2022Node Congress 2022
53 min
Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry
Workshop
Neil Manvar
Neil Manvar
Repasaremos la configuración de Sentry paso a paso para obtener visibilidad en nuestro frontend y backend. Una vez integrado, rastrearemos y solucionaremos errores y transacciones que se muestren en Sentry desde nuestros servicios para comprender por qué/dónde/cómo ocurrieron errores y ralentizaciones en nuestro código de aplicación.
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
TypeScript Congress 2023TypeScript Congress 2023
48 min
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
Workshop
Nico Krüger
Nico Krüger
Durante esta sesión aprenderás cómo crear una nueva cuenta de Rollbar e integrar el SDK de Rollbar con tu aplicación para monitorizar errores en tiempo real y responder y solucionar esos errores. También cubriremos cómo personalizar los datos de carga útil enviados a Rollbar para ampliar tus capacidades de monitorización.

Agenda:- Crear una cuenta de Rollbar (Cuenta gratuita)- Integra tu aplicación con el SDK de Rollbar- Enviar errores gestionados y no gestionados a Rollbar- Añadir datos de carga útil personalizados a tu configuración.
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
JSNation 2023JSNation 2023
44 min
Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones
Workshop
Ryan Albrecht
Ryan Albrecht
¿Conoces ese molesto error? ¿El que no aparece localmente? Y no importa cuántas veces intentes recrear el entorno, no puedes reproducirlo. Has revisado las migas de pan, leído la traza de pila y ahora estás jugando al detective para unir los tickets de soporte y asegurarte de que sea real.
Únete al desarrollador de Sentry, Ryan Albrecht, en esta charla para aprender cómo los desarrolladores pueden utilizar la Reproducción de Sesiones, una herramienta que proporciona reproducciones de video de las interacciones de los usuarios, para identificar, reproducir y resolver errores y problemas de rendimiento más rápido (sin golpear tu cabeza contra el teclado).
Construyendo un Sentry: 7 años de código abierto React
React Advanced 2021React Advanced 2021
69 min
Construyendo un Sentry: 7 años de código abierto React
Workshop
Evan Purkhiser
David Wang
2 authors
Únete a Evan Purkhiser y David Wang de Sentry mientras recorren el código de 230k LoC de Typescript/React de Sentry. Contarán historias de guerra sobre lo bueno, lo malo y lo feo. Maravíllate con su uso moderno de Typescript, react hooks y styled components. Siente disgusto por su uso heredado de Reflux y su desconcertante configuración de Webpack. Sal del masterclass con un conocimiento práctico de técnicas para mantener un código base frontend a gran escala moderno y mantenible.

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

Dominando el Manejo de Errores en Node.js
Node Congress 2022Node Congress 2022
21 min
Dominando el Manejo de Errores en Node.js
Top Content
This Talk explores error handling in Node.js, including types of errors, handling techniques, and debugging. It discusses the use of exceptions, callbacks, and promises for error handling. The importance of proper error handling and the benefits of using error classes, expressive error messages, and automated testing are emphasized. The speaker also addresses the use of TypeScript and test-driven development for error prevention. Overall, the Talk provides valuable insights and techniques for mastering error handling in Node.js.
Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad
React Summit 2023React Summit 2023
7 min
Cómo Grafana Utiliza React para Potenciar el Mundo de la Observabilidad
Grafana uses React to power its open source platform, leveraging its vast ecosystem, improved performance, and community contributions. The choice of state management tool depends on the team's problem space. React Hooks have posed challenges but have also been a powerful tool for developers. The new Scenes library simplifies development and reduces the learning curve. Despite challenges, React remains a powerful tool for complex frontends, and Grafana will continue to use it.
Rastrea ralentizaciones y fallos en tus aplicaciones de React
React Advanced 2021React Advanced 2021
8 min
Rastrea ralentizaciones y fallos en tus aplicaciones de React
Sentry is a tool for code observability that supports multiple languages and frameworks. It allows monitoring of errors and performance in applications, such as React apps in an ecommerce site. With Sentry, developers can easily investigate errors using developer tools and get a summary of the error. It also provides human-readable stack traces that highlight the exact line of the error.
Monitorización de errores y ralentizaciones con un frontend de JS y un backend de Node
Node Congress 2022Node Congress 2022
8 min
Monitorización de errores y ralentizaciones con un frontend de JS y un backend de Node
Sentry is code monitoring for developers, specifically designed for the application layer. It helps identify error details, frequency, release, user information, and stack trace. Source maps can be uploaded to see the original source code and suspect commits can be identified. Performance monitoring helps identify slowdowns and determine the cause. Automating alerts and investigating errors helps gain instant context and trace errors across different projects.
Identificar Problemas y Prevenir Ralentizaciones en tus Aplicaciones Vue.JS
Vue.js London Live 2021Vue.js London Live 2021
8 min
Identificar Problemas y Prevenir Ralentizaciones en tus Aplicaciones Vue.JS
Hi, I'm Simon, a solutions engineer at Sentry. We focus on code observability, supporting all major languages and frameworks. With the Sentry SDK, you can monitor errors and performance. Get started with an easy installation process. Sentry provides detailed error information, including the stack trace and contextual information. It also supports source control management systems and integrates with issue tracking tools. The distributed trace feature allows you to see relationships between errors on the front end and back end. We can optimize queries to improve user experience and reduce user misery.
Monitoreo de Errores y Ralentizaciones en Aplicaciones JS
DevOps.js Conf 2022DevOps.js Conf 2022
8 min
Monitoreo de Errores y Ralentizaciones en Aplicaciones JS
Sentry is an error monitoring platform that helps developers optimize the customer experience by alerting them of errors and slowdowns. It supports all major languages and frameworks, with a focus on error monitoring, performance monitoring, and release health. The Talk explores how Sentry organizes and represents error data, analyzes error details and tags, and investigates backend issues, performance problems, and release health. Collaboration with backend teams is emphasized to resolve issues and optimize transaction time. The Talk also highlights the importance of analyzing graphs, issues, and regressions to identify areas for improvement in release health.