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.

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.

Available in English

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.

3. Ejecutando Tu Proyecto Vue

Short description:

Vamos al siguiente paso. Ejecuta npm install en el directorio de tus nuevos proyectos. Luego ejecuta npm run-format y npm run-dev. Tu aplicación debería estar funcionando. Asegúrate de tener permiso de lectura y escritura y verifica el número de puerto. Estamos completando el paso 0.8. Abre tu editor y la carpeta del proyecto. Tómate un breve descanso si es necesario.

Así que daré a todos un segundo. Y echemos un vistazo al canal de Discord. Si alguien tiene un problema en este momento, hágamelo saber. Veamos. Todo bien hasta ahora. Veo algunas cámaras encendidas, otras no. Espero que todos estén perfectamente bien. Hermoso.

Muy bien. Entonces pasaremos al siguiente paso. Así que adelante y ejecuta npm install una vez que estés en el directorio de tus nuevos proyectos. Así que npm install. Vamos a asegurarnos de que todo esté instalado. Lo que necesita ser instalado. Ahora, esto debería ir bastante rápido, así que no debería llevar mucho tiempo. Hermoso. Todo funcionando. Y de nuevo, dependiendo de tu ordenador y tu conexión, esto no debería llevar mucho tiempo para ejecutar. Bien, hermoso.

Así que hemos ejecutado eso. Deberías terminar con algo que se vea un poco así. Así que toma unos 30 segundos más o menos. Así que eso es lo primero que necesitamos ejecutar. Ahora, una vez que hayas hecho esto, vamos a ejecutar npm run-format. Y de nuevo, estamos siguiendo los pasos proporcionados por este específico proyecto Vue. Y finalmente, si eso funcionó para ti, adelante y ejecuta npm run-dev. Y lo que debería... Oops, y si puedo hacerlo bien, npm run-dev. Nuestra aplicación debería estar iniciando. Y si abrimos un navegador aquí, deberíamos tener nuestra nueva aplicación funcionando. Así que deberías terminar con una aplicación que se vea un poco así. Así que solo voy a tenerla abierta al lado aquí. Así que espero que todos tengan su aplicación funcionando. Todo está funcionando. Y si tienes un problema, avísame. De nuevo, si tienes algún problema, asegúrate de tener permiso de lectura y escritura al directorio donde se creó esto. Eso será importante. Y si lo ejecutas, debería abrirse en un puerto potencialmente diferente. El mío es 5173 en mi ordenador. Será diferente para Windows, y podría ser diferente para tu ordenador, dependiendo de lo que estés haciendo. Así que para aquellos de ustedes que siguen el PDF en el repositorio, realmente estamos completando el paso 0, de hecho, estamos en el 0.8 ahora mismo. Verás una pequeña marca de verificación verde al lado, que es donde deberías estar. Así que lo que queremos hacer ahora es, voy a abrir mi editor. En este caso, voy a abrir Visual Studio Code. Así que vamos a abrir esa carpeta. La mía está ubicada bajo proyectos, Vue TS Robot Demo, y podemos abrir eso directamente. Ahora, si quieres salir de tu proyecto, solo presiona ''Q'' allí y puedes detener el servidor web. Como puedes presionar la ''Q'' en tu teclado. Ahora, lo que es muy importante antes de seguir aquí, es el conjunto de cosas que haremos a continuación. Así que quiero dar a todos un momento rápido si necesitas un descanso para tomar café o necesitas hacer algo más.

4. Configuración de la Cuenta de Rollbar e Integraciones

Short description:

Si necesitas ponerte al día, asegúrate de tener tu proyecto Vue TypeScript creado y una cuenta de Rollbar configurada. Sigue la URL proporcionada para registrarte en una nueva cuenta de Rollbar o utiliza la existente. Una vez que hayas completado estos pasos, tu proyecto estará listo para ser configurado. Rollbar es una plataforma de monitoreo de errores que se puede integrar con otras herramientas como JIRA, GitHub, GitLab, Slack y Microsoft Teams. Selecciona las integraciones apropiadas según tus necesidades. Rollbar admite varios SDK para aplicaciones de backend, frontend y móviles.

Si necesitas ponerte al día, puedes hacerlo. Lo que haré es presentar el próximo conjunto de pasos que haremos en breve. Asegúrate de tener una taza de café fresco mientras abrimos esto y luego pasaremos al siguiente aquí.

Todos deberían tener su proyecto Vue TypeScript creado, ese es el paso 0. Espero que tengas una taza de café fresco y estemos listos para comenzar. El siguiente paso, lo que queremos hacer es esa URL que teníamos abierta. Para aquellos de ustedes, vayan a rollbar.com forward slash error push dash promo. Asegúrate de abrir esa URL y deberías llegar a la pantalla y en la parte superior donde tiene la línea azul, debería decir que obtienes un crédito de US$250 allí. Adelante, asegúrate de ver eso. Ahora, si ya tienes una cuenta de Rollbar, está bien. Puedes usar tu cuenta de Rollbar existente. Si quieres crear una nueva, recomendamos crear una nueva. Entonces, para esto, lo que recomiendo es que te registres para una cuenta completamente nueva. De hecho, voy a hacer lo mismo aquí. Adelante y regístrate para una cuenta completamente nueva aquí. Entonces, asegúrate de tener un nombre de usuario y una contraseña que sigan los standards. Y si presionas el botón de finalizar, eso creará una nueva cuenta de Rollbar para ti y tu pantalla debería terminar luciendo así. Entonces, si estás siguiendo el PDF, es el paso 1.1 donde deberías terminar. Entonces, si alguien tiene un problema, si te encuentras con un problema específico, avísame. Publícalo en el chat o siéntete libre de publicarlo en el canal de Discord también. Vale.

Pero, ¿qué hemos hecho hasta ahora? Entonces, tenemos un proyecto de vista vacío en TypeScript, hemos creado una nueva cuenta de Rollbar, y nuestro primer proyecto está listo y esperando ser configurado. Entonces, estamos en un muy buen lugar ahora. Entonces, las cosas están yendo exactamente donde queremos que vayan. Entonces, voy a mover ese navegador de ahí por un momento. Vale. Asegurémonos de saber a dónde queremos ir. Bien. Entonces, sigamos el próximo conjunto de pasos aquí. Entonces, para todos, espero que estén en su cuenta de Rollbar, debería llevarme un par de segundos para hacer eso.

Entonces, primero, ¿qué es Rollbar? Es una plataforma de error monitoring. Entonces, vamos a usar Rollbar, una aplicación Intel instrumentada usando uno de los SDKs y nos dará excepciones manejadas y no manejadas. Eso es fundamentalmente lo que estaremos haciendo hoy como básico. Entonces, adelante y presiona el botón siguiente. Entonces, si estás trabajando en un equipo, si estás trabajando como un solo desarrollador, si estás trabajando con clientes, a menudo encontrarás que cuando haces código o entregas algo, tienes que usar otras herramientas. Esas podrían ser cosas como JIRA para tu seguimiento de errores o seguimiento de problemas. Entonces, si tienes eso, adelante y selecciona la integración de JIRA. Si usas algo como GitHub, si usas GitLab, adelante y selecciona esos en la lista. Si usas Slack como canal de comunicación, si usas algo más, puedes seguir y seleccionar eso. La idea aquí es que podemos encajar Rollbar en todas las otras aplicaciones que usas. Entonces, por ejemplo, podemos integrarnos con JIRA. Entonces, si aparece un error completamente nuevo, crearemos un ticket de JIRA y si lo arreglas, automáticamente se arreglará en cualquier sistema. Si comienzas a implementar aplicaciones, no solo puedes tenerlo en GitHub como una implementación, sino que también puedes decirle a Rollbar que hubo una nueva implementación. Entonces, cuando sucede un nuevo error, diremos, hey, probablemente esté relacionado con esta implementación específica que has hecho. Y luego, si usas algo como Slack o Microsoft Teams, podemos enviar mensajes en tu canal de Slack. Decir, hey, encontramos un error completamente nuevo y aquí está el rastreo de pila y puedes comenzar a trabajar en esos. Nuevamente, no tienes que seleccionar esto para la masterclass de hoy, pero queremos explicar y asegurarnos de que sepas sobre estos. Entonces, lo siguiente son nuestros SDK. Ahora, Rollbar funciona en varios tipos de aplicaciones, tanto backend, frontend, y aplicaciones móviles. Entonces, si solo estabas usando, por ejemplo, una aplicación Node, podrías elegir Node, Ruby, React, PHP, .NET, Java, lo que sea, puedes seguir y seleccionar eso.

