Sentry

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

1. Generate Sentry Auth Token

Go to

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.

2. Enable Integration in OpenReplay

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.

3. Propagate openReplaySessionToken

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

Frontend

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());
}

Backend

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

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.

4. Attach openReplaySessionURL (optional yet very useful)

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();
);
},
});

Troubleshooting

If you encounter any issues, connect to our

and get help from our community.