تلتقط ميزة إعادة تشغيل الجلسة في ClickStack تفاعلات المستخدمين في تطبيق الويب لديك وتعيد تكوينها، مما يتيح لك إعادة تشغيل ما رآه المستخدم وفعله أثناء جلسته بصريًا كما حدث تمامًا. وبدلًا من تسجيل فيديو، تسجّل حزمة SDK تغيّرات DOM، وحركات الماوس، والنقرات، والتمرير، وإدخالات لوحة المفاتيح، وسجلات وحدة التحكم، وطلبات الشبكة (XHR, Fetch, WebSocket)، واستثناءات JavaScript — ثم تعيد تكوين هذه التجربة في المتصفح.
ونظرًا إلى أن عمليات إعادة تشغيل الجلسات تُخزَّن في ClickHouse إلى جانب السجلات والتتبعات والمقاييس لديك، يمكنك الانتقال من مشاهدة تجربة المستخدم إلى فحص تتبعات الواجهة الخلفية واستعلامات قاعدة البيانات التي كانت وراءها — وكل ذلك ببضع نقرات فقط. وهذا يجعل إعادة تشغيل الجلسة مفيدة في استكشاف مشكلات بيئة production وإصلاحها، وفهم سلوك المستخدمين، وتحديد نقاط الاحتكاك في تجربة المستخدم، والتأكد بصريًا من المشكلات التي أبلغ عنها فريق الدعم.
إضافة أدوات الرصد إلى تطبيقك
@hyperdx/browser)، إذ يوسّع OpenTelemetry SDK بإضافة تسجيل الجلسات، والتقاط مخرجات وحدة التحكّم، والتقاط طلبات الشبكة. وإذا كنت تحتاج فقط إلى التتبعات من دون إعادة تشغيل الجلسة، فستعمل أي حزمة SDK للمتصفح متوافقة مع OTel مع ClickStack.
تستخدم الأمثلة أدناه ClickStack Browser SDK. ولا تتطلب إضافة إعادة تشغيل الجلسة إلى تطبيقك سوى ثلاث خطوات: تثبيت الحزمة، وتهيئة SDK، ثم تُلتقط جميع تفاعلات المستخدم تلقائيًا — من دون الحاجة إلى أي تغييرات إضافية في الشيفرة.
هيّئ SDK في موضع تضمن تحميله عند بدء تشغيل تطبيقك. على سبيل المثال، في تطبيق Next.js، قد يكون هذا ملف layout.js الجذري. يضمن ذلك بدء تسجيل الجلسة فورًا والتقاط تجربة المستخدم بالكامل.
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,
});
بالنسبة إلى التطبيقات التي لا تستخدم bundler، أدرِج SDK مباشرةً عبر وسم script. يوفّر ذلك المتغير العام HyperDX، الذي يمكن استخدامه بالطريقة نفسها المستخدمة مع حزمة NPM.<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>
يُعد الخيار tracePropagationTargets أساسيًا لربط إعادة تشغيل الجلسة بتتبعات backend — اضبطه على نطاق API الخاص بك لتمكين distributed tracing كامل من الواجهة الأمامية إلى الواجهة الخلفية. للاطلاع على قائمة كاملة بخيارات SDK، بما في ذلك عناصر التحكّم في الخصوصية وcustom actions وحدود أخطاء React وsource maps، راجع مرجع Browser SDK. tracePropagationTargets يربط وحدات span في المتصفح بوحدات span على الخادم عبر ترويسة traceparent، مما ينشئ تتبّعًا موزعًا ومترابطًا يبدأ من نقرة المستخدم ويمتد حتى قاعدة البيانات. وللاطلاع على شرح عملي مفصل لهذا الأمر، بما في ذلك إضافة OpenTelemetry إلى كلٍّ من الواجهة الأمامية والخلفية، راجع Instrumenting your NextJS application with OpenTelemetry and ClickStack.
يعمل هذا الربط في الاتجاه الآخر أيضًا. عند عرض تتبّع في واجهة Search، انقر عليه لفتح تفاصيله، ثم اختر علامة التبويب إعادة تشغيل الجلسة لترى بالضبط ما كان المستخدم يعيشه وقت ذلك التتبّع. ويكون هذا مفيدًا بشكل خاص عند التحقيق في الأخطاء أو الطلبات البطيئة — إذ يمكنك البدء من المشكلة في الـbackend ورؤية منظور المستخدم على الفور.
كيفية تخزين بيانات الجلسة
hyperdx_sessions مخصّص في ClickHouse، بمعزل عن السجلات والتتبعات. ويمثّل كل حدث جلسة صفًا يتضمّن الحقل Body الذي يحتوي على حمولة الحدث، والخريطة LogAttributes التي تخزّن البيانات الوصفية للحدث. ويحتفظ العمودان Body وLogAttributes معًا بتفاصيل أحداث الجلسة الفعلية المستخدمة لإعادة إنشاء إعادة التشغيل.
للاطلاع على معلومات مخطط الجدول كاملةً، راجع الجداول والمخططات المستخدمة في ClickStack.
هناك طريقتان لمشاهدة إعادة تشغيل الجلسة أثناء العمل:
