JavaScript Error Tracking Essentials

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Descubre técnicas avanzadas para rastrear y resolver errores en aplicaciones JavaScript, utilizando Sentry como un poderoso aliado. Esta sesión explorará el arte de identificar problemas antes de que afecten a los usuarios, optimizando tu proceso de manejo de errores y mejorando el rendimiento de la aplicación.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

El seguimiento de errores en JavaScript con Sentry es un proceso que involucra identificar, registrar y gestionar errores en tiempo real en aplicaciones web. Utiliza un SDK que permite la integración fácil y proporciona notificaciones instantáneas, diagnósticos y soluciones para los errores detectados.

Para configurar Sentry en un proyecto JavaScript, primero se instala el SDK de Sentry usando npm install. Luego se obtiene un DSN (nombre de origen de datos) que se utiliza para inicializar Sentry en el código del proyecto, permitiendo así comenzar el seguimiento de errores.

El seguimiento de errores con Sentry reduce el tiempo de inactividad de las aplicaciones, mejora la experiencia del usuario al solucionar rápidamente problemas, y ayuda a priorizar los esfuerzos de desarrollo al proporcionar información detallada sobre el rendimiento de la aplicación.

No, Sentry ofrece una prueba de 14 días con todas las funciones y después de eso, los usuarios pueden continuar usando una cuenta gratuita con funciones limitadas. Además, Sentry es de código abierto, lo que permite a los usuarios implementar muchas de sus funcionalidades sin coste adicional.

Sentry mejora la experiencia del usuario al permitir a los desarrolladores monitorear y solucionar errores en tiempo real, lo que reduce las interrupciones y asegura que la aplicación funcione de manera óptima, evitando que los usuarios busquen alternativas debido a problemas técnicos.

Sentry proporciona información detallada cuando se detecta un error, incluyendo el tipo de error, la información del navegador y del dispositivo del usuario, la dirección IP, y contexto sobre las acciones del usuario antes del error, facilitando así un diagnóstico y solución precisos.

Ebenezer Don
Ebenezer Don
23 min
15 Feb, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Vamos a hablar sobre el seguimiento de errores de JavaScript de próximo nivel con Sentry. El seguimiento de errores es el proceso de identificar, registrar y gestionar errores en una aplicación web. Los métodos tradicionales de seguimiento de errores de JavaScript tienen desventajas y carecen de contexto sobre el dispositivo y el usuario. Puedes automatizar el seguimiento de errores con Sentry, una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Configurar Sentry es simple utilizando el SDK de Sentry y configurándolo con el DSN.

1. Introducción al seguimiento de errores

Short description:

Vamos a hablar sobre el seguimiento de errores de JavaScript de próximo nivel con Sentry. El seguimiento de errores es el proceso de identificar, registrar y gestionar errores en una aplicación web. Implica descubrir, diagnosticar y solucionar errores.

Hola a todos, es un placer unirme a ustedes hoy aquí. Vamos a hablar sobre el seguimiento de errores de JavaScript de próximo nivel con Sentry. Mi nombre es Ebenezer Dunn y soy un defensor del desarrollo en CodeGiant, una plataforma de desarrollo integrada de DevSecOps y mejores prácticas incorporadas que ayuda a tu equipo a entregar más rápido y de manera más segura.

Estamos hablando de nuestro seguimiento, pero ¿qué es exactamente el seguimiento de errores? Y por cierto, esta es la tercera vez que grabo esta charla para esta conferencia en particular, porque intenté la primera vez después de grabar. Y pensé, sí, ya terminé. Y descubrí que mi cámara se congeló mientras grababa. Así que la segunda vez, la computadora portátil y todo se apagaron mientras grababa. Y esta es la tercera vez y espero que todo salga bien esta vez. Y voy a intentar sonreír. Así que un poco frustrado.

