Découvrez comment intégrer les journaux backend de Sentry aux rejeux de session d’OpenReplay afin d’étendre vos capacités de surveillance et de débogage.

Rendez-vous sur Sentry > Account > API > Auth Tokens et générez un Auth Token avec les autorisations suivantes :

• event:read
• org:read
• project:read

Vous utiliserez ce token à l’étape suivante lors de l’activation de votre intégration Sentry dans le tableau de bord OpenReplay.

1. Copiez vos slugs d’organisation et de projet :

• Allez sur la page Projects dans votre tableau de bord Sentry.
• Copiez votre organization_slug et votre project_slug.

2. Configurez l’intégration dans OpenReplay :

• Dans OpenReplay, accédez à Preferences > Integrations.
• Localisez la carte d’intégration Sentry.
• Saisissez votre organization_slug, votre project_slug et l’Auth Token que vous avez généré à l’étape 1.

Pour qu’OpenReplay associe un événement Sentry à la session utilisateur enregistrée, l’événement doit être étiqueté avec un identifiant de session unique, openReplaySession.id.

Si vous utilisez Sentry dans votre application frontend, vous pouvez suivre l’exemple ci-dessous.

Remarque : tracker.start() est asynchrone et renvoie une Promise. Vous devez attendre qu’elle soit résolue avant de tenter d’obtenir l’identifiant de session.

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

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

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

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

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

Si vous utilisez le SDK Sentry dans votre backend, l’identifiant de session doit être propagé depuis votre frontend vers votre backend à chaque requête que vous souhaitez suivre. Cela peut se faire à l’aide d’un en-tête HTTP personnalisé.

Code frontend pour envoyer l’identifiant de session

import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

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

Si vous souhaitez relier l’URL de l’enregistrement OpenReplay à Sentry et l’afficher sous forme d’étiquette, vous pouvez le faire en ajoutant l’étiquette openReplaySessionURL.

import * as Sentry from "@sentry/browser";
import { tracker } from '@openreplay/tracker';

tracker.configure({
  projectKey: 'YOUR_PROJECT_KEY',
  ingestPoint: "https://openreplay.mydomain.com/ingest", // when dealing with the self-hosted version of OpenReplay
});

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

Si vous rencontrez des problèmes, rejoignez notre Slack ou consultez notre Forum et obtenez de l’aide auprès de notre communauté.