了解如何将 Sentry 的后端日志与 OpenReplay 的会话回放集成，以扩展您的监控和调试能力。

前往 Sentry > Account > API > Auth Tokens，并生成一个具有以下权限的 Auth Token：

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

您将在下一步中，在 OpenReplay 仪表板里启用 Sentry 集成时使用此令牌。

1. 复制您的组织和项目 Slug：

• 前往 Sentry 仪表板中的 Projects 页面。
• 复制您的 organization_slug 和 project_slug。

2. 在 OpenReplay 中配置集成：

• 在 OpenReplay 中，导航至 Preferences > Integrations。
• 找到 Sentry 集成卡片。
• 输入您的 organization_slug、project_slug 以及您在第 1 步中生成的 Auth Token。

为了让 OpenReplay 将 Sentry 事件与录制的用户会话相关联，该事件应使用唯一的会话 ID openReplaySession.id 进行标记。

如果您在前端应用中使用 Sentry，可以参考以下示例。

注意：tracker.start() 是异步的，并返回一个 Promise。在尝试获取会话 ID 之前，您需要等待它解析完成。

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

如果您在后端使用 Sentry SDK，则需要在每个您想要跟踪的请求中将会话 ID 从前端传播到后端。这可以通过自定义 HTTP 标头来实现。

用于发送会话 ID 的前端代码

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

如果您希望将 OpenReplay 录制的 URL 与 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，或访问我们的论坛，从我们的社区获得帮助。