¿Qué es el seguimiento de errores? Ahora, es un proceso de identificar, registrar y gestionar errores que ocurren en una aplicación web. En nuestro caso, una aplicación web porque estamos usando JavaScript para la web en esta instancia en particular. Pero el seguimiento de errores básicamente identifica, registra y gestiona errores que ocurren en tu aplicación. Así que este es un proceso de seguimiento de errores. En primer lugar, tiene que haber descubrimiento. Así que tienes que descubrir el error y luego diagnosticarlo. Así que no solo descubres el error, como `oh, descubrimos que hubo un error` y todos se sientan. No, tienes que diagnosticar el error. Y cuando diagnosticas el error, sabes, descubrir qué está causando realmente el error. ¿Por qué? ¿Por qué hay este error? ¿Qué es este error? ¿Dónde está este error? Diagnosticar el error y no aplaudir y decir, `OK, ahora descubrimos el error`. Sabemos todo sobre este error y vamos a casa. No, tienes que solucionar los errores. Así que encuentras los errores. Solucionas los errores. Esas son partes importantes del proceso de seguimiento de errores. No solo descubres eso sin sentido. Te sientas y ya está. Así que tienes que solucionar los errores.

Ahora, componentes del seguimiento de errores. Esto es como una versión más detallada de lo que ya hemos hablado.

2. Flujo de trabajo de seguimiento de errores

Short description:

La detección, registro, notificación, análisis y resolución de errores son componentes esenciales del proceso de seguimiento de errores. Al rastrear los errores, puedes reducir el tiempo de inactividad y mejorar la experiencia del usuario.

Entonces, el proceso de detección de errores, al igual que la detección de errores, luego debes registrar el error. Esto es importante. No solo descubres el error o detectas el error y dices, oh, sí, descubrimos ese error. No, es importante que registres este error. Es importante que almacenes este error en una database o, por ejemplo, en CodeGiant, usamos Clickhouse para el registro. No estoy seguro de qué usa Sentry, pero en la plataforma de Sentry también se registra. Así que no solo descubres el error y luego lo desechas.

Entonces, debes registrar el error y, ya sabes, necesitas un sistema de notificación para que no te quedes en la oscuridad. No te detienes solo en detectar ese error. Lo siento por eso. No te detienes solo en detectar y registrar el error. Así que debes ser notificado sobre este error, oh, hay un error. Sí. Necesitas ser notificado de que hubo un error. Entonces, dijimos que lo haríamos con Sentry, ya sabes, que viene con un sistema de notificación. Una vez que un usuario encuentra un error o una vez que encuentras un error, una vez que hay un error en tu aplicación, recibes una notificación y eso viene con toda la información del error. Y luego, después de recibir la notificación, revisas el error y luego analizas el error. Sabes, descubres qué está causando el error, dónde, ya sabes, y cómo y por qué. Ya sabes, todos los detalles sobre el error vendrán con una configuración de Sentry donde hacemos eso ahora. Cuando hay un error, viene con información del navegador, información del dispositivo del usuario, dirección IP, todo lo que necesitas para resolver. Para analizar el error. Y luego, nuevamente, no aplaudes y te vas a casa. Debes resolver el error.

Entonces, en resumen, encuentras un problema, solucionas un problema. Es importante tener la resolución de errores como parte de tu proceso de seguimiento de errores. Entonces, ¿cuáles son los beneficios del seguimiento de errores? Reduce el tiempo de inactividad. Si no estás rastreando los errores, sabes cuando algo está mal, sabes que tus usuarios están luchando, sabes que tu aplicación web está luchando o tu aplicación de JavaScript, sabrás que estás luchando. Y si no lo sabes, seguirá sucediendo y seguirás teniendo tiempo de inactividad. Entonces, si estás rastreando los errores, puedes obtener información sobre este error, conocerlo, resolver el error y reducir el tiempo de inactividad. Mejora la experiencia del usuario.

3. Importancia del seguimiento de errores

Short description:

Si los usuarios encuentran errores en tu aplicación y no los estás rastreando, puedes perder usuarios y obstaculizar la experiencia del usuario. El seguimiento de errores proporciona información sobre el rendimiento de la aplicación y ayuda a priorizar los esfuerzos de desarrollo.

