كيفية دمج 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());
}

وإلا، إذا كنت تستخدم Sentry SDK للواجهة الخلفية، فيجب تمرير رمز الجلسة من واجهتك الأمامية مع كل طلب ترغب في تتبعه. يمكن إنجاز ذلك باستخدام ترويسة HTTP مخصصة. في المثال أدناه، نستخدم واجهة 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 من الترويسة وإضافته إلى نطاق Sentry الخاص بك (يُفضَّل باستخدام برمجية وسيطة أو مُزخرِف).

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

يجب أن يكون اسم الوسم تمامًا openReplaySessionToken.

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