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.

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 and follow the quick start 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: