Track Slowdowns and Crashes in your React apps

Hi there, my name is Simon. I'm a Solutions Engineer at Sentry. What we focus on is code observability. With Sentry, you can understand the health of your application from the front end to the back end. Sentry is designed for all developers, meaning we support all major languages and frameworks, including and especially React.

With the Sentry SDK on your application, you can alert the necessary team members and enable developers to optimize that developer and customer experience. The Sentry platform provides multiple perspectives on the health of your application, but what we'll be focusing on today is error monitoring and performance monitoring.

With that in mind, I have a React app for us to take a look at, and it's in this ecommerce site. So let's click in and browse our products, and browse our products. Okay, it's taken a long time for this to load. We'll have to look into that a bit later, but we'll just have to continue on with the user flow here eventually. Okay, I'll add a couple items to our cart here, proceed to checkout, and I think we'll proceed to checkout. Okay, this is a horrible demo site, obviously. We encountered an error, surprise, surprise. But let's take off our end-user hat for a moment, put on our developer hat, and see what's going on. Let's open our developer tools, look at the console, reproduce it. Look at the network tab, cross-reference our source code. I mean, there's plenty of things we can do and it gets a bit tedious. Thankfully we've got Sentry set up and we can do it all in that one place. I'll show you how we got started. That's in the Sentry documentation page, docs.sentry.io. Write it down. In any case, we've got our supported platforms in this button here. Pride of place, we have React on the front page, so you don't have to go far. Click into that, it's an easy installation, NPM install or Yarn add and a few lines of code to configure it.

What this will do is get Sentry on your application, hook it on to your global error handler. As users are interacting with your application, events and transactions are sent to Sentry and that's where we can look and understand the health of our application. So during that checkout fiasco, we did get notified through an alert that was set up. We don't have time today through this lightning talk to go into alerts, but just know that it's there. We've got our summary of our error right away, including the magnitude, how many times it's happened, to how many users, contextual tags as well.

We can add our own tags if we'd like, but let's just skip ahead and go to what we're all thinking about. That's the stack trace. In a Sentry-less world, we'd get minified stack trace, which is not the funnest thing to understand. But during our build process, we've uploaded our source maps and Sentry's able to take our source maps against the stack trace that was provided and unminify in this beautiful stack trace we've got here, human-readable, highlighting the exact line that it hit on for this error. We've even got this if statement details on that, and the response that okay was false.