Using Rollbar in React

Bienvenidos al React Summit y gracias por asistir. Quiero mostrarles cómo usar Rollbar en React hoy. Primero, para aquellos que no están familiarizados, permítanme presentarles Rollbar.

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

Soy Jeff Hoffman. Soy el líder técnico de crecimiento en Rollbar, donde comencé el pasado septiembre. Comencé a usar React por primera vez cuando estaba en Intuit en 2014, cuando mis LA Kings también ganaron su segunda Stanley Cup en tres años, y he estado usando React casi exclusivamente desde 2015, por lo que estoy emocionado de anunciar el nuevo Rollbar para React SDK, diseñado para traer características muy centradas en React para integrar Rollbar en sus aplicaciones React con la API declarativa que soporta 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 usando el componente Provider. El Provider de Rollbar React debería ser muy familiar ya que sigue un patrón común de React. De esta manera, todo lo que necesitamos para comenzar es crear una configuración de Rollbar y pasarla al Provider, que inicializará Rollbar y lo hará disponible para el árbol de React debajo de él. Porque queremos seguir siendo flexibles, también puede pasar su propia instancia al Provider instanciándola primero y usando la propiedad de instancia. El Provider incluso funciona con React Native usando el paquete Rollbar React Native SDK. Usaremos nuevamente la propiedad de instancia del Provider, pero esta vez, después de crear el cliente Rollbar React Native, pasaremos la instancia subyacente de Rollbar JS SDK a nuestro Provider. El nuevo Provider hace que inicializar Rollbar e integrarlo en su aplicación React sea muy fácil. El soporte para múltiples providers 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 usar para capturar automáticamente y registrar 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 varios props para un control detallado sobre el comportamiento. El comportamiento predeterminado es registrar todo al nivel de error sin 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 para ser incluido en todos los registros enviados por el límite de error. Además, puede agregar datos adicionales a cada registro. Y para la máxima flexibilidad, 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 e información con una pila de componentes que recibe el límite de error cuando se produce un error.

Finalmente, el límite de error facilita tener una interfaz de usuario de respaldo que se muestra cuando ocurre un error de React. Esto permite una buena visualización para sus usuarios cuando la interfaz de usuario de otro modo estaría rota e inutilizable. Simplemente pase un componente a la prop de interfaz de usuario de respaldo del límite de error, y recibirá el error en una función de restablecimiento de error que puede borrar la condición de error del límite de error. Y al igual que los otros props, la interfaz de usuario de respaldo acepta una función que llamará con error en restablecer error ARDS, y espera un retorno de un componente para mostrar. El nuevo límite de error con sus propiedades para personalización hace que sea muy fácil registrar automáticamente errores de React en Rollbar.

Finalmente, el límite de error admite anidación para que puedas delimitar cualquier área en tu aplicación que necesites para un manejo diferente de errores. Los desarrolladores del lado del servidor saben que al usar rollbar pueden establecer el contexto para sus registros y mensajes, y buscar ese contexto en rollbar. Aunque esto también está disponible en el navegador JavaScript SDK, pensamos que lo haríamos más conveniente y adecuado para aplicaciones React con algunas comodidades para aplicaciones de una sola página como el componente de contexto de rollbar.

Aquí hay un ejemplo de uso del contexto de rollbar con React router para establecer un contexto apropiado basado en la ruta coincidente de una manera declarativa. Como otra conveniencia, tuvimos el nuevo listener de contexto de historial usando el contexto de historial y envolviendo una instancia de rollbar. Podemos crear un listener de historial que cambiará automáticamente el contexto de rollbar basado en la ubicación y el historial. Con la 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 es el hook de contexto de uso de rollbar. Aquí podemos ver estableciendo el contexto de rollbar usando este hook dentro de varios componentes funcionales diferentes. Y establecer y cambiar el contexto de rollbar hace que sea mucho más fácil enfocarse en las fuentes de problemas en tu código. Rollbar React te ofrece múltiples formas de establecer el contexto de rollbar para que puedas aprovechar.

Sí, tenemos más hooks para compartir comenzando con el obvio hook de uso de rollbar. El hook de uso de rollbar hace precisamente eso, te permite usar tu instancia de rollbar en tu componente funcional. En rollbar, es importante saber cuáles de tus usuarios están siendo afectados por un elemento, por lo que tenemos un hook de conveniencia llamado use rollbar person para facilitar esa identificación. Simplemente llama al use rollbar person con un objeto que tenga las claves que deseas rastrear para identificar a la persona y se establecerá en tu configuración de rollbar para todos los registros y mensajes subsiguientes.

Y por último, pero no menos importante, queremos que sea aún más fácil capturar eventos de telemetría en tus componentes funcionales usando el hook de captura de eventos de uso de rollbar. Aunque rollbar ya captura automáticamente una gran cantidad de eventos de telemetría como todas las solicitudes de llamada 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 conveniencia para usar rollbar en tus componentes funcionales con los nuevos hooks de rollbar, queremos que aproveches todas las ricas capacidades que rollbar proporciona.

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

Puedes encontrar el código fuente para el rollbar React SDK en GitHub. Como con todos los productos de rollbar y SDKs de código abierto, estamos buscando tus comentarios sobre cómo podemos mejorarlo para satisfacer tus necesidades. Por favor, usa la URL aquí con el código promocional de Git Nation al registrarte en rollbar para que puedas obtener un mes completo gratis más allá del período de prueba normal. Y por favor asiste a la increíble masterclass de David el 19 de abril, ya que te registrará completamente e integrará con el análisis profundo de 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.