नेटवर्क की गड़बड़ी का डेटा लॉग करने की सुविधा (NEL)

Maud Nalpas

परिचय

नेटवर्क की गड़बड़ी लॉग करने की सुविधा (एनईएल), किसी ऑरिजिन से क्लाइंट-साइड नेटवर्क की गड़बड़ियां इकट्ठा करने का एक तरीका है.

यह NEL एचटीटीपी रिस्पॉन्स हेडर का इस्तेमाल करके, ब्राउज़र को नेटवर्क की गड़बड़ियां इकट्ठा करने के लिए कहता है. इसके बाद, Reporting API के साथ इंटिग्रेट होकर, सर्वर को गड़बड़ियों की सूचना देता है.

लेगसी Reporting API की खास जानकारी

Reporting API के लेगसी वर्शन का इस्तेमाल करने के लिए, आपको Report-To एचटीटीपी रिस्पॉन्स हेडर सेट करना होगा. इसकी वैल्यू एक ऑब्जेक्ट होती है. यह ब्राउज़र के लिए एक एंडपॉइंट ग्रुप के बारे में बताती है, ताकि ब्राउज़र गड़बड़ियों की सूचना दे सके:

Report-To:
{
    "max_age": 10886400,
    "endpoints": [{
    "url": "https://analytics.provider.com/browser-errors"
    }]
}

अगर आपका एंडपॉइंट यूआरएल, आपकी साइट के ऑरिजिन से अलग ऑरिजिन पर मौजूद है, तो एंडपॉइंट को सीओआरएस प्रीफ़्लाइट अनुरोधों के साथ काम करना चाहिए. (उदाहरण के लिए, Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS; Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With).

इस उदाहरण में, मुख्य पेज के साथ इस रिस्पॉन्स हेडर को भेजने से, ब्राउज़र को यह कॉन्फ़िगर किया जाता है कि वह ब्राउज़र से जनरेट हुई चेतावनियों को max_age सेकंड के लिए, https://analytics.provider.com/browser-errors एंडपॉइंट पर रिपोर्ट करे. यह ध्यान रखना ज़रूरी है कि पेज पर किए गए सभी एचटीटीपी अनुरोधों (इमेज, स्क्रिप्ट वगैरह के लिए) को अनदेखा कर दिया जाता है. कॉन्फ़िगरेशन, मुख्य पेज के जवाब के दौरान सेट अप किया जाता है.

हेडर फ़ील्ड के बारे में जानकारी

हर एंडपॉइंट कॉन्फ़िगरेशन में, group नाम, max_age, और endpoints ऐरे शामिल होता है. include_subdomains फ़ील्ड का इस्तेमाल करके, यह भी चुना जा सकता है कि गड़बड़ियों की शिकायत करते समय सबडोमेन को शामिल किया जाए या नहीं.

फ़ील्ड टाइप ब्यौरा
group स्ट्रिंग ज़रूरी नहीं. अगर group का नाम नहीं दिया गया है, तो एंडपॉइंट को "default" नाम दिया जाता है.
max_age संख्या ज़रूरी है. यह एक पॉज़िटिव पूर्णांक होता है, जो एंडपॉइंट के लाइफ़टाइम को सेकंड में तय करता है. "0" वैल्यू सेट करने पर, एंडपॉइंट ग्रुप को उपयोगकर्ता एजेंट की रिपोर्टिंग कैश मेमोरी से हटा दिया जाएगा.
endpoints Array<Object> ज़रूरी है. JSON ऑब्जेक्ट का एक ऐसा कलेक्शन जो रिपोर्ट कलेक्टर का असली यूआरएल बताता है.
include_subdomains बूलियन ज़रूरी नहीं. यह एक बूलियन है, जो मौजूदा ऑरिजिन के होस्ट के सभी सबडोमेन के लिए एंडपॉइंट ग्रुप को चालू करता है. अगर इसे शामिल नहीं किया जाता है या "सही है" के अलावा कोई और वैल्यू दी जाती है, तो सबडোমेन की जानकारी एंडपॉइंट को नहीं भेजी जाती.

group एक यूनीक नाम होता है. इसका इस्तेमाल, किसी स्ट्रिंग को एंडपॉइंट से जोड़ने के लिए किया जाता है. इस नाम का इस्तेमाल उन दूसरी जगहों पर करें जहां रिपोर्टिंग एपीआई इंटिग्रेट किया गया है. इससे किसी खास एंडपॉइंट ग्रुप के बारे में जानकारी मिलती है.

max-age फ़ील्ड भी ज़रूरी है. इससे यह तय होता है कि ब्राउज़र को एंडपॉइंट का इस्तेमाल कब तक करना चाहिए और उसे गड़बड़ियों की जानकारी कब तक देनी चाहिए.