Además, si los usuarios tienen problemas y tú no lo sabes, la mayoría de las veces ni siquiera se molestarán en decírtelo. Lo primero que hará el usuario es buscar alternativas a menos que su vida dependa de tu aplicación. Si voy a una aplicación y tengo problemas con un error, simplemente busco una alternativa que haga lo mismo. Solo si puedo encontrar una alternativa y la tuya es mi única esperanza o tal vez ya te he pagado y necesito que me brindes el servicio por el que pagué, entonces el usuario se pondría en contacto contigo y te diría: `Oye, me encuentro con este error`. Así que ves que si no estás rastreando errores, perderás muchos usuarios porque muchas personas ni siquiera se molestarán en decirte que busques algo más. Y, ya sabes, estamos rastreando áreas donde necesitamos que tus usuarios estén contentos, tú estés contento, todos estén contentos y asistir a la experiencia del usuario proporciona información sobre el rendimiento de la aplicación. Sí. Entonces, si no estás rastreando los errores, no sabrás cómo está funcionando tu aplicación. También cubriré. Con suerte, deberíamos poder con el tiempo que tenemos la aplicación, cómo puedes rastrear transacciones, el rendimiento de la aplicación y todo eso. Pero si no estás rastreando errores en tu aplicación, no sabrás cómo está funcionando tu aplicación y también ayuda a priorizar los esfuerzos de desarrollo. Lo siento, estoy apurando esto porque estoy mirando la hora y ayuda a priorizar los esfuerzos de desarrollo para que tu equipo sepa en qué trabajar y qué dejar para después.

4. Seguimiento tradicional de errores en JavaScript

Short description:

Los métodos tradicionales de seguimiento de errores en JavaScript incluyen declaraciones console.log y alertas, pero tienen desventajas y carecen de contexto sobre el dispositivo y el usuario.

A continuación. Sí. Existe un método tradicional de seguimiento de errores en JavaScript. Incluso si no has trabajado antes con Sentry o una plataforma similar, muchos de nosotros o todos deberíamos haber hecho seguimiento de errores en JavaScript. Está la declaración console.log. Ya sabes, esa es una forma de rastrear los errores. Tiene sus desventajas, lo que significa que solo tú sabes que hiciste una declaración console.log y solo tú lo verás. Y solo afecta a tu propia experiencia al usar la aplicación. Pero esto a veces se utiliza en desarrollo en lugar de producción. Quiero decir, eso es lo que se recomendaría de todos modos, si vas a usar console.log, pero tiene muchas desventajas. Y luego están las alertas, que no son tan geniales. Ya sabes, simplemente muestran una ventana emergente de error con la función alert. No es realmente genial y, ya sabes, tienes todas esas cosas que interrumpen todo lo que el usuario está haciendo. Pero, ya sabes, esa es una forma de hacer seguimiento de errores de manera tradicional.

Mostrar el mensaje completo de error en pantalla. Esto no es nada genial y he usado algunas aplicaciones o aplicaciones web donde simplemente se muestra un mensaje de error completo en la pantalla. Como si fuera solo un galimatías que el usuario no entiende. Y luego hay un mensaje que dice: toma este mensaje de error y envíalo al desarrollador de la aplicación. Entonces, si estás haciendo un seguimiento de errores adecuado, ni siquiera necesitarías hacer eso. Estarías enviando a tus usuarios un error. Y cuando ocurre un error, lo verás y verás lo que el usuario estaba haciendo. Entonces, ya sabes, antes de que lleguen a ese error, verás detalles sobre el dispositivo. No tendrás que preguntarle al usuario qué dispositivo está utilizando y qué navegador está utilizando. ¿Has realizado una actualización? Verás todo eso. Así que tienes toda la información. Ya sabes, no necesitas enviar al usuario un galimatías.

Y sí. Limitaciones del seguimiento tradicional de errores. Careces de contexto. No sabes nada sobre el dispositivo. No sabes nada sobre el usuario.

5. Automatización del seguimiento de errores con Sentry

Short description:

Puedes automatizar el seguimiento de errores con una implementación adecuada. El seguimiento tradicional carece de eficiencia en la agregación de datos. Configurar Sentry en un proyecto JavaScript es sencillo utilizando el SDK de Sentry y configurándolo con el DSN. Sentry es una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Veámoslo en acción con una demostración.