5. Configuración de Rollbar en el Proyecto Vue

Short description:

Hoy, seleccionaremos el SDK de view.js y nos aseguraremos de que todos tengan su proyecto Vue y cuenta de Rollbar creados. Luego, instalaremos Rollbar en el proyecto Vue usando npm. Después de eso, crearemos y modificaremos varios archivos para conectar Rollbar con la aplicación. Mantén tu cuenta de Rollbar abierta durante todo el proceso. Comenzaremos agregando los archivos Rollbar.config.js y Rollbar.js en el directorio de origen. Ten en cuenta que usaremos JavaScript para estos archivos de configuración, pero TypeScript también es una opción.

Para nosotros hoy, vamos a seleccionar view. Entonces, encontrarás el view.js en algún lugar al final. Adelante y selecciona ese. Pero si tienes otros proyectos, tal vez backend, como proyectos de Python o Go o algo así, puedes seleccionar el SDK apropiado y seguir esos pasos.

Vale. Así que asegúrate de seleccionar view.js allí, que es el que usaremos hoy. Vale. Ahora, lo siguiente es, antes de seguir y hacer cualquier otra cosa, solo espera en la pantalla. Asegurémonos de que todos tienen su proyecto Vue creado, asegurémonos de que todos tienen su cuenta de Rollbar creada, y deberías estar en esta pantalla, que es donde vamos a seguir y realmente comenzar a conectar Rollbar con tu aplicación. Vale. Entonces, puedes tener eso abierto en una pantalla diferente, que es exactamente lo que estaré haciendo aquí, y voy a mover esto a un lado.

Vale. Queremos asegurarnos de que estamos en nuestro camino de aplicación específico nuevamente, que es view.js.rollbar.demo para mi instancia. Y ahora, lo que haremos es que seguiremos los pasos en la pantalla de aquí. Entonces, lo primero que queremos hacer es ir a npm install dash dash save Rollbar. Y lo que estamos haciendo es agregar Rollbar a este proyecto Vue. Y debería ser bastante rápido también. Y deberías comenzar a recibir este tipo de mensaje aquí que te dice que todo estuvo bien. Todo se instaló y no tienes problemas. Así que asegúrate de ejecutar eso, que es realmente el primer paso para empezar. Vale. Entonces, ese debería ser el paso 2.1.

Ahora, antes de seguir, quiero asegurarme de que tenemos esta página abierta aquí. Entonces, vamos a crear una serie de archivos en esta aplicación específica. Entonces, nuevamente, necesitas permiso de lectura y escritura para tu carpeta, porque estaremos creando archivos nuevos. Modificaremos algunos archivos existentes para asegurarnos de que todo esto funcione. Entonces, aquí está la lista de lo que agregaremos. Entonces, el archivo Rollbar.config.js se agrega en el directorio o ubicación de origen o SRC. También agregaremos el archivo Rollbar.js. Registraremos nuestro plugin, por lo que modificaremos el archivo de la aplicación principal. Y luego también crearemos en el directorio o carpeta de componentes el archivo RollbarTest.view. Y nuevamente, lo registraremos en el archivo de la aplicación principal. Y luego agregaremos un botón, por lo que modificaremos un archivo existente para agregar un pequeño botón que creará un error para nosotros también. Vale. Entonces, ten eso en cuenta mientras hacemos todo. Necesitarás mantener tu cuenta de Rollbar abierta. Así que asegúrate de hacer eso. Vale. Entonces, vamos a volver a nuestra aplicación. Bien. Entonces, lo primero que necesitamos hacer es que voy a entrar en el directorio de origen y hay un par de archivos que necesitamos agregar. Entonces, lo que normalmente me gusta hacer es que me gusta hacer todo esto de una vez, así que los tengo listos para ser modificados. Rollbar.config.js es nuestro primer archivo que necesitamos agregar. El siguiente que agregaremos en la fuente es el Rollbar.js. ¿Puedo preguntar sobre las extensiones? ¿Debería ser JS o porque hemos instalado TypeScript deberíamos usar TS para los archivos de configuración? Para estos archivos de configuración vamos a hacer JavaScript. En realidad, puedes usar TypeScript. Lo probé. Funcionará con TypeScript. Te dará algunos errores de tipo allí. Pero puedes usar realmente TypeScript.

6. Modificación del Código y Adición del Plugin Rollbar

Short description:

Necesitarás modificar el código para que sea compatible con TypeScript. Rollbar te dará un ejemplo en JavaScript, pero puedes modificarlo para que funcione con TypeScript. Usamos TypeScript internamente en Rollbar, por lo que definitivamente funcionará. A continuación, crea el archivo Rollbar test.view. Copia la configuración de Rollbar y modifícala si es necesario. Luego, copia el archivo rollbar.js. Abre el archivo main.typescript e importa el plugin rollbar. Importa el componente de prueba rollbar y regístralo.

Necesitarás modificar el código para que sea compatible con TypeScript porque en realidad va a ... Rollbar realmente te dará un ejemplo en JavaScript. Puedes modificarlos y deberían funcionar con TypeScript también. Conseguí que funcionara. Así que depende de ti. Recomendaría JavaScript para que siga los pasos. Pero TypeScript funcionará y puedes hacerlo. Usamos TypeScript internamente en Rollbar también. Así que definitivamente funcionará.

Bien, tenemos eso. Hemos creado nuestros archivos. Ahora, bajo componentes, también necesitamos crear uno nuevo. Eso va a ser el archivo Rollbar test.view. Así que queremos seguir adelante y crear eso. Así que deberíamos tener un archivo rollbar.config.js o .typescript, un archivo rollbar.js o .typescript, un archivo rollbar.test.view, y deberíamos estar en un muy buen lugar ahora porque tenemos todos estos archivos vacíos creados.

Ahora, si tienes Rollbar abierto en la otra pantalla, lo que notarás es, como mencioné antes, te dará los valores de JavaScript para estos. Así que el rollbar.config, puedes presionar el botón de copiar aquí y podemos seguir adelante y copiar eso en este aquí. Ahora esto es muy importante, lo que estás copiando aquí es la configuración que ayudará a decirle a Rollbar a dónde enviar los datos de error. Así que el token de acceso es importante. Ese es mi token de acceso, no copies el mío porque entonces lo enviarás a mi cuenta de Rollbar, pero obtendrás tu propio token de acceso. Te dirá el entorno, que usaremos como el entorno de desarrollo. Definitivamente estamos usando, por ejemplo, la versión de código 1.0 para JavaScript, pero eso es absolutamente bien, no tienes que hacer nada más que eso. Si quieres modificar esto, tendrás que modificar este archivo para que sea compatible con TypeScript si tienes un archivo .ts.