endpoints फ़ील्ड एक ऐरे है. इसका इस्तेमाल, फ़ेलओवर और लोड बैलेंसिंग की सुविधाएं देने के लिए किया जाता है. फ़ेलओवर और लोड बैलेंसिंग के बारे में जानकारी देने वाला सेक्शन देखें. यह ध्यान रखना ज़रूरी है कि ब्राउज़र सिर्फ़ एक एंडपॉइंट चुनेगा. भले ही, ग्रुप में endpoints में कई कलेक्टर शामिल हों. अगर आपको एक साथ कई सर्वर को रिपोर्ट भेजनी है, तो आपके बैकएंड को रिपोर्ट फ़ॉरवर्ड करनी होंगी.

ब्राउज़र, रिपोर्ट कैसे भेजता है?

ब्राउज़र, समय-समय पर रिपोर्ट को बैच करता है और उन्हें उन रिपोर्टिंग एंडपॉइंट पर भेजता है जिन्हें आपने कॉन्फ़िगर किया है.

रिपोर्ट भेजने के लिए, ब्राउज़र POST अनुरोध करता है. इसमें Content-Type: application/reports+json और एक बॉडी होती है. इस बॉडी में, कैप्चर की गई चेतावनियों/गड़बड़ियों का कलेक्शन होता है.

ब्राउज़र, रिपोर्ट कब भेजता है?

रिपोर्ट, आपके ऐप्लिकेशन से अलग तरीके से डिलीवर की जाती हैं. इसका मतलब है कि ब्राउज़र यह तय करता है कि रिपोर्ट आपके सर्वर पर कब भेजी जाएंगी.

ब्राउज़र, कतार में लगी रिपोर्ट को सबसे सही समय पर डिलीवर करने की कोशिश करता है. ऐसा हो सकता है कि ब्राउज़र, डेवलपर को तुरंत सूचना दे दे, ताकि उसे समय पर सुझाव मिल सकें. हालांकि, अगर ब्राउज़र ज़्यादा ज़रूरी काम कर रहा है या उपयोगकर्ता धीमे और/या भीड़भाड़ वाले नेटवर्क पर है, तो ब्राउज़र सूचना देने में देरी भी कर सकता है. अगर उपयोगकर्ता अक्सर आपकी साइट पर आता है, तो ब्राउज़र किसी खास ऑरिजिन के बारे में रिपोर्ट भेजने को प्राथमिकता दे सकता है.

Reporting API का इस्तेमाल करने पर, परफ़ॉर्मेंस से जुड़ी कोई समस्या नहीं होती या बहुत कम होती है. उदाहरण के लिए, आपके ऐप्लिकेशन के साथ नेटवर्क कंटेंशन. यह भी कंट्रोल नहीं किया जा सकता कि ब्राउज़र, लाइन में लगी रिपोर्ट कब भेजेगा.

एक से ज़्यादा एंडपॉइंट कॉन्फ़िगर करना

एक ही रिस्पॉन्स में, एक साथ कई एंडपॉइंट कॉन्फ़िगर किए जा सकते हैं. इसके लिए, कई Report-To हेडर भेजे जाते हैं:

Report-To: {
             "group": "default",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/browser-reports"
             }]
           }
Report-To: {
             "group": "network-errors-endpoint",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/network-errors"
             }]
           }

या उन्हें एक ही एचटीटीपी हेडर में शामिल करके:

Report-To: {
             "group": "network-errors-endpoint",
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/network-errors"
             }]
           },
           {
             "max_age": 10886400,
             "endpoints": [{
               "url": "https://example.com/browser-errors"
             }]
           }

Report-To हेडर भेजने के बाद, ब्राउज़र एंडपॉइंट को उनकी Report-To वैल्यू के हिसाब से कैश मेमोरी में सेव करता है. साथ ही, कंसोल की सभी चेतावनियां/गड़बड़ियां आपके यूआरएल पर भेजता है.max_age

फ़ेलओवर और लोड बैलेंसिंग

ज़्यादातर मामलों में, हर ग्रुप के लिए एक यूआरएल कलेक्टर कॉन्फ़िगर किया जाता है. हालांकि, रिपोर्टिंग से काफ़ी ट्रैफ़िक जनरेट हो सकता है. इसलिए, स्पेसिफ़िकेशन में फ़ेलओवर और लोड-बैलेंसिंग की सुविधाएं शामिल हैं. ये सुविधाएं, डीएनएस के एसआरवी रिकॉर्ड से मिलती-जुलती हैं.

ब्राउज़र, ग्रुप में मौजूद ज़्यादा से ज़्यादा एक एंडपॉइंट को रिपोर्ट डिलीवर करने की पूरी कोशिश करेगा. लोड को डिस्ट्रिब्यूट करने के लिए, एंडपॉइंट को weight असाइन किया जा सकता है. इससे हर एंडपॉइंट को रिपोर्टिंग ट्रैफ़िक का तय हिस्सा मिलता है. फ़ॉलबैक कलेक्टर सेट अप करने के लिए, एंडपॉइंट को priority भी असाइन किया जा सकता है.

फ़ॉलबैक कलेक्टर का इस्तेमाल सिर्फ़ तब किया जाता है, जब प्राइमरी कलेक्टर पर अपलोड नहीं हो पाता.

उदाहरण: https://backup.com/reports पर फ़ॉलबैक कलेक्टर बनाएं:

Report-To: {
             "group": "endpoint-1",
             "max_age": 10886400,
             "endpoints": [
               {"url": "https://example.com/reports", "priority": 1},
               {"url": "https://backup.com/reports", "priority": 2}
             ]
           }

नेटवर्क की गड़बड़ी की जानकारी सेव करने की सुविधा सेट अप करना

सेटअप

एनईएल का इस्तेमाल करने के लिए, Report-To हेडर को ऐसे कलेक्टर के साथ सेट अप करें जो नाम वाले ग्रुप का इस्तेमाल करता हो:

Report-To: {
    ...
  }, {
    "group": "network-errors",
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://analytics.provider.com/networkerrors"
    }]
  }

इसके बाद, गड़बड़ियों की जानकारी इकट्ठा करने के लिए, NEL रिस्पॉन्स हेडर भेजें. NEL किसी ऑरिजिन के लिए ऑप्ट-इन करने की सुविधा है. इसलिए, आपको हेडर सिर्फ़ एक बार भेजना होगा. NEL और Report-To, दोनों एक ही ऑरिजिन से किए जाने वाले आने वाले समय के अनुरोधों पर लागू होंगे. साथ ही, ये max_age वैल्यू के हिसाब से गड़बड़ियां इकट्ठा करते रहेंगे. इस वैल्यू का इस्तेमाल, कलेक्टर को सेट अप करने के लिए किया गया था.

हेडर वैल्यू, एक JSON ऑब्जेक्ट होना चाहिए. इसमें max_age और report_to फ़ील्ड शामिल होने चाहिए. नेटवर्क की गड़बड़ियों को इकट्ठा करने वाले टूल के ग्रुप का नाम रेफ़र करने के लिए, इसका इस्तेमाल करें:

GET /index.html HTTP/1.1
NEL: {"report_to": "network-errors", "max_age": 2592000}

सब-रिसोर्स

उदाहरण: अगर example.com, foobar.com/cat.gif को लोड करता है और वह संसाधन लोड नहीं हो पाता है, तो:

  • foobar.com के NEL कलेक्टर को सूचना दी जाती है
  • example.com के एनईएल कलेक्टर को सूचना नहीं दी जाती है

सामान्य तौर पर, NEL सर्वर-साइड के लॉग को फिर से बनाता है. हालांकि, इन्हें क्लाइंट पर जनरेट किया जाता है.

example.com के पास foobar.com के सर्वर लॉग का ऐक्सेस नहीं है. इसलिए, इसके पास NEL रिपोर्ट का ऐक्सेस भी नहीं है.

रिपोर्ट के कॉन्फ़िगरेशन को डीबग करना

अगर आपको अपने सर्वर पर रिपोर्ट नहीं दिख रही हैं, तो chrome://net-export/ पर जाएं. इस पेज से यह पुष्टि करने में मदद मिलती है कि सब कुछ सही तरीके से कॉन्फ़िगर किया गया है और रिपोर्ट सही तरीके से भेजी जा रही हैं.

ReportingObserver के बारे में क्या जानकारी है?

ReportingObserver एक मिलती-जुलती, लेकिन अलग रिपोर्टिंग सुविधा है. यह JavaScript कॉल पर आधारित है. यह नेटवर्क की गड़बड़ी को लॉग करने के लिए सही नहीं है, क्योंकि नेटवर्क की गड़बड़ियों को JavaScript के ज़रिए इंटरसेप्ट नहीं किया जा सकता.

सर्वर का उदाहरण

यहां Express का इस्तेमाल करने वाले Node सर्वर का उदाहरण दिया गया है. इसमें नेटवर्क की गड़बड़ियों के लिए रिपोर्टिंग को कॉन्फ़िगर करने का तरीका बताया गया है. साथ ही, नतीजे को कैप्चर करने के लिए एक खास हैंडलर बनाया गया है.

const express = require('express');

const app = express();
app.use(
  express.json({
    type: ['application/json', 'application/reports+json'],
  }),
);
app.use(express.urlencoded());

app.get('/', (request, response) => {
  // Note: report_to and not report-to for NEL.
  response.set('NEL', `{"report_to": "network-errors", "max_age": 2592000}`);

  // The Report-To header tells the browser where to send network errors.
  // The default group (first example below) captures interventions and
  // deprecation reports. Other groups, like the network-error group, are referenced by their "group" name.
  response.set(
    'Report-To',
    `{
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://reporting-observer-api-demo.glitch.me/reports"
    }],
  }, {
    "group": "network-errors",
    "max_age": 2592000,
    "endpoints": [{
      "url": "https://reporting-observer-api-demo.glitch.me/network-reports"
    }]
  }`,
  );

  response.sendFile('./index.html');
});

function echoReports(request, response) {
  // Record report in server logs or otherwise process results.
  for (const report of request.body) {
    console.log(report.body);
  }
  response.send(request.body);
}

app.post('/network-reports', (request, response) => {
  console.log(`${request.body.length} Network error reports:`);
  echoReports(request, response);
});

const listener = app.listen(process.env.PORT, () => {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

इस बारे में और पढ़ें