No sabes nada sobre sus acciones antes del error. Sabes, es manual. Es reactivo. Así que todo tiene que ser manual. Y siempre react. Y, ya sabes, si haces una implementación adecuada con Sandro, por ejemplo, puedes automatizar las cosas. Y luego no tienes que esperar a que las cosas se pongan realmente mal para actuar sobre ello. Y luego, en el seguimiento tradicional, hay ineficiencia en la agregación de data. Así que realmente no estás registrando. No lo estás haciendo bien. Ya sabes, almacenando esa información para que puedas ver todo y puedas incluso rastrear el performance de tu aplicación o saber qué está sucediendo en tu aplicación. Sí. Y ahora aquí estamos. Seguimiento de errores con Sentry. Entonces, ¿qué es Sentry? Sentry es una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Sí. Entonces, ¿cómo lo llamo? ¿Qué es eso, por cierto? Porque trato de apresurarme antes de que algo más salga mal con esta grabación. Pero esto es Sentry, es una herramienta de seguimiento de errores de código abierto que ayuda a los desarrolladores a monitorear y solucionar bloqueos en tiempo real. Vamos a ver eso en acción. Voy a mostrártelo a través de una aplicación. Ahora, para configurar Sentry en un proyecto JavaScript, utilizas Sentry como un SDK. Eso lo hace realmente fácil y lo configuras con el DSN. Es realmente sencillo. Te lo voy a mostrar ahora mismo, como lo vamos a hacer juntos. Así que ahí tienes el SDK de Sentry, solo tienes que ejecutar npm install, escribir npm install y lo agregas a tu aplicación. Luego obtienes tu DSN, nombre de origen de datos, y eso es todo. Comienzas a rastrear tus errores. Así de simple. OK, quedémonos aquí y luego vayamos al navegador. Esto es Sentry.io.

6. Configuración de Sentry para el seguimiento de errores

Short description:

Esta nueva cuenta viene con una prueba de 14 días. Después de la prueba, aún tendrás acceso a Sentry pero con funciones limitadas. Todo lo que haremos hoy es con la cuenta gratuita de Sentry. Sentry es de código abierto y se puede utilizar con plataformas como CodeGiant. Crea un proyecto, elige el tipo de proyecto (por ejemplo, React con JavaScript), establece la frecuencia de alerta, nombra y asigna tu proyecto. Instala y configura el SDK de Sentry en tu aplicación de React.

En la primera grabación que hice, expliqué el proceso de creación de la cuenta, pero ya no puedo hacerlo porque ya ha sido creada y la pantalla de incorporación. Pero cuando vayas a Sentry.io, todo lo que necesitas hacer es crear una cuenta. Y es muy sencillo. Llegarás a una página como esta. Cualquier página que obtengas, verás algo como esto: crea un proyecto o configura un proyecto. Así que haz clic en crear un proyecto aquí en Sentry. Y oh, se me olvidó mencionar. Esta nueva cuenta viene con una prueba de 14 días. Y después de la prueba, aún tendrás acceso a Sentry pero solo con funciones limitadas. Pero todo lo que haremos hoy está en las cuentas gratuitas, la cuenta gratuita de Sentry. Y también te mostraré lo bueno de Sentry, que es de código abierto. Así que ni siquiera necesitas usar la plataforma Sentry.io. Si quieres, puedes usar una plataforma como CodeGiant, que te mostraré. Y todo lo que realmente necesitas es ese DSN, que te mostraré cómo obtener. Así que esa es realmente una gran ventaja de Sentry, que es de código abierto. Pero esta plataforma de Sentry también es genial.

Así que haz clic en crear un proyecto y elige qué tipo de proyecto quieres crear. Busquemos React aquí y luego haz clic en React con JavaScript. Establece la frecuencia de alerta, avísame en cada nuevo problema o cuando haya más de 10 ocurrencias, o puedes crear una alerta más tarde. Así que como prefieras hacerlo. Esa es la parte de notificación del seguimiento de errores. Luego, nombra tu proyecto y asígnalo. Así que JavaScript reacciona aquí. Lo mismo con CodeGiant. Así que acabo de crear la cuenta y luego me pide una empresa y tengo CodeGiant ahí. Así que creemos el proyecto. Y luego, lo siguiente que tienes es que es muy sencillo a partir de aquí.

Ejecutas npm install, dash dash save our Sentry slash React. Y configuremos el SDK aquí mismo. Así que te mostraré mi base de código. Esta es mi aplicación de React. Esta aplicación ahora mismo es solo una aplicación simple de lista de mercado. Y este es el código base. Entonces, lo que ves aquí es lo que tengo en el archivo index.js de mi aplicación de React. Lo que realmente necesitamos es instalar Sentry npm install. Y luego tenemos nuestro Sentry slash React. Y lo importamos en la línea tres aquí mismo.

