JavaScript للمتصفح

​

البدء

npm install @hyperdx/browser

import HyperDX from '@hyperdx/browser';

HyperDX.init({
    url: '<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>',
    apiKey: '<YOUR_INGESTION_API_KEY>', // احذفها عند استخدام Managed ClickStack
    service: 'my-frontend-app',
    tracePropagationTargets: [/api.myapp.domain/i], // حدّده لربط التتبعات من الواجهة الأمامية بطلبات الواجهة الخلفية
    consoleCapture: true, // التقاط سجلات وحدة التحكّم (القيمة الافتراضية false)
    advancedNetworkCapture: true, // التقاط الرؤوس والمتن الكامل لطلبات HTTP واستجاباته (القيمة الافتراضية false)
});

<script src="//www.unpkg.com/@hyperdx/browser@0.21.0/build/index.js"></script>
<script>
  window.HyperDX.init({
    url: '<YOUR_OTEL_COLLECTOR_HTTP_ENDPOINT>',
    apiKey: '<YOUR_INGESTION_API_KEY>', // احذفها عند استخدام Managed ClickStack
    service: 'my-frontend-app',
    tracePropagationTargets: [/api.myapp.domain/i], // حدّده لربط التتبعات من الواجهة الأمامية بطلبات الواجهة الخلفية
  });
</script>

​

الخيارات

• apiKey - مفتاح واجهة برمجة تطبيقات للإدخال الخاص بك في ClickStack.
• service - اسم الخدمة الذي ستظهر به الأحداث في واجهة مستخدم HyperDX.
• tracePropagationTargets - قائمة بأنماط Regex لمطابقتها مع طلبات HTTP لربط تتبعات الواجهة الأمامية والخلفية، وسيضيف ذلك ترويسة traceparent إضافية إلى جميع الطلبات التي تطابق أيًا من الأنماط. يجب ضبط هذا على نطاق واجهة برمجة تطبيقات للواجهة الخلفية لديك (مثلًا api.yoursite.com).
• consoleCapture - (اختياري) التقاط جميع سجلات وحدة التحكّم (القيمة الافتراضية false).
• advancedNetworkCapture - (اختياري) التقاط رؤوس الطلبات/الاستجابات كاملةً والأجسام (القيمة الافتراضية false).
• url - (اختياري) عنوان URL لـ OpenTelemetry Collector، وهو مطلوب فقط للمثيلات المستضافة ذاتيًا.
• maskAllInputs - (اختياري) ما إذا كان يجب إخفاء جميع حقول الإدخال في إعادة تشغيل الجلسة (القيمة الافتراضية false).
• maskAllText - (اختياري) ما إذا كان يجب إخفاء كل النصوص في إعادة تشغيل الجلسة (القيمة الافتراضية false).
• disableIntercom - (اختياري) ما إذا كان يجب تعطيل تكامل Intercom (القيمة الافتراضية false)
• disableReplay - (اختياري) ما إذا كان يجب تعطيل إعادة تشغيل الجلسة (القيمة الافتراضية false)

​

تهيئة إضافية

​

إرفاق معلومات المستخدم أو البيانات الوصفية

HyperDX.setGlobalAttributes({
  userId: user.id,
  userEmail: user.email,
  userName: user.name,
  teamName: user.team.name,
  // Other custom properties...
});

​

الالتقاط التلقائي لأخطاء حدود الأخطاء في React

// Import your ErrorBoundary (we're using react-error-boundary as an example)
import { ErrorBoundary } from 'react-error-boundary';

// This will hook into the ErrorBoundary component and capture any errors that occur
// within any instance of it.
HyperDX.attachToReactErrorBoundary(ErrorBoundary);

​

إرسال الإجراءات المخصّصة

HyperDX.addAction('Form-Completed', {
  formId: 'signup-form',
  formName: 'Signup Form',
  formType: 'signup',
});

​

تفعيل التقاط حركة الشبكة ديناميكيًا

HyperDX.enableAdvancedNetworkCapture();

​

تفعيل توقيت الموارد لطلبات CORS

var cors = require('cors');
var onHeaders = require('on-headers');

// ... all your stuff

app.use(function (req, res, next) {
  onHeaders(res, function () {
    var allowOrigin = res.getHeader('Access-Control-Allow-Origin');
    if (allowOrigin) {
      res.setHeader('Timing-Allow-Origin', allowOrigin);
    }
  });
  next();
});
app.use(cors());