Sentry

How to integrate Sentry with OpenReplay and see backend errors alongside session recordings.

Go to Sentry > Account > API > Auth Tokens and generate the token with event:read, org:read and project:read permissions. This latter will be used in the next step when enabling your Sentry integration in OpenReplay dashboard.

Copy your organization_slug and project_slug from the Projects page in your Sentry dashboard.

Then paste them in OpenReplay dashboard under ‘Preferences > Integration’ alongside the Token you previously generated in step 1.

In order for OpenReplay to associate a Sentry event with the recorded user session, Sentry event should be tagged with unique token.

If you’re relying on Sentry on your frontend, you can follow the below example.

import OpenReplay from "@openreplay/tracker";
import * as Sentry from "@sentry/browser";

const tracker = new OpenReplay({
  projectKey: MY_PROJECT_KEY,
  onStart: ({ sessionToken }) => {
    Sentry.setTag("openReplaySessionToken", sessionToken);
  },
})

Or in case of snippet:

if (window.OpenReplay.getSessionToken()) {
  Sentry.setTag("openReplaySessionToken", window.OpenReplay.getSessionToken());
}

Otherwise, if you use Sentry SDK for backend, session token has to be propagated from your frontend on each request you want to track. This can be done using a custom HTTP header. In the below example, we use the fetch API to send that header.

const headers = {
  Accept: 'application/json',
  'Content-Type': 'application/json',
};
if (tracker.getSessionToken()) { // or window.OpenReplay instead of tracker if you're using the snippet
  headers['X-OpenReplay-SessionToken'] = tracker.getSessionToken(); // Inject openReplaySessionToken
}
fetch('www.your-backend.com', {
  'GET',
  headers,
});

You can also use OpenReplay Fetch Plugin to set the header automatically for each tracking request.

Then you can extract the openReplaySessionToken from the header and add it to your Sentry scope (ideally using a middleware or decorator).

with configure_scope() as scope:
  scope.set_tag('openReplaySessionToken', app.current_request.headers.get('X-OpenReplay-SessionToken'))

The name of the tag should be exactly openReplaySessionToken.

If you wish to link the OpenReplay recording’s URL with Sentry and display it as a tag, here is an example on how to do it:

 const tracker = new OpenReplay({
 projectKey: window.OPENREPLAY_PROJECT_KEY,
 
 onStart: ({ sessionToken, sessionID }) => {
  // This is to link from OpenReplay -> Sentry
  Sentry.setTag("openReplaySessionToken", sessionToken);
 
  // This is to link from Sentry -> OpenReplay (requires tracker v3.6.0+)
  Sentry.setTag(
    "openReplaySessionURL",
    tracker.getSessionURL();
    );
  },
});

If you encounter any issues, connect to our Slack or check out our Forum and get help from our community.