Usando Rollbar en React

Rollbar es el líder en mejora continua de código utilizado por algunas de las mejores empresas de tecnología del mundo. Utilizamos nuestra tecnología líder en agrupación y el mejor rendimiento en tiempo real para convertir sus mensajes de error y trazas de pila en elementos accionables. Seguimos los elementos a versiones específicas y hasta el propio código fuente, con integración de control de código fuente junto con contexto y datos de telemetría para que pueda comprobar su código rápidamente. Con 39 integraciones y contando junto con nuestros más de 40 lenguajes compatibles y frameworks, Rollbar funcionará para cualquier equipo de desarrollo allá afuera.

Soy Jeff Hoffman. Soy el líder técnico de crecimiento en Rollbar, donde comencé en septiembre pasado. Comencé a usar React cuando estaba en Intuit en 2014, cuando mis LA Kings también ganaron su segunda Copa Stanley en tres años, y he estado usando React casi exclusivamente desde 2015, por eso estoy emocionado de anunciar el nuevo Rollbar para React SDK, diseñado para brindar características muy centradas en React para integrar Rollbar en sus aplicaciones de React con la API declarativa que admite las últimas capacidades de la API de React y la flexibilidad para personalizar Rollbar de una manera orientada a React.

Comenzamos con una nueva forma de inicializar Rollbar utilizando el componente Provider. El Provider de Rollbar para React debería ser muy familiar ya que sigue un patrón común de React. Con esta forma, todo lo que necesitamos para comenzar es crear una configuración de Rollbar y pasarla al Provider, que inicializará Rollbar y lo pondrá disponible para el árbol de React que está debajo de él. Debido a que queremos mantener la flexibilidad, también puede pasar su propia instancia al Provider mediante su instanciación previa y el uso de la propiedad de instancia. El Provider incluso funciona con React Native utilizando el paquete Rollbar React Native SDK. Usaremos la propiedad de instancia del Provider nuevamente, pero esta vez, después de crear el cliente Rollbar React Native, pasaremos la instancia subyacente del SDK Rollbar JS a nuestro Provider. El nuevo Provider facilita la inicialización de Rollbar y su integración en su aplicación de React. El soporte para múltiples proveedores para aplicaciones grandes y complejas que pueden usar diferentes proyectos de Rollbar dentro del mismo sitio web.

A continuación, tenemos un nuevo límite de error de Rollbar que puede utilizar para capturar y registrar automáticamente los errores de React en Rollbar. Con nuestro Provider en su lugar, es tan simple como incluirlo en algún lugar en su árbol de React para envolver un límite de error alrededor de cualquier cosa debajo de él. Nuevamente, para proporcionar flexibilidad para satisfacer sus necesidades específicas, el límite de error ofrece varias props para un control detallado sobre el comportamiento. El comportamiento predeterminado es registrar todo en el nivel de error sin ningún mensaje adicional más allá del mensaje del error, pero puede cambiar el nivel de todos los registros desde el límite de error o establecer un mensaje específico que se incluirá en todos los registros enviados por el límite de error. Además, puede agregar datos adicionales a cada registro. Y para una flexibilidad total, puede proporcionar funciones a esas mismas propiedades que permiten un control total sobre el comportamiento del límite de error. Cada función recibirá el error y la información con una pila de componentes que recibe el límite de error cuando se produce un error.

Por último, el límite de error facilita la visualización de una interfaz de usuario de respaldo cuando ocurre un error de React. Esto permite una presentación agradable a sus usuarios cuando la interfaz de usuario de lo contrario estaría rota e inutilizable. Simplemente pase un componente a la prop fallback UI del límite de error, y recibirá el error en una función de reinicio de error que puede borrar la condición de error del límite de error. Y al igual que las otras props, fallback UI acepta una función que llamará con error en reset error ARDS, y espera un retorno de un componente para mostrar. El nuevo límite de error con sus propiedades de personalización

Aquí tienes un ejemplo de cómo usar el contexto de Rollbar con React Router para establecer un contexto apropiado basado en la ruta coincidente de manera declarativa. Como otra comodidad, hemos agregado el nuevo listener de contexto de historial utilizando el contexto de historial y envolviendo una instancia de Rollbar. Podemos crear un listener de historial que cambiará automáticamente el contexto de Rollbar en función de la ubicación e historial. Con total flexibilidad, tiene dos opciones al crear un listener para formatear el contexto y filtrar algunos cambios.

Además, tenemos una tercera forma de establecer el contexto de Rollbar, especialmente útil en componentes funcionales, que es el hook useRollbarContext. Aquí podemos ver cómo establecer el contexto de Rollbar usando este hook dentro de varios componentes funcionales diferentes. Y establecer y cambiar el contexto de Rollbar facilita mucho la identificación de las fuentes de problemas en tu código. Rollbar para React te ofrece múltiples formas de establecer el contexto de Rollbar para que puedas aprovecharlo al máximo.

Sí, tenemos más hooks para compartir comenzando con el obvio hook useRollbar. El hook useRollbar hace precisamente eso, te permite usar tu instancia de Rollbar en tu componente funcional. En Rollbar, es importante saber qué usuarios se ven afectados por un elemento, por lo que tenemos un hook conveniente llamado useRollbarPerson que facilita esa identificación. Simplemente llama al hook useRollbarPerson con un objeto que tenga las claves que deseas rastrear para identificar a la persona y se establecerá en la configuración de Rollbar para todos los registros y mensajes posteriores.

Y por último, pero no menos importante, queremos facilitar aún más la captura de eventos de telemetría en tus componentes funcionales utilizando el hook useRollbarCaptureEvent. Si bien Rollbar ya captura automáticamente una gran cantidad de eventos de telemetría, como todas las solicitudes de llamadas XHR, puedes agregar telemetría adicional a tu aplicación para crear migas de pan útiles para descubrir la causa de un elemento. Ten la seguridad de que no se activará en cada renderizado, solo cuando haya un cambio en los datos asociados con el evento. Con más comodidad para usar Rollbar en tus componentes funcionales con los nuevos hooks de Rollbar, queremos que aproveches todas las amplias capacidades que Rollbar ofrece.

Así que espero que hayas disfrutado de este primer recorrido del nuevo Rollbar para el SDK de React que te permite usar Rollbar y aprender la forma de React a la que estás acostumbrado a desarrollar aplicaciones con la API declarativa a la que estás acostumbrado utilizando el límite de error del proveedor y los componentes de contexto de Rollbar, así como la comodidad de los nuevos hooks de Rollbar que facilitan el aprovechamiento de todas las capacidades de tu integración de Rollbar, sabiendo que tienes la flexibilidad de personalizar fácilmente el comportamiento de Rollbar de la forma a la que estás acostumbrado pasando props.

Puedes encontrar el código fuente del Rollbar React SDK en GitHub. Como con todos los productos de Rollbar y los SDK de código abierto, esperamos tus comentarios sobre cómo podemos mejorarlo para satisfacer tus necesidades. Utiliza la URL aquí con el código promocional de Git Nation al registrarte en Rollbar para obtener un mes completo gratis más allá del período de prueba normal. Y por favor, asiste al increíble masterclass de David el 19 de abril, ya que te ayudará a registrarte completamente e integrarte con la inmersión profunda en muchas de las características de Rollbar que puedes usar para mejorar tu código hoy.

♪ Hey, oh, hey, oh, hey, hey, hey, hey, hey, hey, hey, hey. ♪ Oh, hey, oh, hey, oh, hey, hey, hey, hey, hey, hey.