Bien, el siguiente es rollbar.js, que voy a copiar. Así que presiona el botón de copiar para eso. De nuevo, tráelo y puedes guardarlo. De nuevo, este archivo puede ser modificado para TypeScript si quieres hacer eso, siéntete libre de seguir adelante y hacer eso también. Bien, esas son las primeras cosas que necesitábamos hacer, el archivo rollbar.config.js que es el paso Luego 2.5 es nuestro archivo rollbar.js. Y luego, queremos abrir nuestro archivo principal, que en este caso será un archivo main.typescript.

Ahora vamos a hacer un par de cosas potencialmente fuera de orden aquí, pero sólo para hacerlo más fácil para repasar. Esa es típicamente la razón por la que los hago así. Así que una de las cosas que necesitamos hacer es que necesitamos empezar a añadir el plugin rollbar. Así que lo importaremos, y también estaremos añadiendo ese ítem de vista también, pero lo estaremos modificando en un segundo. Así que, el paso número 2.6 es lo que haremos a continuación. Lo que haremos es que realmente estaremos modificando algunos de estos archivos. Así que el archivo main.ts es el primero que modificaremos. Así que lo que queremos hacer es, justo debajo de Veruda, queremos seguir adelante y traer el plugin rollbar. Así que queremos traer eso desde el directorio raíz. Lo siguiente que queremos hacer es que queremos importar nuestra prueba rollbar, que aún no existe pero vamos a seguir adelante y traer eso. Eso va a estar bajo el componente que acabamos de crear. Así que componentes / rollbar test view. El mío realmente lo recoge, así que eso es genial. Así que eso es lo primero que queremos traer allí. Luego, realmente necesitamos registrar esto también. Así que después de que la aplicación fue creada, queremos registrar el manejador de errores de rollbar. Así que la forma en que hacemos eso es app.use, y seguiremos adelante y haremos el plugin rollbar, así. Luego, obviamente, estamos creando la aplicación aquí. Una de las cosas que quiero hacer es que quiero seguir adelante y asegurarme de que realmente registramos ese componente para la prueba rollbar 1. Así que seguiremos adelante y haremos app.component, y lo que estaremos haciendo es que estaremos registrando ese uno.

7. Conexión del Plugin Rollbar y Componente de Prueba

Short description:

Realizaremos la prueba de Rollbar y conectaremos el plugin Rollbar y el archivo rollbar.js a la aplicación. También añadiremos el componente de prueba de Rollbar. Este paso es crucial para detectar errores en Rollbar.

Así que estaremos haciendo la prueba de Rollbar, y debería detectarlo. Ahí lo hace. Bien, lo que esto ha hecho es que ha conectado todas las piezas del hilo, esencialmente. Así que ahora tenemos registrado el plugin Rollbar, por lo que podemos conectar ese archivo rollbar.js y cargarlo en la aplicación, y podemos usarlo realmente. Lo siguiente es que necesitamos ese componente de prueba de Rollbar, que es lo que añadiremos en breve, para que podamos seguir adelante y usar esto. Así que este paso es bastante importante. Si llegas a los pasos posteriores, como el Paso 3, y no estás viendo errores en Rollbar, este es el primer lugar que te recomendaría que vayas a mirar.

8. Copiando y Modificando el Archivo rollbar test.view

Short description:

Asegúrate de tener el archivo rollbar test.view y hazlo compatible con TypeScript añadiendo la etiqueta de lenguaje TS y eliminando los puntos y comas. Este archivo añade un botón llamado triggerError, que llama al método triggerError para simular un error en rollbar.

Bueno, asegúrate de que tienes todos estos. También están en el repositorio. Ahora, el último trabajo que queremos hacer es, de hecho, seguir adelante, y el archivo rollbar test.view queremos seguir adelante y copiarlo. Así que, de nuevo, volveremos a este onboarding de rollbar, y simplemente lo copiaremos y lo traeremos. Ahora, lo que queremos hacer aquí es que realmente queremos hacer esto compatible con TypeScript, así que lo que voy a hacer es decir, bueno, el lenguaje que queremos usar aquí es TypeScript, así que TS, y simplemente voy a eliminar las cosas que hacen esto un poco más JavaScript-y. Eso es todo lo que tienes que hacer. Así que script, añade una etiqueta para el lenguaje llamado TS para TypeScript, y simplemente elimina los puntos y comas, que lo hacen un archivo JavaScript. Así que eso es muy, muy importante, rollbar test.view, ya que tenemos un proyecto TypeScript, esto todo necesita funcionar como TypeScript. ¿Qué hace realmente este archivo? lo que hace este archivo es, será el componente que añadiremos a nuestro formulario principal en breve. Añadirá un botón llamado triggerError. Y cuando presiones ese botón, va a llamar a este método llamado triggerError, que simulará un error en rollbar, ¿verdad? Así que eso es, de nuevo, muy, muy importante.

9. Resumen y Prueba de la Integración con Rollbar

Short description:

Resumen de los pasos: Copiar archivos desde la pantalla de inicio de Rollbar, instalar el paquete de Rollbar, modificar los archivos necesarios para ser compatibles con TypeScript, importar el componente rollbar-test, refrescar el navegador para ver el botón de disparo de error, y probar la integración de Rollbar disparando un error.

Bueno, espero que todos hayan hecho eso. Así que repasemos lo que hemos hecho. Has copiado desde la pantalla de inicio de Rollbar, que es esta pantalla de aquí. Has instalado el paquete, es decir, el paquete de Rollbar. Has copiado rollbar-config.js en rollbar-config.js. Lo has hecho también para rollbar.js. Si modificaste esos archivos a archivos TypeScript, de nuevo, necesitas modificar la sintaxis allí y hacerla compatible con TypeScript. Si usas VS Code, te dará una idea de lo que necesita cambiar para hacer esos tipos seguros. Luego, de nuevo, queremos modificar el archivo principal de la aplicación para empezar a registrar nuestros archivos. Finalmente, ese componente rollbar-test.vue necesita ser actualizado para que realmente lo tengamos.

