নেটওয়ার্ক এরর লগিং (NEL)

Maud Nalpas

ভূমিকা

নেটওয়ার্ক এরর লগিং (NEL) হল একটি মেকানিজম যার মাধ্যমে কোনও উৎস থেকে ক্লায়েন্ট-সাইড নেটওয়ার্ক এরর সংগ্রহ করা হয়।

এটি NEL HTTP রেসপন্স হেডার ব্যবহার করে ব্রাউজারকে নেটওয়ার্কের সমস্যা সংক্রান্ত তথ্য সংগ্রহ করতে বলে, তারপর রিপোর্টিং API-এর সাথে ইন্টিগ্রেট করে সার্ভারে সমস্যার রিপোর্ট পাঠায়।

পুরনো Reporting API-এর ওভারভিউ

পুরনো রিপোর্টিং API ব্যবহার করতে, আপনাকে Report-To HTTP রেসপন্স হেডার সেট করতে হবে। এর মান হল একটি অবজেক্ট যা ব্রাউজারের জন্য একটি এন্ডপয়েন্ট গ্রুপ বর্ণনা করে যাতে ত্রুটি রিপোর্ট করা যায়:

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

আপনার এন্ডপয়েন্ট URL যদি আপনার সাইটের থেকে আলাদা অরিজিনে থাকে, তাহলে এন্ডপয়েন্টকে CORS প্রিফ্লাইট অনুরোধ সাপোর্ট করতে হবে। (যেমন, 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 এন্ডপয়েন্টে রিপোর্ট করার জন্য ব্রাউজার কনফিগার করে। মনে রাখবেন, পৃষ্ঠার মাধ্যমে করা পরবর্তী সব HTTP অনুরোধ (ছবি, স্ক্রিপ্ট ইত্যাদির জন্য) উপেক্ষা করা হয়। মূল পৃষ্ঠার উত্তরের সময় কনফিগারেশন সেট-আপ করা হয়।

হেডার ফিল্ডের ব্যাখ্যা

প্রতিটি এন্ডপয়েন্ট কনফিগারেশনে একটি group নাম, max_age এবং endpoints অ্যারে থাকে। এছাড়াও, include_subdomains ফিল্ড ব্যবহার করে সমস্যার ব্যাপারে অভিযোগ জানানোর সময় সাবডোমেন বিবেচনা করা হবে কিনা তা বেছে নিতে পারবেন।

ফিল্ড ধরন বিবরণ
group স্ট্রিং ঐচ্ছিক। group-এর নাম উল্লেখ করা না থাকলে, এন্ডপয়েন্টের নাম "ডিফল্ট" হিসেবে দেখানো হয়।
max_age নম্বর প্রয়োজনীয়। একটি অ-ঋণাত্মক পূর্ণসংখ্যা যা সেকেন্ডে এন্ডপয়েন্টের লাইফটাইম নির্ধারণ করে। "0" ভ্যালু থাকলে, এন্ডপয়েন্ট গ্রুপটি ইউজার এজেন্টের রিপোর্টিং ক্যাশে থেকে সরিয়ে দেওয়া হবে।
endpoints Array<Object> প্রয়োজনীয়। JSON অবজেক্টের একটি অ্যারে যা আপনার রিপোর্ট কালেক্টরের আসল URL নির্দিষ্ট করে।
include_subdomains বুলিয়ান ঐচ্ছিক। একটি বুলিয়ান যা বর্তমান অরিজিনের হোস্টের সব সাবডোমেনের জন্য এন্ডপয়েন্ট গ্রুপ চালু করে। বাদ দেওয়া হলে বা "true" ছাড়া অন্য কিছু হলে, সাবডোমেন এন্ডপয়েন্টে রিপোর্ট করা হয় না।

group নাম হল একটি অনন্য নাম যা একটি এন্ডপয়েন্টের সাথে একটি স্ট্রিং যুক্ত করতে ব্যবহৃত হয়। নির্দিষ্ট এন্ডপয়েন্ট গ্রুপকে রেফার করতে রিপোর্টিং 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"
             }]
           }

অথবা একটি HTTP হেডারে একত্রিত করে:

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 ভ্যালু অনুযায়ী এন্ডপয়েন্ট ক্যাশে করে এবং আপনার URL-এ কনসোলের সব বিরক্তিকর সতর্কতা/সমস্যা পাঠায়।

ফেলওভার ও লোড ব্যালেন্সিং

বেশিরভাগ সময় আপনি প্রতিটি গ্রুপের জন্য একটি URL কালেক্টর কনফিগার করবেন। তবে, রিপোর্টিং থেকে প্রচুর ট্রাফিক জেনারেট হতে পারে বলে, স্পেসিফিকেশনে DNS SRV রেকর্ড থেকে অনুপ্রাণিত হয়ে ফেলওভার ও লোড-ব্যালেন্সিং ফিচার অন্তর্ভুক্ত করা হয়েছে।

ব্রাউজার, গ্রুপের সর্বাধিক একটি এন্ডপয়েন্টে রিপোর্ট পাঠানোর জন্য যথাসাধ্য চেষ্টা করবে। লোড ডিস্ট্রিবিউট করার জন্য এন্ডপয়েন্টকে 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}
             ]
           }

নেটওয়ার্ক এরর লগিং সেট-আপ করা

সেট-আপ করুন

NEL ব্যবহার করতে, একটি নামযুক্ত গ্রুপ ব্যবহার করে এমন একটি সংগ্রাহকের সাথে 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-এর সার্ভার লগ দেখার অ্যাক্সেস নেই, তাই এটি NEL রিপোর্টও দেখতে পায় না।

রিপোর্ট কনফিগারেশন ডিবাগ করা হচ্ছে

আপনার সার্ভারে রিপোর্ট দেখতে না পেলে, chrome://net-export/-এ যান। এই পৃষ্ঠাটি সবকিছু সঠিকভাবে কনফিগার করা হয়েছে কিনা এবং রিপোর্ট ঠিকমতো পাঠানো হচ্ছে কিনা তা যাচাই করার জন্য উপযোগী।

ReportingObserver সম্পর্কে কী বলা যায়?

ReportingObserver হল একটি সম্পর্কিত, কিন্তু ভিন্ন রিপোর্টিং মেকানিজম। এটি জাভাস্ক্রিপ্ট কলের উপর ভিত্তি করে তৈরি। এটি নেটওয়ার্কের সমস্যা লগ করার জন্য উপযুক্ত নয়, কারণ নেটওয়ার্কের সমস্যা JavaScript-এর মাধ্যমে ইন্টারসেপ্ট করা যায় না।

নমুনা সার্ভার

নিচে Node সার্ভারের একটি উদাহরণ দেওয়া হল যা Express ব্যবহার করে। এটি দেখায় যে কীভাবে নেটওয়ার্ক সমস্যার জন্য রিপোর্টিং কনফিগার করতে হয় এবং ফলাফল ক্যাপচার করার জন্য একটি ডেডিকেটেড হ্যান্ডলার তৈরি করে।

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

আরও পড়ুন