Comment intégrer Sentry à OpenReplay et voir les erreurs backend aux côtés des enregistrements de sessions.

Rendez-vous sur Sentry > Account > API > Auth Tokens et générez le jeton avec les autorisations event:read, org:read et project:read. Cette dernière sera utilisée à l’étape suivante lors de l’activation de votre intégration Sentry dans le tableau de bord OpenReplay.

Copiez votre organization_slug et votre project_slug depuis la page Projects de votre tableau de bord Sentry.

Collez-les ensuite dans le tableau de bord OpenReplay, sous ‘Preferences > Integration’, avec le jeton que vous avez généré précédemment à l’étape 1.

Pour qu’OpenReplay puisse associer un événement Sentry à la session utilisateur enregistrée, l’événement Sentry doit être étiqueté avec un jeton unique.

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

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

Ou dans le cas du snippet :

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

Sinon, si vous utilisez le SDK Sentry pour le backend, le jeton de session doit être propagé depuis votre frontend à chaque requête que vous souhaitez suivre. Cela peut se faire à l’aide d’un en-tête HTTP personnalisé. Dans l’exemple ci-dessous, nous utilisons l’API fetch pour envoyer cet en-tête.

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

Vous pouvez également utiliser le Fetch Plugin d’OpenReplay pour définir automatiquement l’en-tête à chaque requête de suivi.

Vous pouvez ensuite extraire le openReplaySessionToken de l’en-tête et l’ajouter à votre scope Sentry (idéalement à l’aide d’un middleware ou d’un décorateur).

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

Le nom de l’étiquette doit être exactement openReplaySessionToken.

Si vous souhaitez relier l’URL de l’enregistrement OpenReplay à Sentry et l’afficher sous forme d’étiquette, voici un exemple de la façon de procéder :

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

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