Ahora, si fuéramos a ejecutar nuestra aplicación, si voy a npm run dev aquí, podrías decir, bueno, aún no tengo un botón, y estarías 100% correcto. Así que aún no tenemos un botón. Eso es porque hay un último paso que necesitamos hacer, que es nuestro archivo app.vue necesita ser modificado. Así que tu aplicación aún debería cargar, lo que queremos asegurarnos es que el archivo app.vue, necesitamos modificar este archivo. Así que lo primero que queremos hacer es importar ese componente. Así que tenemos ese llamado rollbar-test y lo traeremos desde dash components dash rollbar-test. Bueno, así que tenemos eso y puedes añadirlo realmente donde quieras. Voy a seguir adelante y simplemente añadirlo aquí, rollbar-test. Así que eso también es muy importante. Así que asegúrate en tus archivos principales de la aplicación, app.vue en este caso para mí, voy a ponerlo justo encima del mensaje de lo lograste. Hola mundo. Voy a poner el componente rollbar-test y asegúrate de haberlo importado. Ahora, si refrescas tu navegador, lo que esperaría ver es algo como esto, donde ves el botón llamado disparar error. Así que voy a hacer una pausa aquí. Si tienes algún problema, ponlo allí. Si tienes problemas para ejecutar tu aplicación, avísame. Pero esto es lo que deberías terminar con, la aplicación como esta. Y para aquellos de ustedes que están listos y quieren ver cómo funciona todo, pueden pulsar el botón que dice disparar error. Así que puedes seguir adelante y pulsar ese botón tantas veces como quieras. Lo que va a pasar en rollbars, si todo funcionó correctamente cuando lo configuramos, esto debería seguir adelante y disparar un error dentro de la aplicación de rollbar. Bueno. Y de nuevo, si quieres ejecutarlo de nuevo, puedes hacerlo. Eso ciertamente no es un problema. Aquí vamos. Y es posible que necesites recompilarlo y rollbar estará recibiendo el error en breve. Bueno. Así que esperaré aquí mientras todos están configurando esto, asegurándose de que todo funciona. Si te encuentras con algún problema, avísame. Bueno. Así que para muchos de ustedes, espero que estén obteniendo una pantalla como esta. Así que dale un par de momentos a todos para ponerse al día, asegúrate de que pudiste presionar ese botón y obtuviste un nuevo ítem. Así que si hago clic en la ventana de ítems aquí, puedes probar nuestra nueva interfaz de usuario si quieres hacerlo. Allí puedes ver la prueba de integración de rollbar, que debería lucir así. Así que eso es simplemente el botón que presionamos, ese es un componente que se utilizó. Así que de nuevo, esto debería ser lo que estás viendo aquí con algunos de los detalles capturados de ese ítem automáticamente. Así que la traza de la pila y todo eso. Ahora de nuevo, solo simulamos uno aquí. Así que no va a tener todo lo que siempre quieres. Pero llegaremos a eso en breve. OK, así que voy a hacer una pausa aquí.

10. Solución de problemas y manejo de errores con Rollbar

Short description:

Si alguien tiene un problema, si está ejecutando o necesita una pregunta respondida, hágamelo saber. Hemos creado un proyecto de vista TypeScript, una cuenta gratuita de Rollbar e integrado su aplicación con el SDK de Rollbar. Hemos discutido excepciones comunes como errores de sintaxis, errores de tiempo de ejecución, errores lógicos y códigos de error de API. Rollbar te ayuda a capturar tanto las excepciones manejadas como las no manejadas, proporcionando valiosos insights para aplicaciones de producción. Haz clic en el botón para ver un error en Rollbar con una traza de pila e información adicional.

Si alguien tiene un problema, si está ejecutando o necesita una pregunta respondida, hágamelo saber. Estamos aquí para ayudar y asegurarnos de que obtenga todas las respuestas. Daré a todos un momento para tomar una bebida, una taza de café, y luego pasaremos al siguiente conjunto de elementos y veremos si hay alguna pregunta. No hay preguntas en esta llamada. Así que supongo que a todos les está yendo bastante bien. Si lo han registrado, la aplicación de todos está funcionando, lo cual siempre es genial. Hola. Eso es un buen comienzo para nuestro día. Sí, así que si tienes elementos como este, es posible que necesites agregar un filtro, que es tu primer proyecto. Y una vez que tienes ese filtro, puedes ocultar los filtros en el lateral, pero deberías ver en la lista algo como esto. Asegúrate de tener seleccionado el proyecto. No te preocupes por los entornos en este momento. Puedes decir que solo quieres ver algunos errores, pero sabes, puedes configurar estos filtros. También recordará tus filtros. Deberías verlo en la lista de esta manera. Avísame si no es así, pero definitivamente deberías verlo en tu lista de esa manera. Y de nuevo, si tienes algún problema, puedes ir y mirar ese repositorio de GitHub. También puedes descargarlo si quieres. Debería facilitarte un poco la vida. Pero si recapitulamos lo que hemos hecho, hemos creado un proyecto de vista TypeScript, hemos creado una cuenta gratuita de Rollbar. Espero que hayas utilizado ese bonito crédito. Luego hemos integrado tu aplicación con el SDK de Rollbar. Y de nuevo, será diferente en función de los lenguajes que estés utilizando o los frameworks que estés utilizando. Solo sigue los pasos de incorporación para cada uno. Y luego lo que hemos hecho es que hemos presionado un botón y hemos enviado un error. Entonces, antes de seguir adelante, sabes, ¿cuáles son algunas de las excepciones más comunes o cosas que vemos aquí en Rollbar? Cosas como los errores de sintaxis son excepciones comunes. Eso es cuando tienes el código incorrecto en tu sintaxis. Normalmente eso ni siquiera se compilará. Así que no lo estás viendo en Rollbar. Lo verás en tu IDE mientras compilas. Cuando realmente tienes errores de runtime, eso es cuando algo, sabes, operaciones ilegales suceden durante la ejecución. Entonces, por ejemplo, si estoy haciendo algo completamente mal, mi aplicación podría fallar o lanzar una excepción manejada o no manejada, dependiendo de si realmente intento manejarlas. Y eso es típicamente lo que tus usuarios experimentarían. Luego puede haber algunos errores lógicos donde simplemente no estás, sabes, y haremos uno en un segundo aquí, podrías estar dividiendo por cero o haciendo algo así. Y luego los otros podrían ser si estás interactuando con APIs, podrías obtener ciertos códigos de error de vuelta 500 o 400 de los sistemas backend. Y de nuevo, esas cosas también fluirán hacia Rollbar. Así que lo que Rollbar te va a ayudar es a capturar excepciones manejadas y no manejadas. Entonces, cuando obtenemos todas esas no manejadas, eso es típicamente cuando no intentas atraparlas. Así que no hay try catch. Tienes tu código y la propia aplicación va a intentar decir, hey, no sé qué hacer con este error. No está manejado. Podría fallar. También podría ser manejado con tu framework. De nuevo, típicamente si tienes errores manejados, eso es típicamente intentamos atraparlos y hacer algo al respecto. También podemos capturar esos y enviarlos a Rollbar. Así que la ventaja de esto es que realmente sabes lo que está pasando en tu aplicación para aplicaciones de producción no solo en tu entorno de desarrollo, sino realmente para aplicaciones de producción. Y luego puedes tomar estos datos, y la gente puede, tus desarrolladores pueden verlos antes que los usuarios, arreglarlos, sacar esas correcciones de implementación de vuelta a los usuarios también. Así que si aún no has pulsado ese botón, adelante y haz clic en ese botón. Y lo que debería suceder es que deberías obtener un error que se vea así en Rollbar. Cuando haces clic en él, obtendrás la traza de pila y alguna información adicional para eso también.

11. Añadiendo el Manejo de Errores y Datos de Telemetría

Short description:

Llevemos esto al siguiente nivel añadiendo otro botón al componente de vista de prueba. Provocaremos un error de división por cero para demostrar cómo Rollbar detecta y captura errores. Rollbar proporciona información detallada sobre el error, incluyendo detalles del navegador y del lenguaje, tipo de aplicación, URL, eventos de telemetría, y más.

