Как интегрировать Sentry с OpenReplay и видеть ошибки бэкенда рядом с записями сессий.

Перейдите в Sentry > Account > API > Auth Tokens и сгенерируйте токен с правами event:read, org:read и project:read. Последнее будет использовано на следующем шаге при включении интеграции с Sentry в панели управления OpenReplay.

Скопируйте ваши organization_slug и project_slug со страницы Projects в панели управления Sentry.

Затем вставьте их в панель управления OpenReplay в разделе ‘Preferences > Integration’ вместе с токеном, который вы сгенерировали ранее на шаге 1.

Чтобы OpenReplay мог связать событие Sentry с записанной пользовательской сессией, событие Sentry должно быть помечено уникальным токеном.

Если вы используете Sentry на своём фронтенде, вы можете следовать приведённому ниже примеру.

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

Или в случае использования сниппета:

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

В противном случае, если вы используете SDK Sentry для бэкенда, токен сессии должен передаваться с вашего фронтенда при каждом запросе, который вы хотите отслеживать. Это можно сделать с помощью пользовательского HTTP-заголовка. В приведённом ниже примере мы используем API fetch для отправки этого заголовка.

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

Вы также можете использовать Fetch Plugin от OpenReplay, чтобы автоматически устанавливать заголовок для каждого отслеживаемого запроса.

Затем вы можете извлечь openReplaySessionToken из заголовка и добавить его в ваш scope Sentry (желательно с помощью middleware или декоратора).

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

Имя тега должно быть в точности openReplaySessionToken.

Если вы хотите связать URL записи OpenReplay с Sentry и отобразить его в виде тега, вот пример того, как это сделать:

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

Если у вас возникнут какие-либо проблемы, подключайтесь к нашему Slack или загляните на наш Форум и получите помощь от нашего сообщества.