Extending Sentry With LogRocket

DZone 's Guide to

Extending Sentry With LogRocket

Error reporting has a few limitations, but integrating Sentry and LogRocket helps by letting you see a LogRocket session for every error in Sentry. Here’s how it works.

· Performance Zone ·
Free Resource

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.

Image title

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:

Image title

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.

error tracking, logging, performance, sentry, tutorial

Published at DZone with permission of Ben Edelstein . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}