Así que espero que todos hayan podido hacer eso también y obtener sus errores en Rollbar. Así que hagamos un par de cosas que son un poco más difíciles. Llevemos esto a un nivel un poco más avanzado. Así que si tienes abierto tu componente de vista de prueba, lo que podríamos hacer es añadir otro botón aquí. Así que voy a seguir adelante y añadir otro botón y haremos añadir. Click haremos desencadenar error dos. Vale, así que necesitamos ir y sólo voy a ser perezoso y copiar esto. Así que lo que quiero hacer ahora es hacer una división por cero. Para daros un ejemplo de cómo podría ser esto. Así que podríamos usar algo como esto. Hagamos. Vale, así que vamos a dividir esto. Ahora, para aquellos de vosotros, podríais ir. Esto definitivamente va a lanzar un error y tenéis toda la razón. Bien, así que si guardas esto, y vuelves a tu aplicación y la recargas deberías tener un desencadenador dos. Ahora si presionas eso, verás en tu consola, obviamente, se registrará algún error también. Así que si pulsas eso, sí, dice, Hey, hubo algún tipo de problema. Así que de nuevo, se registrará un error. Si vamos a roll by aquí, y podemos pulsar el botón de refresco, obtendrás ese error. Ese es un ejemplo de algo donde lo codificaste y no funcionó realmente como tú lo querías. Así que, ya sabes, Robo recogerá cualquiera de esos tipos de errores también. Si tuvieras que intentar atraparlo, puedes elegir lo que quieres hacer con ese error. Pero entonces puedes ver que el robot recogió la división por cero y en realidad recogió todas las propiedades en torno a esto. Así que todas las cosas que normalmente podrías querer saber para ayudarte a resolver este error. Así que, por ejemplo, qué navegador se está utilizando, qué lenguaje se está utilizando. Podrían ser cosas en torno a los tipos de aplicaciones, la URL, el punto final al que el usuario está accediendo. También podría incluir eventos de telemetría. Así que, ¿en qué forms estaban trabajando o qué campos estaban trabajando? ¿Qué cosas se completaron, qué cosas se seleccionaron? Así que te dará todos los datos de telemetría para esto también.

12. Añadiendo Datos Adicionales a la Carga Útil

Short description:

Puedes añadir datos adicionales a tu carga útil en Rollbar, como el seguimiento de sesiones, las banderas de características y los datos del usuario final. Modifica el archivo rollbar.config.js para incluir datos de la persona, como el nombre, el correo electrónico y el ID de usuario único. Al hacer esto, puedes identificar quién encontró el problema y proporcionar soporte personalizado. Los datos se envían a Rollbar en tiempo real, lo que te permite resolver problemas rápidamente. También puedes utilizar datos dinámicos en tus cargas útiles, como se demostró en el código fuente de otra aplicación.

Ahora, una de las cosas que normalmente vemos con los usuarios también, es que quieren añadir algunos datos adicionales a su carga útil. Así que para muchos de ustedes, podrían estar familiarizados con herramientas que hacen seguimiento del performance también o hacen algunas otras cosas en su aplicación y vamos a traer esto. Pero muchas veces quieres empezar a obtener información adicional, no sólo el rastreo de la pila también, lo cual es realmente genial ya que puedes obtener eso de una aplicación de producción en tiempo real, enviarlo a un canal de Slack, recibir notificaciones en PagerDuty o Jira o algo así, o simplemente por correo electrónico normal.

Pero una de las otras cosas que a menudo vemos que la gente quiere hacer es conectar esto con otras partes u otras herramientas que utilizan. Así que podrías tener algún seguimiento de sesiones o algunos datos de sesión, por lo que puedes enviar el ID de la sesión en la carga útil a Rollbar, si estás utilizando algunas herramientas de rastreo, puedes hacer lo mismo para eso. Si estás utilizando herramientas de banderas de características como LaunchDarkly o cualquier otra herramienta de banderas de características sabes, ¿está ocurriendo este error bajo una cierta bandera de características o no? De esa manera puedes ver si los experimentos son muy exitosos o no. Así que puedes enviar en qué banderas de características están causando que un error específico ocurra más o menos. Luego puedes tener algunos datos adicionales del usuario final, cosas sobre tus clientes. Así que, por ejemplo, ¿es un cliente de alto valor? ¿Es un cliente específico que está teniendo un problema que puedes notificar al equipo de éxito del cliente o a los equipos de soporte cuando tienen un problema? Así que, por ejemplo, en Rollbar, si tienes un problema en Rollbar y registras un ticket con nosotros, podemos mirar en nuestra cuenta de Rollbar y ver qué errores te encontraste en la plataforma, si los hay, y ayudarte a resolverlos mucho, mucho más rápido. Y de hecho, nuestros equipos de soporte utilizan el producto también. Así que, de nuevo, es una gran manera de hacer eso.

Así que una de las cosas que queremos modificar en nuestra carga útil, así que ese es el archivo rollbar.config.js es vamos a enviar algunos datos de la persona. Así que esto va a ser identificar quién se encontró con ese problema. Ahora, estaremos codificando eso hoy, pero en una aplicación real, puedes recogerlo por ejemplo, de los detalles de la sesión, y de hecho te daré un poco de ejemplo de cómo hacer eso también. Vale. Así que tenemos esto aquí, queremos añadir un nuevo elemento de carga útil. Así que añadiendo lo que llamamos datos de personas a Rollbar. Bien. Así que lo que estaremos haciendo aquí, se llama persona, es lo que realmente llamamos a este objeto aquí. Vamos a traer eso un poco. Oops. Oops. Hagamos eso. Ahí vamos. Bien. Así que lo que quiero grabar de una persona es, tenemos un objeto definido en el sistema. Y de nuevo, esto podría ser, normalmente uso a James Bond aquí ya que todo el mundo conoce al Sr. Bond. Jay Bond. Y su correo electrónico. Y de nuevo, el correo electrónico es opcional. Así que si estás en un país donde el cumplimiento del GDPR o ciertos datos personales no se permite almacenar, puedes encriptar esto también, o simplemente almacenar lo que quieras de este usuario. Podría ser un ID de usuario único del sistema también. Así que esas son cosas que ciertamente puedes almacenar también. Vale. Así que vamos a asegurarnos de que eso es correcto. Ahí vamos. Vale. Así que ahora si guardo esto y vuelvo a mi aplicación, y si nos aseguramos de que esto se refresca y podemos golpear este aquí, golpear ese botón un par de veces, estaremos viendo todos estos errores fluir y puedes ver que es más o menos en tiempo real con Rollbar. Así que realmente uno a dos segundos, tengo estos datos en Rollbar. Y lo que va a pasar ahora es que cuando abrimos este error, y si haces clic en las personas afectadas ahora tendremos uno que es el Sr. Bond. Así que lo que ha pasado ahora en la carga útil a Rollbar, verás una nueva persona, James Bond ha aparecido en su carga útil. Así que imagina que tienes muchos usuarios diferentes que están encontrando problemas. De nuevo, quieres mostrar cómo puedes resolver los problemas muy rápidamente. De nuevo, esta es una gran manera de hacer eso. Ahora podrías estar preguntando cómo podría ir y hacer esto con datos dinámicos Así que vamos a seguir adelante y mirar otra aplicación que sé que hace esto con cargas útiles dinámicas Así que vamos a mirar el código fuente y ver cómo lo está haciendo. Así que la biblioteca de registro compartida aquí. Y así en este, es una configuración un poco diferente para roll bar.

13. Añadiendo Personas y Datos Personalizados a la Carga Útil

Short description:

Puedes añadir datos adicionales a la carga útil, como datos de personas y datos personalizados. Los datos de personas te permiten entender quién está experimentando la mayoría de los problemas en un momento específico. Puedes hacer clic en usuarios individuales para ver los problemas que encontraron. Los datos personalizados te permiten añadir datos de rastreo, banderas de características o cualquier otra información que te ayude a depurar errores. Al añadir datos dinámicos a la carga útil, puedes identificar rápidamente problemas comunes o problemas específicos del usuario. Al recargar la aplicación y desencadenar errores, se llenará Rollbar con la carga útil actualizada.

