Versión en EspañolES

[EN] Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
[ES] Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones

Soluciona el 100% de tus errores: Cómo encontrar problemas más rápido con la Reproducción de Sesiones

Please sign in to watch this workshop.

¿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).

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

FAQ

Replay es una herramienta de Sentry que permite realizar una depuración en viaje en el tiempo, capturando lo que hizo el usuario antes y después de que se desencadenara un error en un sitio web. Facilita la inspección del DOM real del sitio, visualización de registros de consola, y seguimiento de solicitudes y respuestas de red, ayudando a entender y resolver errores de manera más eficaz.

La principal diferencia de la herramienta Replay de Sentry respecto a otras herramientas similares es su enfoque en los desarrolladores, proporcionando funcionalidades específicas que permiten una depuración más táctica y eficiente de errores, integrándose perfectamente con el flujo de trabajo de Sentry.

Replay ofrece características como la visualización del DOM real del sitio web, acceso a registros completos de la consola, seguimiento de solicitudes y respuestas de red, y la capacidad de buscar repeticiones basadas en interacciones específicas del DOM. Además, vincula errores y transacciones del backend, ofreciendo un panorama completo de la actividad en el sitio.

Para utilizar Replay, es necesario habilitar la integración de reproducción de sesión en Sentry. Esto se realiza agregando la integración específica a la configuración de Sentry en tu sitio web, lo cual se puede hacer siguiendo los pasos proporcionados en la documentación de Sentry.

Replay está diseñada para ayudar a resolver errores que ocurren en el sitio web, proporcionando un contexto amplio sobre las acciones del usuario antes y después del error. Esto incluye errores de JavaScript, fallos de carga de recursos, problemas de interacción del usuario y errores en solicitudes de red, entre otros.

Replay está diseñada para minimizar su impacto en el rendimiento del sitio web. Utiliza compresión de datos y realiza procesamientos en un trabajador web para no interferir con el hilo principal del navegador, asegurando que la experiencia del usuario no se vea afectada negativamente por la monitorización.

Ryan Albrecht

44 min

30 May, 2023

Comments

Available in other languages:

Watch more workshops on topic

Masterclass de Depuración de Rendimiento de React

React Summit 2023

170 min

Masterclass de Depuración de Rendimiento de React

Top Content

Featured Workshop

Ivan Akulov

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

react performance advanced react debugger react performance react profiler best practices debug

Tracing: Frontend Issues With Backend Solutions

React Summit US 2024

112 min

Tracing: Frontend Issues With Backend Solutions

Featured Workshop

2 authors

Los problemas de frontend que afectan a tus usuarios a menudo son provocados por problemas de backend. En esta masterclass, aprenderás cómo identificar problemas que causan páginas web lentas y malos Core Web Vitals usando tracing.
Luego, pruébalo tú mismo configurando Sentry en un proyecto Next.js ya preparado para descubrir problemas de rendimiento, incluyendo consultas lentas a la base de datos en una sesión interactiva de programación en pareja.
Saldrás de la masterclass siendo capaz de:- Encontrar problemas de backend que podrían estar ralentizando tus aplicaciones de frontend- Configurar tracing con Sentry en un proyecto Next.js- Depurar y solucionar problemas de rendimiento deficiente usando tracing
Este será un evento en vivo de 2 horas donde tendrás la oportunidad de codificar junto con nosotros y hacernos preguntas.

next.js debug

Monitoreo 101 para Desarrolladores de React

React Advanced 2023

112 min

Monitoreo 101 para Desarrolladores de React

Top Content

Workshop

2 authors

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.

error monitoring

Depuración del Rendimiento de React

React Advanced 2023

148 min

Depuración del Rendimiento de React

Workshop

Ivan Akulov

Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)

performance optimization debug

Cómo Resolver Problemas del Mundo Real con Remix

Remix Conf Europe 2022

195 min

Cómo Resolver Problemas del Mundo Real con Remix

Workshop

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

remix database validation error monitoring

Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry

Node Congress 2022

53 min

Seguimiento de errores y ralentizaciones en Node + JavaScript utilizando Sentry

Workshop

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.

frontend node.js error monitoring

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

Depuración Web Moderna

JSNation 2023

29 min

Depuración Web Moderna

Top Content

Jecelyn Yeen

Google (Chrome DevTools)

This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.

devtools debug

El Futuro de las Herramientas de Rendimiento

JSNation 2022

21 min

El Futuro de las Herramientas de Rendimiento

Top Content

Addy Osmani

Engineering Leader Working on Google Chrome

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

performance devtools tooling

Depuración de JS

React Summit 2023

24 min

Depuración de JS

Top Content

Mark Erikson

Replay.io

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

web development javascript case study best practices debug

De la Fricción al Flujo: Depuración con Chrome DevTools

JSNation 2024

32 min

De la Fricción al Flujo: Depuración con Chrome DevTools

Jecelyn Yeen

Google (Chrome DevTools)

The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.

debug

Rome, ¡una cadena de herramientas moderna!

JSNation 2023

31 min

Rome, ¡una cadena de herramientas moderna!

Top Content

Emanuele Stoppa

Active contributor to the Biome project

Rome is a toolchain built in Rust that aims to replace multiple tools and provide high-quality diagnostics for code maintenance. It simplifies tool interactions by performing all operations once, generating a shared structure for all tools. Rome offers a customizable format experience with a stable formatter and a linter with over 150 rules. It integrates with VCS and VLSP, supports error-resilient parsing, and has exciting plans for the future, including the ability to create JavaScript plugins. Rome aims to be a top-notch toolchain and welcomes community input to improve its work.

tooling bundler

Depuración con Chrome DevTools

JSNation Live 2021

11 min

Depuración con Chrome DevTools

Top Content

Jecelyn Yeen

Google (Chrome DevTools)

Here are some tips for better utilizing DevTools, including using the run command, customizing keyboard shortcuts, and emulating the focus effect. Learn how to inspect memory, use the network panel for more control over network requests, and take advantage of console utilities. Save frequently used code as snippets and use local overrides for easy editing. Optimize images by using a more optimized format like AVIF and track changes in the network panel to see the reduced data size.

devtools debug