नेटवर्क की गड़बड़ी का डेटा लॉग करने की सुविधा (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).

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

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

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

group नाम एक यूनीक नाम होता है, जो स्ट्रिंग को एंडपॉइंट से जोड़ने के लिए इस्तेमाल किया जाता है. इस नाम का इस्तेमाल उन अन्य जगहों में करें जो किसी खास एंडपॉइंट ग्रुप को रेफ़र करने के लिए, Reporting API के साथ इंटिग्रेट करती हैं.

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

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

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

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

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

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

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

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

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 के NEL कलेक्टर को सूचना दी गई
• example.com के NEL कलेक्टर को सूचना नहीं दी गई है

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

example.com को foobar.com के सर्वर लॉग नहीं दिखते. इसलिए, इसकी एनईएल रिपोर्ट भी नहीं दिखती.

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

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

रिपोर्टिंग ऑब्ज़र्वर का क्या होता है?

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

उदाहरण सर्वर

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

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 पर मुख्य पोस्ट)
• रिपोर्टिंग एपीआई v0 से v1 में माइग्रेशन गाइड
• खास जानकारी: लेगसी Reporting API (v0)
• खास जानकारी: नया Reporting API (v1)