تعرّف على كيفية دمج سجلات الواجهة الخلفية الخاصة بـ Sentry مع عمليات إعادة تشغيل الجلسات في OpenReplay لتوسيع قدراتك في المراقبة وتصحيح الأخطاء.

انتقل إلى Sentry > Account > API > Auth Tokens وأنشئ رمز مصادقة بالأذونات التالية:

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

ستستخدم هذا الرمز في الخطوة التالية عند تمكين تكامل Sentry في لوحة تحكم OpenReplay.

1. انسخ معرّفات (Slugs) المنظمة والمشروع الخاصة بك:

• انتقل إلى صفحة Projects في لوحة تحكم Sentry.
• انسخ organization_slug و project_slug الخاصين بك.

2. قم بتكوين التكامل في OpenReplay:

• في OpenReplay، انتقل إلى Preferences > Integrations.
• حدد بطاقة تكامل Sentry.
• أدخل organization_slug و project_slug ورمز المصادقة الذي أنشأته في الخطوة 1.

لكي يتمكن OpenReplay من ربط حدث Sentry بجلسة المستخدم المسجَّلة، يجب وسم الحدث بمعرّف جلسة فريد، وهو openReplaySession.id.

إذا كنت تستخدم Sentry في تطبيق الواجهة الأمامية لديك، يمكنك اتّباع المثال أدناه.

ملاحظة: إنّ tracker.start() غير متزامن ويُرجِع Promise. يجب عليك الانتظار حتى يتم حلّه قبل محاولة الحصول على معرّف الجلسة.

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

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

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

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 في الواجهة الخلفية لديك، فيجب تمرير معرّف الجلسة من الواجهة الأمامية إلى الواجهة الخلفية في كل طلب ترغب في تتبّعه. يمكن القيام بذلك باستخدام رأس HTTP مخصّص.

كود الواجهة الأمامية لإرسال معرّف الجلسة

import OpenReplay from "@openreplay/tracker";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

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 OpenReplay from "@openreplay/tracker";
import * as Sentry from "@sentry/browser";

const tracker = new OpenReplay({
  projectKey: 'YOUR_PROJECT_KEY',
});

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 أو تفضّل بزيارة المنتدى واحصل على المساعدة من مجتمعنا.