De nuevo, puedes añadir algunos datos adicionales data aquí cuando se trata de, por ejemplo, mapas de origen, que no cubriremos hoy. Pero necesitarás hacer mapas de origen. Pero de nuevo, puedes añadir datos adicionales data a la carga útil. Y para esta aplicación específica, si me desplazo hasta el fondo aquí, puedes ver que estoy modificando la carga útil aquí y añadiendo a la persona usando algunos de los datos de la sesión en esta aplicación. Así que ese es un ejemplo de añadir datos dinámicos a la carga útil cuando se necesita. Así que tan pronto como se produce el error, tengo este escuchador de eventos, y luego modifico la carga útil en consecuencia.

OK, así que de nuevo, esta es una gran manera de añadir datos dinámicos data a la aplicación. Y lo que hará es que te ayudará a entender quién está teniendo la mayoría de los problemas en un momento específico. Así que otro buen ejemplo es que puedo abrir mi proyecto y hacer clic en el Sr. Bond y ver todos los problemas que el Sr. Bond encontró. Así que, por ejemplo, si tienes clientes de alto valor en tu base de clientes o para tu empresa, querrás hacer clic en ellos y ver todos los problemas que encontraron antes de quizás una renovación de contrato o algo así para asegurarte de que has abordado todos los problemas y realmente solucionado sus problemas también. OK, así que espero que tenga sentido, cómo puedes usar algunos de esos datos de personas también. Y de nuevo, para ambos, lo hemos añadido ahora. Así que va a estar en todas las nuevas cargas útiles. Y ahí puedes verlo. Lo otro agradable es que puedes ver que el mío dice 60 por ciento aquí, 100 por ciento. Eso te dice para todos los errores en esta aplicación, cuántos, cuál es el porcentaje que vino del Sr. Bond. Así que todos mis errores prácticamente vienen del Sr. Bond, el 60 por ciento de ellos, al menos algunos no tenían ningún usuario en ellos. Pero eso te dice de nuevo, ¿es un problema común o es específico de un usuario que podría estar haciendo algo mal? OK, así que la primera opción que queremos hacer es añadir datos de personas. La siguiente que queremos hacer aquí es añadir lo que llamo datos personalizados a la carga útil. Entonces, ¿por qué es útil esto? Así que un buen ejemplo de nuevo es que tenemos nuestros datos de personas. También queremos hacer algunos datos de rastreo o queremos saber algo que es diferente en mi aplicación. Así que quiero quizás tener banderas de características enviadas a Rollbar. Quiero enviar algunos tokens adicionales o algo que encuentres útil para ayudarte a depurar un error. Y esta es una gran manera de hacer esto también. Así que en el PDF en el paso 4.2 se añade datos personalizados a nuestra carga útil. Así que vamos a hacer eso también. Así que aquí tenemos elementos como ese. Podría ir a personalizado. Y ahí lo tienes. Así que ahora hemos añadido un objeto personalizado como este. Y un buen ejemplo sería. Así que, por ejemplo, podría decir trace_ID y esto podría ser lo que quieras. Así que no hay restricciones para esto. Voy a ir con algo como eso. Y también podría añadir, por ejemplo, feature_flag. Y de nuevo, esto podría ser un array de objetos. Así que voy a hacer, por ejemplo, feature. Feature uno, y podría hacer otro llamado feature dos. Podemos seguir adelante y guardar eso. Y si volvemos a nuestra aplicación, y de nuevo, en esta carga útil puede ser cualquier cosa. Así que de nuevo, siéntete libre de poner lo que quieras. Lo que tenga sentido para ayudarte a depurar errores mucho más rápido. Adelante, recarga tu aplicación, pulsa ese botón un par de veces. Metamos esos errores en Rollbar. De nuevo, debería ser aproximadamente un par de segundos. Ahí vamos.

14. Personalizando la Carga Útil y Configurando Rollbar

Short description:

Puedes personalizar la carga útil en Rollbar para incluir datos específicos para diferentes componentes o escenarios. Esto te permite rastrear y analizar información que es relevante para tu aplicación. Puedes agregar datos adicionales, como consultas lentas, metadatos, detalles de funciones, ID de usuarios y más. Rollbar proporciona una visión completa del número de personas afectadas, direcciones IP, datos de telemetría y otros insights útiles. También puedes enviar datos personalizados utilizando los SDKs y configurar varias configuraciones, incluyendo limitación de tasa, lista blanca, bloqueo y depuración de datos. Siéntete libre de explorar las diferentes opciones disponibles y consulta los ejemplos proporcionados para obtener orientación. Si tienes alguna pregunta o encuentras algún problema, por favor házmelo saber.

Y si bajamos ahora, no solo verás los datos del usuario data, también verás esta carga útil personalizada. Puedes ver la característica uno, la característica dos. También podemos ver el ID de rastreo. Entonces, esto es muy, muy útil en estas aplicaciones, ¿verdad? Así que imagina que tienes muchas, muchas aplicaciones que estás monitoreando. Hay backend, hay frontend, todas las cosas que normalmente quieres monitorear. Así que vamos a entrar en un ejemplo más práctico de cómo se vería eso.

Así que tengo otra cuenta de Rollbar abierta aquí que queremos ver. Así que aquí vamos, tenemos algunos datos más en esta. Así que puedes ver, por ejemplo, que realmente rastreo consultas lentas en mi backend aquí. Así que en mis metadatos, quiero tal vez registrar la consulta real que está ocurriendo, que hago aquí. Se ejecutó durante 1.3 segundos. Quiero saber el ID de la suscripción. Quiero enviar algunos datos adicionales data como el ID de la suscripción de registro. Quiero hacer cualquiera de esas otras cosas que quiero en la carga útil. Así que con Rollbar, puedes seguir adelante y hacer eso también. Puedes enviar advertencias, mensajes, todas esas cosas al sistema. Y de nuevo, estoy añadiendo mi servicio de aplicaciones, así que estoy añadiendo datos adicionales data a la carga útil aquí. Puedes ver qué función era, si tuvo éxito o no, ¿cuál era mi ID de usuario? Así que este es el UUID para esta aplicación. Y de nuevo, todas estas cosas hacen que sea mucho más fácil para mí saber cuántas personas se vieron afectadas, cuántas direcciones IP se vieron afectadas. Esto es backend, así que todo va a ser una sola dirección IP. Pero de nuevo, podemos seguir adelante y encontrar uno de front-end como el que tenemos aquí. Bueno, portapapeles, y este debería tener muchos más datos en él también. Ahí puedes ver, así que el número de personas afectadas con el tiempo, si presiono eso, puedo ver a todas las personas afectadas y cuántas veces se encontraron con este problema. Y de nuevo, esta es una gran manera de obtener todos estos problemas. Este es un portapapeles JavaScript que me está dando un problema. Así que esta es la página, así que la establezco en una aplicación de una sola página. Puedo establecer mi contexto también. Y de nuevo, obtendré, por ejemplo, la telemetría completa para esta aplicación también. Bueno, de nuevo, lo hace súper útil cuando se trabaja con este tipo de aplicaciones.

