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

Перейдите в Sentry > Account > API > Auth Tokens и создайте Auth Token со следующими разрешениями:

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

Вы будете использовать этот токен на следующем шаге при включении интеграции с Sentry в панели управления OpenReplay.

1. Скопируйте слаги вашей организации и проекта:

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

2. Настройте интеграцию в OpenReplay:

• В OpenReplay перейдите в Preferences > Integrations.
• Найдите карточку интеграции Sentry.
• Введите ваш organization_slug, project_slug и Auth Token, который вы создали на шаге 1.

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

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

Примечание: tracker.start() является асинхронным и возвращает Promise. Прежде чем пытаться получить идентификатор сессии, необходимо дождаться его разрешения.

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

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

Код фронтенда для отправки идентификатора сессии

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

Если вы хотите связать URL записи OpenReplay с Sentry и отображать его в виде тега, вы можете сделать это, добавив тег 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
});

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