تصف هذه الصفحة مساحة الأسماء network ضمن خيارات حزمة OpenReplay JavaScript SDK. وهي تتعلق بالتقاط طلبات الشبكة مثل 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 requests that start with /secure
  if (data.url.startsWith("/secure")) {
    return null
  }
  return data
}

// OR

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

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

const tracker = new OpenReplay({
  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 الخاص بنا أو الاطلاع على المنتدى والحصول على المساعدة من مجتمعنا.