تصف هذه الصفحة مساحة الأسماء network ضمن خيارات حزمة تطوير JavaScript الخاصة بـ OpenReplay. وهي تتعلق بالتقاط طلبات الشبكة مثل fetch و XHR، بما في ذلك الحمولات (payloads) إذا لزم الأمر، وفحصها لاحقًا أثناء إعادة تشغيل تسجيلات الجلسات. وهذا مفيد جدًا لفهم المشكلات وإصلاحها.

network?: {
  failuresOnly: boolean;
  sessionTokenHeader: string | boolean;
  ignoreHeaders: Array<string> | boolean;
  capturePayload: boolean;
  sanitizer: (RequestResponseData) => RequestResponseData | null;
  captureInIframes: boolean;
  axiosInstances: AxiosInstance[];
  useProxy?: boolean;
	tokenUrlMatcher?: (url: string) => boolean;
}

• useProxy: يبدّل المتتبّع (tracker) من تعديل window.fetch/window.XMLRequest إلى استخدام كائنات الوكيل (proxy). القيمة الافتراضية: true.
• failuresOnly: يلتقط الطلبات التي تحمل رمز حالة HTTP بين 4xx-5xx. القيمة الافتراضية: false.
• sessionTokenHeader: في حال قمت بتمكين بعض التكاملات الخلفية لدينا (أي Sentry)، يمكنك استخدام هذا الخيار لتحديد اسم الترويسة (header) (أو تفعيل الترويسة الافتراضية ‘X-OpenReplay-SessionToken’ بضبط الخيار على true). تتم إضافة هذه الأخيرة تلقائيًا إلى كل طلب fetch/XHR لتحتوي على قيمة sessionToken الخاصة بـ OpenReplay. القيمة الافتراضية: false.
• tokenUrlMatcher: يحصل على url الطلب الحالي للمتتبّع ويعيد قيمة boolean. في حال وجوده، لن يتم تطبيق sessionTokenHeader إلا عندما تُعيد هذه الدالة القيمة true. القيمة الافتراضية: undefined.
• ignoreHeaders: يساعد على تحديد قائمة بالترويسات التي لا ترغب في التقاطها. اضبط قيمته على false لالتقاطها جميعًا (true لعدم التقاط أي منها). القيمة الافتراضية: ['Cookie', 'Set-Cookie', 'Authorization'] بحيث لا يتم التقاط الترويسات الحساسة.
• capturePayload: يخزّن حمولات نص الطلب/الاستجابة. قد يكون هذا مفيدًا جدًا لأغراض استكشاف الأخطاء وإصلاحها، ولكنه قد يصبح مرهقًا على استخدام الشبكة إذا كان تطبيقك يستخدم طلبات Fetch/XHR على نطاق واسع. القيمة الافتراضية: false.

• captureInIframes: لتعطيل تتبّع الشبكة داخل إطارات iFrame. القيمة الافتراضية: true.
• axiosInstances: مفيد في حالات محددة لتتبّع نسخ axios المخصصة، إذا كان الإعداد المعتاد (proxy api) لا يعمل. القيمة الافتراضية: undefined.
• sanitizer: ينقّي البيانات الحساسة من طلب/استجابة Fetch/XHR أو يتجاهل الطلب بالكامل. يمكنك تنقيح الحقول في كائن الطلب عن طريق تعديله ثم إعادته من الدالة (انظر الأمثلة أدناه). يتم تطبيق التنقية بعد كل عمليات التصفية والتعديلات الناتجة عن الخيارات الأخرى (أي أن الوسيطة لن تحتوي على حمولة body إذا لم يتم ضبط capturePayload صراحةً على true).

interface RequestData {
  body: BodyInit | null | undefined; // whatewer you've put in the init.body in fetch(url, init) or xhr.send(body)
  headers: Record<string, string>;
}

interface ResponseData {
  body: string | Object | null;  // Object if response is of JSON type
  headers: Record<string, string>;
}

interface RequestResponseData {
  readonly status: number;
  readonly method: string;
  url: string;
  request: RequestData;
  response: ResponseData;
}

sanitizer: (data: RequestResponseData) => { // sanitise the body or headers
  if (data.url === "/auth") {
    data.request.body = null
  }

  if (data.request.headers['x-auth-token']) { // can also use ignoreHeaders option instead
    data.request.headers['x-auth-token'] = 'SANITISED';
  }

  // Sanitize response
  if (data.status < 400 && data.response.body.token) {
    data.response.body.token = "<TOKEN>"  
  }

  return data
}

// OR

sanitizer: data => { // ignore payloads for calls that start with /secure
  if (data.url.startsWith("/secure")) {
    data.request.body = null;
    data.response.body = null;
  }
  return data
}

// OR

sanitizer: data => { // sanitize request url: replace all numbers
  data.url = data.url.replace(/\d/g, "*")
  return data
}

فيما يلي أمثلة على كيفية استخدام خيار network.

tracker.configure({
  projectKey: PROJECT_KEY,
  network: {
    capturePayload: true // Capture HTTP payload
  }
});

لاحظ المتغير/السطر initOpts لضبط خيار network.

<!-- OpenReplay Tracking Code -->
<script>
var initOpts = { 
  projectKey: "GxPpaDARdn2345fgt321", 
  network: { // Enable HTTP payload capture in the network option
    capturePayload: true
  } 
};

(function(A,s,a,y,e,r){
  r=window.OpenReplay=[e,r,y,[s-1, e]];
  s=document.createElement('script');s.src=A;s.async=!a;
  ...
})("//static.openreplay.com/latest/openreplay.js", 1, 0, initOpts, startOpts);
</script>

هل تواجه مشكلة في تكوين هذه الخيارات؟ يُرجى الانضمام إلى Slack الخاص بنا أو الاطلاع على المنتدى الخاص بنا والحصول على المساعدة من مجتمعنا.