Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar

Rate this content
Bookmark

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.

FAQ

Necesitas acceder a los enlaces proporcionados en la sesión, que incluyen el repositorio de GitHub para el demo de Vue TS, un PDF del taller paso a paso, y un enlace para registrar tu cuenta de Rollbar con un crédito promocional de $250.

Puedes crear un nuevo proyecto Vue TypeScript utilizando el comando 'npm create vue-at-latest' en tu terminal o línea de comandos.

Rollbar es una plataforma de monitorización de errores que se utilizará en la aplicación Vue TypeScript para manejar y registrar errores tanto manejados como no manejados.

Debes registrar una cuenta en Rollbar utilizando el enlace promocional proporcionado, luego seguir los pasos del PDF para instalar y configurar el SDK de Rollbar en tu aplicación Vue.

Si encuentras problemas, puedes solicitar ayuda mediante el chat de la sesión o el canal de Discord donde se está llevando a cabo la masterclass.

Después de integrar Rollbar en tu aplicación, debes usar la función de Vue para enviar errores manejados y no manejados a Rollbar y verificar la recepción de estos en tu dashboard de Rollbar.

Puedes personalizar la carga útil añadiendo datos adicionales como identificadores de usuario o información de sesión en los archivos de configuración de Rollbar dentro de tu proyecto Vue.

Nico Krüger
Nico Krüger
48 min
25 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La Masterclass de hoy se centró en configurar un proyecto Vue TypeScript e integrarlo con Rollbar para la monitorización de errores. Los participantes aprendieron cómo modificar el código para que sea compatible con TypeScript, conectar el plugin de Rollbar y probar componentes, y añadir datos adicionales a la carga útil. La Masterclass también cubrió la personalización de la carga útil, la configuración de Rollbar y el uso de la función de transformación para modificar la carga útil. En general, los participantes obtuvieron conocimientos sobre cómo manejar errores, capturar datos de telemetría e integrar Rollbar con otras herramientas.

1. Introducción a la Masterclass

Short description:

Gracias por unirte a la masterclass de codificación en vivo. He añadido enlaces a un repositorio de GitHub con la demo de Vue TS y un PDF con instrucciones paso a paso. Estaremos configurando Rollbar en una aplicación Vue TypeScript. Utiliza el enlace de registro de Rollbar para obtener un crédito de $250 en tu cuenta. ¡Empecemos!

Muchas gracias y buen día a todos, desde dondequiera que se unan hoy. Así que esto será una masterclass de codificación en vivo. Así que he añadido un par de enlaces para que sigan hoy. Hay un repositorio de GitHub, The Dev Factory, que es mi GitHub. Allí está la demo de Vue TS, que es realmente con lo que vamos a terminar. Así que ese es el producto final. Pero puedes tener eso abierto para seguirlo. El segundo enlace también está en el repositorio. Es el PDF del taller real, paso a paso, que vamos a seguir. Ahora, esto es realmente un paso para principiantes. Se trata más de configurar Rollbar, pero estaremos usando una aplicación Vue TypeScript. Así que realmente a nivel de principiante, solo queremos que la aplicación se ponga en marcha y conseguir también instalado Rollbar. Pero siéntete libre de usar ese PDF para ver los pasos. El último enlace está en rollbar.com forward slash error push slash promo. Cuando lleguemos al paso de registrar tu cuenta de Rollbar, por favor usa ese hipervínculo. La razón de eso es que te da un crédito de $250 en tu cuenta por un año. Así que puedes seguir adelante y usar la cuenta gratuita de Rollbar, o si quieres usar una cuenta de pago, o incluso quieres conseguir esto para tu empresa, eso te da un buen descuento también para empezar con este producto. Así que espero que eso te ayude a empezar con la sesión.

2. Configurando el Proyecto Vue TypeScript

Short description:

Hoy, estaremos creando un proyecto Vue TypeScript, configurando una cuenta de Rollbar, integrando la aplicación con Rollbar, enviando errores manejados y no manejados, y personalizando la carga útil y la instrumentación. Si tienes el PDF abierto, puedes ir al primer paso. Crea un nuevo proyecto Vue utilizando el comando 'npm create vue-at-latest' y sigue las indicaciones. Asegúrate de tener permisos de lectura y escritura para la carpeta del proyecto. Si encuentras algún problema, házmelo saber.

