Extending Sentry with LogRocket

If you’re using Sentry, then you already know that it’s one of the best tools for tracking errors in JavaScript apps. By adding just a few lines of code, Sentry will alert you whenever important errors happen in your app, and help you understand how often they are occurring in production.

But error reporting alone has a few limitations. It is often difficult to understand an error’s impact, since many have no actual effect on users. And for hard-to-fix exceptions, error reports lack enough context to figure out the root-cause.

That’s where LogRocket comes in. LogRocket is the first logging tool built for front-end JavaScript apps. After adding a few lines of code, LogRocket captures console logs, network requests, Redux actions/state, and more, giving complete context on every bug.

In addition, LogRocket records the HTML/CSS in your app, letting you replay a pixel-perfect video to see if an exception actually impacted user experience.

Integrating Sentry and LogRocket

Integrating Sentry and LogRocket lets you see a LogRocket “session” for every error in Sentry. Here’s how it works:

1. Create a free account at https://app.logrocket.com and follow the quickstart guide.
2. Assuming you already have Raven (Sentry’s JavaScript client) installed, this code snippet adds a LogRocket recording URL to each Sentry report.

Raven.setDataCallback(function (data) {
  data.extra.sessionURL = LogRocket.sessionURL;
  return data;
});

That’s it! The next time you have an error in your app that triggers Sentry, you will see this extra field in the bottom of the Sentry report.

Clicking on the sessionURL link will take you to the LogRocket session from when that error occurred. Here is what a LogRocket session looks like:

On top, we see network requests, with the waterfall chart showing their relative timings. Clicking on a request shows the associated headers and body, as well as the response from the server.

In the lower-left we see the pixel-perfect session video. This “video” is actually a reconstruction of the DOM, so you can inspect the HTML/CSS to understand visual bugs, or play it back at 2x speed to get a quick overview of what a user did to trigger a bug.

Finally, in the lower-right we see the console viewer. This shows all the console logs, warnings, and errors in the app. If you’re using Redux, this also shows actions and lets you inspect state at any point in time.

Summing it up

Integrating LogRocket into your Sentry workflow helps give you extra context to solve bugs quickly and easily. To get started visit https://logrocket.com.