7. Configuración de Sentry y Captura de Errores

Short description:

Importa las importaciones necesarias de nuestro Sentry/React, inicializa Sentry.init con el DSN y configura la configuración. Envuelve los componentes de la aplicación en Sentry.errorBoundary para capturar errores por defecto. Mira ejemplos de diferentes tipos de errores en el componente de prueba de errores y en el repositorio de la aplicación de lista de mercado en mi GitHub. El límite de error de Sentry captura automáticamente los errores lanzados en el árbol de componentes de React.

Importa las importaciones necesarias de nuestro Sentry/React y en la línea siete. Esto es lo que realmente necesitamos. Sentry.init inicializa y luego en la línea ocho aquí está el DSN. Esto es lo que es importante ahora mismo. Este DSN y este es un DSN para mi configuración con CodeGiant. Pero lo que voy a hacer es venir aquí y tomar este DSN de este nuevo proyecto que creé en Sentry. Y voy a reemplazarlo aquí en la línea ocho. Así que tenemos la configuración. Esto es lo que es importante aquí. El DSN y luego tenemos la configuración de la línea 10 a la línea 22 aquí.

Una vez que tengamos eso, lo siguiente que tenemos aquí es esto. Así que lo que voy a hacer, lo que hicimos a continuación en la línea 34 de Sentry, tenemos Sentry.errorBoundary. Y luego envolvemos nuestros componentes de la aplicación en Sentry.errorBoundary. Esto va a ayudar a capturar errores por defecto. Así que déjame mostrarte un ejemplo ahora mismo. Si vas al componente de prueba de errores que creé y estos son diferentes tipos de errores. Voy a dejar un enlace a este repositorio o puedes ir a mi GitHub. Voy a mostrarte mi enlace de GitHub al final de esta charla. Y solo busca la aplicación de lista de mercado.

Verás este repositorio con la base de código. Estos son diferentes tipos de errores que creé. No creo que podamos cubrir todo debido al tiempo. Solo nos queda muy poco tiempo. Pero este es un error, por ejemplo, en el error cien. Esto es capturado por Sentry.errorBoundary en index.js. Este límite captura automáticamente los errores lanzados en el árbol de componentes de React. Así que dejé comentarios en este código para que puedas revisarlo y simplemente leerlo y entenderlo. Así que este límite captura automáticamente los errores cien en el árbol de componentes de React. Disculpa por eso. Así que probemos esto. Por ejemplo, ya he importado todos estos diferentes componentes de error en el archivo app.js.

8. Generación de Errores y Visualización en Sentry

Short description:

Descomenta los componentes de error sinc en el archivo app GS y prueba a generar cien errores. Visualiza el mensaje de error resultante en la aplicación React y verifica los problemas en Sentry. Asegúrate de que el DSN en el archivo index GS esté configurado correctamente.

Aquí mismo, el archivo app GS. Todo lo que necesito hacer es descomentar los componentes de error sinc. En realidad, creo que nuestra empresa hace uno de los errores que probé. Y luego vamos a probar esto con cien errores. Lo que vamos a hacer es esto. Es importante aquí en la línea cuatro. Y luego lo tengo en la línea. Setenta y cuatro. Guardemos esto. ¿Y dónde está nuestro navegador? Volvamos a nuestro navegador. Esta es la aplicación React y se recarga. Mira eso. Tenemos este error aquí. Error de prueba de error de los componentes de prueba de error. A continuación, volvemos a sentry y hagamos clic en llevarme a los problemas. O simplemente puedes hacer clic en problemas aquí. Y dice que no pudimos encontrar errores que coincidan con algunos. Me pregunto por qué. Recarguemos y veamos. Obtendremos lo mismo. Sí. Así que tenemos eso. A veces solo necesitas recargar. Creo que algunas cosas no están instanciadas en esta plataforma de sentry. Pero mira eso. Este es el mensaje de error. Así que recuerda, todo lo que necesitamos para enviar esto a nuestra cuenta de sentry es este DSN en el archivo index GS. Así que este DSN, lo vimos. Esto determina dónde se enviará la información de error. Este es el que vino con nuestro proyecto de sentry.

9. Revisión de Mensajes de Error y Contexto del Usuario

Short description:

Tenemos el proyecto Sentry y revisamos el mensaje de error. Configura la información de error o el informe de error. El ID del evento y la etiqueta proporcionan detalles como la dirección IP, la versión de Chrome y macOS. Revisa el error con más información y el tipo de transacción del navegador. También hay ejemplos de errores con contexto de usuario en el código base.

Tenemos el proyecto Sentry y revisamos el mensaje de error. Así que haces clic en el mensaje de error justo aquí. Haz clic en la flecha aquí y luego en el error de prueba de error cien del componente de error. Y esto viene con toda la información para el usuario. Entonces también puedes configurar esto cuando estés configurando la forma en tu código más bien puedes configurar lo que quieres obtener del error de la información de error o el informe de error.

Así que aquí tenemos el ID del evento y luego la etiqueta. Esto me dice la dirección IP. Realmente no puedes usar mi dirección IP para hacer nada porque cambia cada diez minutos aproximadamente. Esta es la versión de Chrome y esto es lo que estoy usando macOS. Así que esto muestra que estoy usando el navegador Chrome. Estoy usando macOS X. Y este es el error con más información y el tipo de transacción del navegador. Porque si estás en tu localhost tres mil muestra producción ambiental, nombre del navegador y todo eso. Así que creo que hay uno condescendiente. Vamos a revisar ese rápidamente. Así que ves que podemos tener un error con contexto de usuario. También volvamos al código base. Así es básicamente eso, mira la información de error justo aquí con esto, sabes exactamente qué hacer y cómo resolver el error. Pero volvamos al código base. Se nos acabó el tiempo. En realidad, creo que nos quedan unos cuatro minutos y error de prueba. Así que tengo un ejemplo de error con contexto de usuario para que si hay un usuario y quieres saber el contexto del usuario en particular que encuentra el error, puedes hacerlo. Así que como 96 aquí, tengo sentry que establece el usuario y luego, ya sabes, el ID del usuario, correo electrónico del usuario, hay un comando y el nombre de usuario. Una vez que tienes esto aquí, tu error, el error que se muestra en todas partes, eso sabes, que sentry envía o la aplicación envía al DSN. Sentry viene con este contexto de usuario justo aquí. Así que como 99 aquí se muestra este error. Y todo lo que necesitamos hacer es, así que volvamos al archivo app.js. Y este es el componente de contexto de usuario. Y eliminemos el error no controlado justo aquí. Así que guardemos esto.

10. Recarga y Prueba de Contexto del Usuario

Short description:

Vuelve a nuestro navegador y recarga para probar el contexto del usuario. Verifica Sentry para obtener nueva información sobre errores. Si el error no aparece, intenta recargar nuevamente. También puedes explorar diferentes tipos de errores y aprender cómo usar Sentry con otras plataformas como CodeGiant.io.

Vuelve a nuestro navegador y recarga para probar el contexto del usuario, verifica Sentry para obtener detalles. Entonces, si volvemos a Sentry y hacemos clic en problemas, deberíamos ver la nueva información sobre errores. Deberíamos verlo, en realidad. Así que creo que necesitaremos recargar nuevamente. Es básicamente un botón de recarga. No. Así que necesitamos recargar eso, pero eso debería estar aquí ya. Así que no te preocupes. Todo está bien. Y aún no está aquí. ¿Por qué es eso? ¿Por qué es eso? No lo sé. Pero se nos acabó el tiempo. Aún no está aquí. Ese es un error de los componentes de error, y no sé por qué. Pero voy a intentar, simplemente funciona. Así que sí sé exactamente por qué. Pero se nos acabó el tiempo. Y quiero mostrarte cómo hacer esto con código. Estos son los diferentes tipos de errores. Voy a dejar esto en el repositorio. Tal vez cuando regresemos, lo veremos. Pero esto aquí es si vamos a CodeGiant.io y te registras. Así que ve a CodeGiant.io, inicia sesión. Y esta es una forma en que puedes usar Sentry con otras plataformas. Por ejemplo, haz clic en crear un nuevo elemento para el espacio de trabajo y ve a error y rastreo de APM justo aquí. Y vamos a tener Sentry. No, solo vamos a tener seguimiento de errores también.

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.

Workshops on related topic

Monitoreo 101 para Desarrolladores de React
React Advanced 2023React Advanced 2023
112 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
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.
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
WorkshopFree
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
WorkshopFree
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.