Ahora, ¿qué vamos a hacer hoy? Lo primero es que vamos a realizar un par de pasos. El paso cero es que vamos a crear un proyecto Vue TypeScript. Ese será nuestro primer paso. Luego estaremos creando esa cuenta de Rollbar con ese hipervínculo que les di, el error push slash promo. Luego estaremos integrando esta aplicación, es decir, tu aplicación con Rollbar. Luego estaremos enviando un error manejado y no manejado a Rollbar. Y al final, estaremos viendo algunas formas de personalizar tu carga útil y cómo puedes instrumentar Rollbar de diferentes maneras para tu aplicación para obtener más relevante y más data adicional en el sistema también.

Muy bien. Eso es lo que haremos hoy. Muy bien. Así que si tienes el PDF abierto, puedo ponerlo a un lado. Para la mayoría de ustedes, espero que estén en una máquina Mac o Windows, por lo que podría ser ligeramente diferente. Lo estoy haciendo en una Mac hoy. Si lo estás haciendo en una máquina Windows, también tengo una máquina Windows a mi lado, por lo que podemos seguir adelante y ejecutar eso también. Así que si tienes un PDF abierto, puedes ir al primer paso.

Lo primero que vamos a hacer es crear un nuevo proyecto Vue. Para aquellos de ustedes es npm create vue-at-latest. Así que si inicias este comando en tu ventana de terminal o línea de comandos en Windows, vamos a comenzar el proceso para crear nuestro primer proyecto aquí. Ahora, lo que obtendremos cuando hagamos esto es que tenemos que darle un nombre a nuestro proyecto. Ahora, puedes elegir cualquier nombre que realmente quieras. Voy a seguir adelante y hacer el vue-ts-rollbar-demo. Así que una aplicación de demostración de Rollbar Vue TypeScript. ¿Quieres hacer JavaScript o TypeScript? Hoy vamos a hacer TypeScript, Rollbar funciona perfectamente bien con JavaScript. De hecho, vamos a usar el SDK de Rollbar JavaScript, de hecho, para instrumentar esta aplicación. Pero de nuevo, para este ejemplo, hoy, estaremos usando TypeScript. Vamos a añadir soporte para JSX también. Y sí, queremos una aplicación de una sola página. Solo di sí a todos estos elementos. No vamos a usar todos ellos. Pero de nuevo, si quieres añadir algunas pruebas, también puedes. Solo voy a seguir adelante y hacer todo esto. Y deberías terminar con una pantalla como esta.

Ahora, lo que debería haber sucedido en el fondo aquí, si vamos a mi computadora, es que deberíamos tener una nueva aplicación creada. Si vamos a mi aplicación específica aquí, ves el demo de Rollbar Vue TS. Espero que todos hayan podido seguir adelante y usar esa línea de comandos para seguir adelante y crear eso. Y subiremos de nuevo. Es npm create vue at latest. Estoy usando la última versión de Vue aquí. Y por supuesto, vamos a usar Vite para TypeScript. Así que espero que lo tengas en marcha. Ahora, es muy importante el directorio o las carpetas en las que estamos trabajando, necesitas permiso de lectura y escritura para ellos. Así que asegúrate de tener todos tus permisos en orden. Solo voy a seguir adelante e ir a esta carpeta específica allí. Así que allí, deberíamos tener todo lo que queremos. Perfecto. Muy bien. Así que si tienes un problema, házmelo saber. Pero espero que todos hayan superado esto. Esto es bastante fácil. Lo único que podría ser un problema es si no tienes algunas de las bibliotecas instaladas.

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
Featured 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
Monitoreo 101 para Desarrolladores de React
React Advanced Conference 2023React Advanced Conference 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.
Comienza con AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Comienza con AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.
Contenido:- comenzando e instalando AG Grid- configurando ordenamiento, filtrado, paginación- cargando datos en la cuadrícula- la API de la cuadrícula- agregar tus propios componentes a la cuadrícula para representación y edición- capacidades de la edición de la comunidad gratuita de AG Grid
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
WorkshopFree
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.
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 una API GraphQL sin servidor para cualquier fuente de datos con StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
WorkshopFree
Roy Derks
Roy Derks
¿Quieres empezar a construir un servidor GraphQL pero no tienes idea de por dónde empezar? Cada desarrollador (frontend) pide una API GraphQL pero a menudo carece del conocimiento backend para crear una que sea eficiente. Existen muchas formas diferentes de crear el servidor GraphQL perfecto, desde el enfoque de esquema primero hasta el enfoque de código primero o incluso soluciones generadas automáticamente.

En este masterclass interactivo, aprenderás a construir una API GraphQL sin servidor utilizando StepZen. Con StepZen, puedes crear un GraphQL para cualquier fuente de datos (SQL, NoSQL y REST) e incluso otras APIs GraphQL en cuestión de minutos. Incluso puedes manejar casos de uso más complicados como la autenticación y el despliegue. Con un poco de código, podrás combinar diferentes fuentes de datos en una API totalmente eficiente que podrás utilizar en tus aplicaciones desde el primer día.

