Using Rollbar in React

Welcome to the React Summit and thank you for attending. I want to show you how to use Rollbar in React today. First, for those who aren't familiar, let me introduce you to Rollbar.

Rollbar is the leader in continuous code improvement used by some of the best technology companies in the world. We use our industry-leading grouping technology and best real-time performance to turn your error messages and stack traces into actionable items. We track items to specific versions and back to the source code itself, with source code control integration along with context and telemetry data so you can prove your code quickly. With 39 integrations and counting to go along with our 40-plus supported languages and frameworks, Rollbar will work for any development team out there.

I'm Jeff Hoffman. I'm the technical leader for growth at Rollbar, where I started last September. I first started using React when I was an Intuit back in 2014, when my LA Kings also won their second Stanley Cup in three years, and I've been using React almost exclusively since 2015, which is why I'm excited to announce the new Rollbar for React SDK, designed to bring very React-centric features for integrating Rollbar into your React apps with the declarative API supporting the latest React API capabilities and the flexibility to customize Rollbar in a React-oriented way.

We start with a new way to initialize Rollbar using the Provider component. The Provider from Rollbar React should be very familiar as it follows a common React pattern. With this way, all we need to get started is to create a Rollbar configuration and pass it to the Provider, which will initialize Rollbar and make it available to the React tree below it. Because we wanna remain flexible, you can also pass your own instance to the Provider by instantiating it first and using the instance property. The Provider even works with React Native using the Rollbar React Native SDK package. We'll use the Provider's instance property again, but this time, after we create the Rollbar React Native client, we'll pass the underlying Rollbar JS SDK instance into our Provider. The new Provider makes initializing Rollbar and plugging it into your React app very easy. The support for multiple providers for large and complex apps that may use different Rollbar projects within the same website.

Next, we have a new Rollbar error boundary that you can use to automatically capture and log React errors to Rollbar. With our Provider in place, it's as simple as including it somewhere in your React tree to wrap an error boundary around anything below it. Again, to provide flexibility to meet your specific needs, the error boundary offers several props for fine-grained control over the behavior. The default behavior is to log everything at the error level with no additional message beyond the message from the error, but you can change the level of all logs from the error boundary or set a specific message to be included in all logs sent by the error boundary. Additionally, you can add extra data to each log. And for the ultimate flexibility, you can provide functions to those same properties that allow total control over the behavior of the error boundary. Each function will receive the error and info with a component stack that's received by the error boundary when an error is done.

Finally, the error boundary makes it easy to have a fallback UI displayed when a React error occurs. This allows a nice display to your users when the UI would otherwise be broken and unusable. Simply pass a component to the fallback UI prop of the error boundary, and it'll receive the error in a reset error function that can clear the error boundary's error condition. And like the other props, fallback UI accepts a function that it will call with error in reset error ARDS, and expects a return of a component for display. The new error boundary with its properties for customization make it super easy to automatically log React errors to rollbar.

Finally, the error boundary supports nesting so that you can fence off any areas in your app you need for different handling of errors. Server side developers know when using rollbar they can set the context for their logs and messages, and search for that context in rollbar. While this is also available in the browser JavaScript SDK, we thought we'd make it more convenient and fitting for React apps with a few conveniences for single page apps like the rollbar context component.

Here's an example of using the rollbar context with React router to set an appropriate context based on the matching route path in a declarative way. As another convenience, we had the new history context listener by using the history context and wrapping an instance of rollbar. We can create a history listener that will automatically change the rollbar context based on the location and history. With the total flexibility, it has two options when creating a listener to format the context and filter out some changes.

In addition, we have a third way to set the rollbar context, especially useful in functional components is the use rollbar context hook. Here we can see setting the rollbar context using this hook within several different functional components. And setting and switching the rollbar context makes it much easier to hone in on the sources of issues in your code. Rollbar React gives you multiple ways to set the rollbar context so you can take advantage.

Yes, we have more hooks to share starting with the obvious use rollbar hook. The use rollbar hook does just that, lets you use your rollbar instance in your functional component. In rollbar, it's important to know which of your users are being affected by an item, so we have a convenience hook called use rollbar person to make that identification easy. Simply call the use rollbar person with an object that has the keys you want to track for identifying the person and it will be set in your rollbar configuration for all subsequent logs and messages.

And last but not least, we wanna make it even easier to capture telemetry events in your functional components by using the use rollbar capture event hook. While rollbar already automatically captures a ton of telemetry events like all XHR call requests, you can add additional telemetry to your app to create breadcrumbs useful for divining the cause of an item. Rest assured, it won't fire on every render only when there is a change to the data associated with the event. With more convenience to use rollbar in your functional components with the new rollbar hooks, we want you to take advantage of all the rich capabilities rollbar provides.

So I hope you enjoyed this first ever tour of the new rollbar for React SDK that allows you to use rollbar and learn the react way you're used to developing apps so the declarative API you're used to by using the provider error boundary and rollbar context components, as well as the convenience to the new rollbar React hooks that make it easier to get the full capabilities of your rollbar integration, knowing you have the flexibility easily customize behavior rollbar and the way you're used to by passing props.

You can find the source code for the rollbar React SDK on GitHub. As with all rollbar products and open source SDKs, we're looking for your feedback on how we can improve it to meet your needs. Please use the URL here with the Git Nation promo code when signing up for rollbar so that you can get a free full month beyond the normal trial period. And please attend David's amazing workshop on April 19, as he'll get you fully signed up and integrated with the deep dive on many of the features of rollbar you can use to improve your code today.

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