Entonces, podrías estar preguntándote, ¿qué otros datos personalizados de aplicaciones data puedo enviar a Rollbar? Así que lo que recomendamos hacer es, de nuevo, si quieres trabajar con cualquiera de los SDKs que tenemos, ahí puedes ver los de JS del navegador o los relacionados con el navegador. Un par de cosas como el ID de rastreo pueden ser enviadas aquí como he mencionado. Hay algunas cosas adicionales que puedes enviar también con todas estas aplicaciones. Así que de nuevo, siéntete libre de jugar con todas las diferentes opciones que tienes para los diversos SDKs. Y de nuevo, te damos algunos ejemplos realmente buenos de cómo hacerlos, cómo limitar la tasa en el lado del cliente, puedes limitar la tasa en el lado del servidor. Hay un montón de configuraciones que puedes añadir a tu carga útil en cualquier momento. Lista blanca, lista de bloqueo, también puedes depurar datos personales data como la fecha de nacimiento, tarjetas de crédito, Seguridad Social, si estás en América. Todas estas cosas puedes seguir adelante y configurarlas en la configuración de Rollbar. Lo que voy a hacer es que voy a añadir esto al chat hoy, aquí también lo añadiré al canal de Discord. Así que si quieres ver esos, puedes seguir adelante y pasar algún tiempo para ver todas las diferentes opciones de configuración en allí. Bueno, vamos a hacer una pausa aquí, ¿alguien tiene alguna pregunta, alguien se encontró con un problema diferente que no pudo resolver, no pudo hacer funcionar, parece bastante bien hasta ahora. Bueno, volvamos a esta aplicación aquí, ups, ahí vamos. Muy bien.

Tengo una pregunta y porque tenemos esta única configuración de archivo robot, ¿hay alguna manera de, por ejemplo, configurar qué tipo de datos data deben ser enviados en algún lugar del componente? Como por ejemplo, si tengo en la tienda o cualquier página de e-commerce un botón de compra, me gustaría enviar otra información diferente sobre alguien que está comprando e información diferente sobre, por ejemplo, un invitado que está viendo nuestro producto. Cuando él, por ejemplo, visita una página o hace clic en ver más, no quiero todos los datos del cliente, todos los datos del invitado, ¿verdad? Oh absolutamente, sí. Entonces, definitivamente, esa es una gran pregunta. Puedes hacerlo en la carga útil de forma nativa, pero obviamente, ya que estás aquí, como un buen ejemplo aquí, hagamos algo como esto. No queremos obtener ese error más. Entonces, cada vez que quieras enviar algo hoy a Rollbar, si vas a rollbar.info, si envías algo así, puedes personalizar lo que quieres enviar. Así que aquí, puedes decidir lo que quieres poner en esa carga útil. Así que verás las propiedades para este es básicamente una carga útil abierta.

15. Uso de la Función Transform y Datos de Carga

Short description:

En tu configuración de Rollbar, existe una función transform que te permite modificar la carga útil. Puedes agregar o modificar datos en la carga útil en función de diferentes condiciones. Esto es útil para agregar información de sesión, personalizar datos para diferentes usuarios e integrar con otras herramientas. Rollbar proporciona enlaces de servicio que te permiten conectar los datos de la carga útil a otras aplicaciones como DataDog, Splunk, Elastic y más. También puedes usar el lenguaje de consulta de Rollbar para ejecutar consultas similares a SQL en tus datos. Hoy, creamos un proyecto Vue utilizando TypeScript y agregamos una nueva cuenta de Rollbar.

La otra cosa que puedes hacer es en tu configuración de rollbar, hay una función transform. Así que, déjame ir a buscar tu función transform para que pueda mostrarte cómo funciona. Personalmente uso mucho la función transform. Eso es en realidad cómo modifico mi carga útil. Así que para tu pregunta, en realidad hago exactamente lo que hablaste porque eso es a veces importante. Sabes, quieres enviar diferentes data dependiendo de quién sea el individuo, ¿verdad? Lo que están haciendo. Así que, si volvemos a mi ejemplo aquí, en realidad hago algo como esto.

Así que solo tengo que copiar la función transform aquí. Será algo como esto. Sí, lo que puedes hacer es cuando estás en la función transform, puedes agregar cosas a la carga útil. Pero la carga útil real, este objeto puedes modificarlo como quieras. Así que puedes decir, mira, si es un invitado o algo más entonces haz algo diferente con esta carga útil. Y de nuevo, sabrás si alguien ha iniciado sesión o no porque probablemente lo sabrás con tu aplicación. Pero en esto, sabes, en realidad, por ejemplo si usas algo como Hotjar quieres agregar la sesión de Hotjar. Así que en Rollbar obtienes un hipervínculo y puedes hacer clic y abrir Hotjar o Postdoc o alguna grabación que en realidad hizo la grabación de video para ti. Así que en realidad hago esto con algunas de mis aplicaciones también. Así que recomendaría mucho algo por ejemplo como Postdoc o si quieres decir, bien, este era un registro de invitado cuántas cosas hay en su carrito, ¿verdad? ¿Añadieron algo, quitaron algo? Si es un usuario real, sabes, algunos otros data qué país o de nuevo, qué hay en su carrito o todo ese tipo de cosas. Pero esta es una gran manera de hacerlo. De esta manera puedes controlarlo a medida que la gente lo hace. A medida que obtienes los data a las barras de desplazamiento vas a tener una especie de función global. También tenemos funciones de reemplazo. Así que de nuevo, cualquier cosa de una función transform puedes llamar a tu propia función y hacer lo que quieras, ¿vale?

Vale, gracias. Esas son preguntas geniales. Sí, y esta es una gran manera de hacerlo. Así que lo recomiendo mucho. Lo otro bueno es que si haces eso lo que pasará en Rollbar es que en realidad obtendrás, sabes, enlaces de hipertexto en estos elementos. Veamos si tenemos uno o dos abiertos aquí de mi lado. Ahí vamos. Sí, tienes una cosa llamada enlaces de servicio aquí. Así que si quieres agregar un enlace de servicio cualquier data en la carga útil puede ser utilizada también. Así que un buen ejemplo sería si vamos a enlaces de servicio, podrías, por ejemplo, obtener esa data de las cargas útiles. Cualquier cosa que envíes como personalizado, banderas de características o incluso la data nativa que recogemos. Y luego puedes conectarlo a cosas como data dog. Puedes conectarlo a cualquier tipo de aplicación como Splunk, Elastic, New Relic, Sumo, Honeycomb. Tenemos todos estos ejemplos aquí. Pero básicamente esto está usando la carga útil. ¿Recuerdas ese custom dot que enviamos? Podrías leer eso y luego integrarlo con cualquier otra herramienta que quieras. De hecho, puedes hacer una búsqueda en Google. Puedes preguntarle a chat GPT si quieres cómo resolver el error. Así que de nuevo, todas estas cosas se pueden hacer con lo que está en la carga útil. Y te damos muchos de estos ejemplos listos para usar también. Luego también tenemos un lenguaje de consulta. Así que si quieres empezar a consultar tus data que ahora están en Rollbar, puedes escribir como una consulta SQL y puedes ejecutar esto contra tus data y te devolverá cualquiera de esos. Y te damos algunos de los códigos de ejemplo de cómo hacer eso también. Vale, así que muy, muy útil si alguna vez quieres empezar a hacer eso también.

Vale, sé que estamos corriendo o llegando al final de nuestro tiempo hoy. Así que vamos a repasar lo que hemos hecho y asegurarnos de que todos pudieron llegar a donde queríamos estar. Lo traeremos. Así que hoy creamos un proyecto Vue usando TypeScript. Añadimos una nueva cuenta de Rollbar.

