إعادة تشغيل الجلسات

تلتقط ميزة إعادة تشغيل الجلسة في ClickStack تفاعلات المستخدمين في تطبيق الويب لديك وتعيد تكوينها، مما يتيح لك إعادة تشغيل ما رآه المستخدم وفعله أثناء جلسته بصريًا كما حدث تمامًا. وبدلًا من تسجيل فيديو، تسجّل حزمة SDK تغيّرات DOM، وحركات الماوس، والنقرات، والتمرير، وإدخالات لوحة المفاتيح، وسجلات وحدة التحكم، وطلبات الشبكة (XHR, Fetch, WebSocket)، واستثناءات JavaScript — ثم تعيد تكوين هذه التجربة في المتصفح.

ونظرًا إلى أن عمليات إعادة تشغيل الجلسات تُخزَّن في ClickHouse إلى جانب السجلات والتتبعات والمقاييس لديك، يمكنك الانتقال من مشاهدة تجربة المستخدم إلى فحص تتبعات الواجهة الخلفية واستعلامات قاعدة البيانات التي كانت وراءها — وكل ذلك ببضع نقرات فقط. وهذا يجعل إعادة تشغيل الجلسة مفيدة في استكشاف مشكلات بيئة production وإصلاحها، وفهم سلوك المستخدمين، وتحديد نقاط الاحتكاك في تجربة المستخدم، والتأكد بصريًا من المشكلات التي أبلغ عنها فريق الدعم.

يتوافق ClickStack بالكامل مع OpenTelemetry، لذا يمكنك إرسال بيانات القياس عن بُعد للمتصفح (التتبعات والاستثناءات) باستخدام OpenTelemetry JavaScript SDK القياسي أو أيٍّ من ClickStack language SDKs. ومع ذلك، تتطلب ميزة إعادة تشغيل الجلسة استخدام ClickStack Browser SDK (@hyperdx/browser)، إذ يوسّع OpenTelemetry SDK بإضافة تسجيل الجلسات، والتقاط مخرجات وحدة التحكّم، والتقاط طلبات الشبكة. وإذا كنت تحتاج فقط إلى التتبعات من دون إعادة تشغيل الجلسة، فستعمل أي حزمة SDK للمتصفح متوافقة مع OTel مع ClickStack.

تستخدم الأمثلة أدناه ClickStack Browser SDK. ولا تتطلب إضافة إعادة تشغيل الجلسة إلى تطبيقك سوى ثلاث خطوات: تثبيت الحزمة، وتهيئة SDK، ثم تُلتقط جميع تفاعلات المستخدم تلقائيًا — من دون الحاجة إلى أي تغييرات إضافية في الشيفرة.

npm install @hyperdx/browser

import HyperDX from '@hyperdx/browser';

HyperDX.init({
  url: 'http://your-otel-collector:4318',
  apiKey: 'YOUR_INGESTION_API_KEY', // احذف هذا في Managed ClickStack
  service: 'my-frontend-app',
  tracePropagationTargets: [/api.myapp.domain/i],
  consoleCapture: true,
  advancedNetworkCapture: true,
});

yarn add @hyperdx/browser

import HyperDX from '@hyperdx/browser';

HyperDX.init({
  url: 'http://your-otel-collector:4318',
  apiKey: 'YOUR_INGESTION_API_KEY', // احذف هذا في Managed ClickStack
  service: 'my-frontend-app',
  tracePropagationTargets: [/api.myapp.domain/i],
  consoleCapture: true,
  advancedNetworkCapture: true,
});

<script src="https://unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>
<script>
  window.HyperDX.init({
    url: 'http://your-otel-collector:4318',
    apiKey: 'YOUR_INGESTION_API_KEY', // احذف هذا في Managed ClickStack
    service: 'my-frontend-app',
    tracePropagationTargets: [/api.myapp.domain/i],
    consoleCapture: true,
    advancedNetworkCapture: true,
  });
</script>

يدعم Browser SDK أيضًا إخفاء المدخلات والنصوص للتطبيقات الحساسة للخصوصية، وإرفاق معلومات المستخدم حتى تتمكن من البحث في الجلسات وتصفيتها حسب المستخدم داخل ClickStack UI.

انتقل إلى Client Sessions من الشريط الجانبي الأيسر في واجهة ClickStack ‏(HyperDX). يعرض هذا القسم جميع جلسات المتصفح الملتقطة، مع مدتها وعدد الأحداث فيها.

