Sentry

Learn how to integrate Sentry backend logs with OpenReplay session replays to extend your monitoring and debugging capabilities.

1. Generate Sentry Auth Token

Go to Sentry > Account > API > Auth Tokens and generate an Auth Token with the following permissions:

event:read
org:read
project:read

You will use this token in the next step when enabling your Sentry integration in the OpenReplay dashboard.

2. Enable Sentry integration in OpenReplay

Copy Your Organization and Project Slugs:

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

Configure integration in OpenReplay:

In OpenReplay, navigate to Preferences > Integrations.
Locate the Sentry integration card.
Enter your organization_slug, project_slug, and the Auth Token you generated in step 1.

3. Propagate openReplaySession.id

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

Frontend

If you’re using Sentry in your frontend application, you can follow the example below.

Note: tracker.start() is asynchronous and returns a Promise. You need to wait for it to resolve before attempting to get the session ID.

// JavaScript Example for for Single Page Applications (SPA):

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

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  if (sessionId) {
    Sentry.setTag("openReplaySession.id", sessionId);
  }
  // Your application code
});

Using the OpenReplay snippet

if (window.OpenReplay) {
  window.OpenReplay.start().then(() => {
    const sessionId = window.OpenReplay.getSessionID();
    if (sessionId) {
      Sentry.setTag("openReplaySession.id", sessionId);
    }
    // Your application code
  });
}

Backend

If you’re using the Sentry SDK in your backend, the session ID needs to be propagated from your frontend to your backend on each request you want to track. This can be done using a custom HTTP header.

Frontend code to send the session ID

import OpenReplay from "@openreplay/tracker";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  const headers = {
    'Content-Type': 'application/json',
  };

  if (sessionId) {
    headers['openReplaySession.id'] = sessionId;
  }

  fetch('https://www.your-backend.com/api/endpoint', {
    method: 'GET', // or 'POST', 'PUT', etc.
    headers,
    // ...other options
  })
    .then(response => {
      // Handle response
    })
    .catch(error => {
      // Handle error
    });
});

4. Attach openReplaySessionURL (Optional but useful)

If you wish to link the OpenReplay recording’s URL with Sentry and display it as a tag, you can do so by adding the openReplaySessionURL tag.

Frontend example

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

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

tracker.start().then(() => {
  const sessionId = tracker.getSessionID();
  const sessionURL = tracker.getSessionURL();

  if (sessionId) {
    // Tag Sentry events with the session ID
    Sentry.setTag("openReplaySession.id", sessionId);
  }

  if (sessionURL) {
    // Tag Sentry events with the session URL (requires OpenReplay Tracker v3.6.0+)
    Sentry.setTag("openReplaySessionURL", sessionURL);
  }

  // Your application code
});

Have questions?

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