16. Conclusión de la Masterclass

Short description:

Gracias por acompañarme hoy. Espero que hayas aprendido algo nuevo sobre Rollbar y cómo puedes usarlo. Puedes encontrar el ejemplo de Vue.js y el repositorio de GitHub con el código. Si tienes alguna pregunta, por favor hazla en el canal de discord. Que tengas un gran día y una excelente semana por delante.

Espero que todos hayan utilizado ese código de descuento. Luego integramos esta aplicación con el SDK de Rollbar, el SDK de Vue.js. Enviamos un error gestionado y uno no gestionado. Así que el no gestionado es donde dividimos por cero y uno, en realidad lanzamos un error pero no hicimos un try-catch. Puedes hacer un try-catch. Y finalmente añadimos nuestra carga útil personalizada que hicimos aquí.

Así que de nuevo, hemos hecho todo lo que queríamos en la masterclass. Así que de nuevo, gracias por acompañarme hoy. Espero que hayas aprendido algo. Espero que hayas aprendido algo nuevo sobre Rollbar, qué es, cómo puedes usarlo. Aquí está el ejemplo de Vue.js que usamos hoy. Si quieres volver y crear tu propio proyecto Vue.vite. También está el repositorio de GitHub con este ejemplo de código en él. Así que si alguna vez quieres usarlo de nuevo o jugar con él o modificarlo, adelante y úsalo también.

Pero de nuevo, gracias por pasar la hora conmigo hoy. Espero que haya sido algo que hayas aprendido sobre Rollbar. Si tienes alguna pregunta, por favor hazla en el canal de discord. Voy a estar un poco más de tiempo. Así que si tienes alguna otra pregunta, no dudes en quedarte y no dudes en hacer esas preguntas. Si tienes preguntas específicas sobre Rollbar sobre cómo puedes usarlo, estaré encantado de ayudarte a responderlas también. Para todos los demás, espero que tengas un buen resto del día y una gran semana por delante. Y gracias de nuevo por acompañarme hoy.

Watch more workshops on topic

How to Solve Real-World Problems with Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
Michael Carter
Michael Carter
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Monitoring 101 for React Developers
React Advanced Conference 2023React Advanced Conference 2023
112 min
Monitoring 101 for React Developers
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
If finding errors in your frontend project is like searching for a needle in a code haystack, then Sentry error monitoring can be your metal detector. Learn the basics of error monitoring with Sentry. Whether you are running a React, Angular, Vue, or just “vanilla” JavaScript, see how Sentry can help you find the who, what, when and where behind errors in your frontend project.
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Stephen Cooper
Stephen Cooper
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
JSNation 2023JSNation 2023
44 min
Solve 100% Of Your Errors: How to Root Cause Issues Faster With Session Replay
WorkshopFree
Ryan Albrecht
Ryan Albrecht
You know that annoying bug? The one that doesn’t show up locally? And no matter how many times you try to recreate the environment you can’t reproduce it? You’ve gone through the breadcrumbs, read through the stack trace, and are now playing detective to piece together support tickets to make sure it’s real.
Join Sentry developer Ryan Albrecht in this talk to learn how developers can use Session Replay - a tool that provides video-like reproductions of user interactions - to identify, reproduce, and resolve errors and performance issues faster (without rolling your head on your keyboard).
Building a Serverless GraphQL API For Any Datasource With StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Building a Serverless GraphQL API For Any Datasource With StepZen
WorkshopFree
Roy Derks
Roy Derks
Want to get started with building a GraphQL server but have no idea where to begin? Every (frontend) developer asks for a GraphQL API but often lacks the backend knowledge to create a performant one. There are many different flavours in creating the perfect GraphQL server, ranging from schema-first to code-first or even auto-generated solutions.

In this interactive workshop, you will learn about building a serverless GraphQL API using StepZen. With StepZen, you can create a GraphQL for any data source (SQL, NoSQL & REST) and even other GraphQL APIs within minutes. And even handle more complicated use cases such as authentication and deployment. Using little code, you'll get to combine different data sources in one fully performant API that you can use in your applications from day one.

Table of contents:
- What is StepZen?
- Connecting to a data source (SQL, NoSQL & REST)
- Using custom directives
- Handle sequence flows
- Deployment

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

Safely Handling Dynamic Data with TypeScript
Node Congress 2021Node Congress 2021
29 min
Safely Handling Dynamic Data with TypeScript
TypeScript makes JavaScript safer adding static type definitions. Static definitions are wonderful; they prevent developers from making trivial mistakes ensuring every assignment and invocation is done correctly. A variable typed as a string cannot be assigned a number, and a function expecting three arguments cannot be called with only two. These definitions only exist at build time though; the code that is eventually executed is just JavaScript. But what about the response from an API request? In this talk Ethan Arrowood, Software Engineer 2 @ Microsoft, he will cover various solutions for safely typing dynamic data in TypeScript applications. This talk features popular technologies such as Fastify, JSON Schema, Node.js, and more!
Mastering Error Handling Node.js
Node Congress 2022Node Congress 2022
21 min
Mastering Error Handling Node.js
Errors happen to every programmer. Devs have different choices: suppress it, notify the user, report to the team, ignore it or write code to handle the error.
In this talk, you will learn all the important aspects of the Node.js error system, the types of errors, different ways to deliver an error, and patterns to improve error handling - with examples!
Apache Kafka Simply Explained With TypeScript Examples
JSNation 2023JSNation 2023
27 min
Apache Kafka Simply Explained With TypeScript Examples
You’re curious about what Apache Kafka does and how it works, but between the terminology and explanations that seem to start at a complex level, it's been difficult to embark. This session is different. We'll talk about what Kafka is, what it does and how it works in simple terms with easy to understand and funny examples that you can share later at a dinner table with your family.
This session is for curious minds, who might have never worked with distributed streaming systems before, or are beginners to event streaming applications.
But let simplicity not deceive you - by the end of the session you’ll be equipped to create your own Apache Kafka event stream!
The Art of Functional Programming
React Summit 2022React Summit 2022
26 min
The Art of Functional Programming
Functional Programming (FP), a paradigm in which programs are made up of pure, stateless functions, is adored by many programmers for how easy it makes it to predict, test, and debug the behavior of the code we write. Although FP has an unfortunate reputation as an ivory-tower domain full of obscure jargon comprehensible only to those with PhDs in category theory, the core concepts are straightforward ideas all of us can understand, and even have fun learning!
In this talk, we’ll create generative SVG art as a way to explore fundamental FP concepts such as recursion and function composition, and tackle the practical challenges of FP in the real world, such as dealing with the tricky parts like side effects and randomness which don’t fit into the safe, sterile world of pure functions. By the end of the talk we’ll not only have the key concepts & techniques we need to start writing our own functional programs, we’ll have some pretty functional art to look at too!
How Grafana Uses React to Power the World of Observability
React Summit 2023React Summit 2023
7 min
How Grafana Uses React to Power the World of Observability
Why does Grafana use React for its frontend?
How we leverage React’s features at Grafana
What are some pain points we have ran into with using React at Grafana
What are lessons learned from adopting React for the past 5+ years?
Track Slowdowns and Crashes in your React apps
React Advanced Conference 2021React Advanced Conference 2021
8 min
Track Slowdowns and Crashes in your React apps
In this lightning talk, you will see:The lack of visibility on React applicationsHow to install the Sentry React SDKHow Sentry can help you identify errors and slowdowns within your React App so you can see faster, solve quicker and continuously learn from your applications