Tabla de contenidos:
- ¿Qué es StepZen?
- Conexión a una fuente de datos (SQL, NoSQL y REST)
- Uso de directivas personalizadas
- Manejo de flujos de secuencia
- Despliegue

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

Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
TypeScript hace JavaScript más seguro agregando definiciones de tipo estático. Las definiciones estáticas son maravillosas; evitan que los desarrolladores cometan errores triviales asegurando que cada asignación e invocación se haga correctamente. Una variable tipificada como una cadena no puede ser asignada un número, y una función que espera tres argumentos no puede ser llamada con solo dos. Estas definiciones solo existen en el momento de la compilación; el código que finalmente se ejecuta es solo JavaScript. ¿Pero qué pasa con la respuesta de una solicitud de API? En esta charla, Ethan Arrowood, Ingeniero de Software 2 @ Microsoft, cubrirá varias soluciones para tipificar de manera segura los datos dinámicos en las aplicaciones TypeScript. Esta charla presenta tecnologías populares como Fastify, JSON Schema, Node.js, y más!
Apache Kafka Explicado de Forma Sencilla con Ejemplos de TypeScript
JSNation 2023JSNation 2023
27 min
Apache Kafka Explicado de Forma Sencilla con Ejemplos de TypeScript
Tienes curiosidad sobre qué hace Apache Kafka y cómo funciona, pero entre la terminología y las explicaciones que parecen comenzar en un nivel complejo, ha sido difícil embarcarse. Esta sesión es diferente. Hablaremos sobre qué es Kafka, qué hace y cómo funciona en términos simples con ejemplos fáciles de entender y divertidos que luego puedes compartir en la mesa con tu familia.
Esta sesión es para mentes curiosas, que tal vez nunca hayan trabajado con sistemas de transmisión distribuida antes, o sean principiantes en aplicaciones de transmisión de eventos.
Pero que la simplicidad no te engañe: ¡al final de la sesión estarás preparado para crear tu propio flujo de eventos de Apache Kafka!
Dominando el Manejo de Errores en Node.js
Node Congress 2022Node Congress 2022
21 min
Dominando el Manejo de Errores en Node.js
Los errores ocurren en todos los programadores. Los desarrolladores tienen diferentes opciones: suprimirlo, notificar al usuario, informar al equipo, ignorarlo o escribir código para manejar el error.
En esta charla, aprenderás todos los aspectos importantes del sistema de errores de Node.js, los tipos de errores, diferentes formas de entregar un error y patrones para mejorar el manejo de errores, ¡con ejemplos!
El Arte de la Programación Funcional
React Summit 2022React Summit 2022
26 min
El Arte de la Programación Funcional
La Programación Funcional (FP), un paradigma en el cual los programas están compuestos por funciones puras y sin estado, es adorado por muchos programadores por lo fácil que hace predecir, probar y depurar el comportamiento del código que escribimos. Aunque la FP tiene una reputación desafortunada como un dominio de torres de marfil lleno de jerga oscura comprensible solo para aquellos con doctorados en teoría de categorías, los conceptos fundamentales son ideas sencillas que todos podemos entender, ¡e incluso divertirnos aprendiendo!
En esta charla, crearemos arte SVG generativo como una forma de explorar conceptos fundamentales de FP como la recursión y la composición de funciones, y abordaremos los desafíos prácticos de la FP en el mundo real, como lidiar con las partes complicadas como los efectos secundarios y la aleatoriedad que no encajan en el mundo seguro y estéril de las funciones puras. ¡Al final de la charla, no solo tendremos los conceptos clave y las técnicas que necesitamos para comenzar a escribir nuestros propios programas funcionales, sino que también tendremos arte funcional bastante para admirar!
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
¿Por qué Grafana utiliza React para su frontend?
Cómo aprovechamos las características de React en Grafana
¿Cuáles son algunos puntos problemáticos que hemos encontrado al usar React en Grafana?
¿Cuáles son las lecciones aprendidas de adoptar React durante los últimos 5+ años?
Rastrea ralentizaciones y fallos en tus aplicaciones de React
React Advanced Conference 2021React Advanced Conference 2021
8 min
Rastrea ralentizaciones y fallos en tus aplicaciones de React
En esta charla relámpago, verás:La falta de visibilidad en las aplicaciones de ReactCómo instalar el SDK de Sentry ReactCómo Sentry puede ayudarte a identificar errores y ralentizaciones dentro de tu aplicación de React para que puedas ver más rápido, resolver más rápido y aprender continuamente de tus aplicaciones