انقر على زر التشغيل لأي جلسة لإعادة تشغيلها. يعرض منظور إعادة تشغيل الجلسة على اليمين تجربة المستخدم كما أُعيد بناؤها، وعلى اليسار مخططًا زمنيًا لأحداث المتصفح — مثل طلبات الشبكة، وسجلات وحدة التحكم، والأخطاء.

بدّل بين وضعي Highlighted وAll Events لضبط مستوى التفاصيل المعروض على المخطط الزمني. تُميَّز الأخطاء باللون الأحمر، ويؤدي النقر على أي حدث إلى الانتقال بإعادة تشغيل الجلسة إلى تلك النقطة من الجلسة.

عند تحديد طلب شبكة أو خطأ في المخطط الزمني للجلسة، يمكنك النقر للانتقال إلى علامة التبويب Trace لتتبّع الطلب عبر خدماتك الخلفية — مع الاطلاع على السجلات ووحدات span واستعلامات قاعدة البيانات المرتبطة التي نتجت عن تفاعل المستخدم هذا.

يعمل ذلك لأن إعداد tracePropagationTargets يربط وحدات span في المتصفح بوحدات span على الخادم عبر ترويسة traceparent، مما ينشئ تتبّعًا موزعًا ومترابطًا يبدأ من نقرة المستخدم ويمتد حتى قاعدة البيانات. وللاطلاع على شرح عملي مفصل لهذا الأمر، بما في ذلك إضافة OpenTelemetry إلى كلٍّ من الواجهة الأمامية والخلفية، راجع Instrumenting your NextJS application with OpenTelemetry and ClickStack.

يعمل هذا الربط في الاتجاه الآخر أيضًا. عند عرض تتبّع في واجهة Search، انقر عليه لفتح تفاصيله، ثم اختر علامة التبويب إعادة تشغيل الجلسة لترى بالضبط ما كان المستخدم يعيشه وقت ذلك التتبّع. ويكون هذا مفيدًا بشكل خاص عند التحقيق في الأخطاء أو الطلبات البطيئة — إذ يمكنك البدء من المشكلة في الـbackend ورؤية منظور المستخدم على الفور.

تُخزَّن بيانات إعادة تشغيل الجلسات في جدول hyperdx_sessions مخصّص في ClickHouse، بمعزل عن السجلات والتتبعات. ويمثّل كل حدث جلسة صفًا يتضمّن الحقل Body الذي يحتوي على حمولة الحدث، والخريطة LogAttributes التي تخزّن البيانات الوصفية للحدث. ويحتفظ العمودان Body وLogAttributes معًا بتفاصيل أحداث الجلسة الفعلية المستخدمة لإعادة إنشاء إعادة التشغيل.

للاطلاع على معلومات مخطط الجدول كاملةً، راجع الجداول والمخططات المستخدمة في ClickStack.

هناك طريقتان لمشاهدة إعادة تشغيل الجلسة أثناء العمل:

• مثال مباشر — زُر clickpy.clickhouse.com، وتفاعل مع التطبيق، ثم اعرض إعادة تشغيل الجلسة الخاص بك على play-clickstack.clickhouse.com ضمن المصدر ClickPy Sessions. ولمعرفة تفاصيل كيفية تهيئة ClickPy باستخدام OpenTelemetry، راجع تدوينة المدوّنة تهيئة تطبيق NextJS الخاص بك باستخدام OpenTelemetry وClickStack.
• عرض توضيحي محلي — يشرح العرض التوضيحي لـ إعادة تشغيل الجلسة كيفية تهيئة تطبيق تجريبي خطوة بخطوة، بما في ذلك تشغيل ClickStack محليًا وعرض تسجيلات الجلسات الخاصة بك.

• عرض توضيحي لإعادة تشغيل الجلسات — تطبيق عرض توضيحي محلي تفاعلي مع إرشادات خطوة بخطوة
• مرجع Browser SDK — خيارات SDK الكاملة، وخرائط المصدر، والإجراءات المخصصة، والتهيئة المتقدمة
• البحث — صياغة البحث لتصفية الجلسات والأحداث
• لوحات المعلومات — إنشاء تصورات ولوحات معلومات من بيانات الجلسات وبيانات التتبّع
• التنبيهات — إعداد تنبيهات للأخطاء وزمن الاستجابة وإشارات أخرى
• معمارية ClickStack — كيف تتكامل ClickHouse وHyperDX وOTel collector معًا