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

Eric Bidelman

Maud Nalpas

परिचय

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

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

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

लीगेसी Report-To हेडर

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 नाम एक यूनीक नाम होता है. इसका इस्तेमाल, किसी स्ट्रिंग को एंडपॉइंट से जोड़ने के लिए किया जाता है. किसी खास एंडपॉइंट ग्रुप का रेफ़रंस देने के लिए, इस नाम का इस्तेमाल उन जगहों पर करें जो Reporting API के साथ इंटिग्रेट होती हैं.

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 हेडर भेजने के बाद, ब्राउज़र 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 के एनईएल कलेक्टर को सूचना दी जाती है
• example.com के एनईएल कलेक्टर को सूचना नहीं दी गई है

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

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}`);
});

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

• Reporting API की मदद से अपने वेब ऐप्लिकेशन को मॉनिटर करना (Reporting API के बारे में मुख्य पोस्ट)
• Reporting API के v0 से v1 वर्शन पर माइग्रेट करने के लिए गाइड
• स्पेसिफ़िकेशन: Reporting API का लेगसी वर्शन (v0)
• जानकारी: नया Reporting API (v1)