AWS ushered in a new landscape for deploying JavaScript applications using Node.js hosted in AWS Lambda, and since then the management simplicity that it provides has made serverless applications and APIs grow exponentially in both popularity and use cases. However, operationally for many starting out, troubleshooting issues can be painful. I'll walk through some techniques to make this easier and provide an evolution of how we can get to a better solution with tips and tools you can use in your serverless deployments right away.

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 Hoffer and I'm the technical leader for growth in Rollbar where I started last September. I first started using React when I was into it back in 2014, when my LA Kings also won their second Stanley Cup in three years. 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 a 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, pass it to the provider, which will initialize Rollbar and make it available to the React tree below it. Because we want to 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, with support for multiple providers for large and complex apps that may use different Rollbar projects within the same website. Next, we have the 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. 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 components stack that's received by the error boundary when an error is shown. 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 will receive the error and a reset error function that can clear the error boundaries error condition. Like the other props, fallback UI accepts a function that it will call with error and 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 roll bar. Finally, the error boundary supports nesting so that you can fence off any errors and areas in your app you need for different handling of errors. Service side developers know when using roll bar, they can set the context for their logs and messages and search for that context in roll bar. 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 roll bar context component. Here's an example of using the roll bar context with React router to set an appropriate context based on the matching route path in a declarative way. As another convenience, we have the new history context listener. By using the history context and wrapping an instance of roll bar, we can create a history listener that will automatically change the roll bar context based on the location in 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 roll bar context, especially useful in functional components, is the use roll bar context hook. Here we can see setting the roll bar context using this hook within several different functional components. The setting and switching the roll bar context makes it much easier to hone in on the sources of issues in your code. Roll bar React gives you multiple ways to set the roll bar context so you can take advantage. Yes, we have more hooks to share starting with the obvious use roll bar hook. The use roll bar hook does just that, lets you use your roll bar instance in your functional component. In roll bar, it's important to know which of your users are being affected by an item. We have a convenience hook called use roll bar person to make that identification easy. Simply call the use roll bar person with an object that has the keys you want to track for identifying the person, and it will be set in your roll bar configuration for all subsequent logs and messages. Last but not least, we want to make it even easier to capture telemetry events in your functional components by using the use roll bar capture event hook. While roll bar 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, these roll bar in your functional components with the new roll bar hooks, we want you to take advantage of all the rich capabilities roll bar provides. I hope you enjoyed this first ever tour of the new roll bar for React SDK, that allows you to use roll bar in the React way you're used to developing apps. The declarative API you're used to by using the provider error boundary and roll bar context components, as well as the convenience of the new roll bar React hooks that make it easier to get the full capabilities of your roll bar integration, knowing you have the flexibility to easily customize behavior roll bar in the way you're used to by passing props. You can find the source code for the roll bar React SDK on GitHub. As with all roll bar 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 roll bar, so you can get a free full month beyond the normal trial period. Please attend David's amazing workshop on April 19th, as he'll get you fully signed up and integrated with a deep dive on many of the features of roll bar you can use to improve your code today.