ভূমিকা
নেটওয়ার্ক এরর লগিং (NEL) হলো কোনো উৎস থেকে ক্লায়েন্ট-সাইডের নেটওয়ার্ক ত্রুটি সংগ্রহ করার একটি পদ্ধতি।
এটি নেটওয়ার্ক ত্রুটি সংগ্রহ করার জন্য ব্রাউজারকে নির্দেশ দিতে NEL HTTP রেসপন্স হেডার ব্যবহার করে, তারপর সেই ত্রুটিগুলো একটি সার্ভারে রিপোর্ট করার জন্য রিপোর্টিং API-এর সাথে সমন্বিত হয়।
লিগ্যাসি রিপোর্টিং এপিআই-এর সংক্ষিপ্ত বিবরণ
লিগ্যাসি Report-To হেডার
লিগ্যাসি রিপোর্টিং এপিআই ব্যবহার করতে, আপনাকে একটি 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 নাম নির্দিষ্ট করা না থাকে, তাহলে এন্ডপয়েন্টটিকে 'default' নামটি দেওয়া হয়। |
max_age | সংখ্যা | আবশ্যক । একটি অঋণাত্মক পূর্ণসংখ্যা যা সেকেন্ডে এন্ডপয়েন্টের জীবনকাল নির্ধারণ করে। "0" মানটি ইউজার এজেন্টের রিপোর্টিং ক্যাশে থেকে এন্ডপয়েন্ট গ্রুপটিকে সরিয়ে দেবে। |
endpoints | অ্যারে<অবজেক্ট> | আবশ্যক । JSON অবজেক্টের একটি অ্যারে যা আপনার রিপোর্ট কালেক্টরের প্রকৃত URL নির্দিষ্ট করে। |
include_subdomains | বুলিয়ান | ঐচ্ছিক। একটি বুলিয়ান যা বর্তমান অরিজিনের হোস্টের সমস্ত সাবডোমেনের জন্য এন্ডপয়েন্ট গ্রুপ সক্রিয় করে। যদি এটি বাদ দেওয়া হয় বা "true" ছাড়া অন্য কিছু দেওয়া হয়, তাহলে সাবডোমেনগুলি এন্ডপয়েন্টে রিপোর্ট করা হয় না। |
group নাম হলো একটি অনন্য নাম যা একটি স্ট্রিংকে কোনো এন্ডপয়েন্টের সাথে যুক্ত করতে ব্যবহৃত হয়। রিপোর্টিং এপিআই-এর সাথে ইন্টিগ্রেট করা অন্যান্য স্থানে একটি নির্দিষ্ট এন্ডপয়েন্ট গ্রুপকে নির্দেশ করতে এই নামটি ব্যবহার করুন।
max-age ফিল্ডটিও আবশ্যক এবং এটি নির্দিষ্ট করে যে ব্রাউজারটি কতক্ষণ ধরে এন্ডপয়েন্টটি ব্যবহার করবে এবং সেটিতে ত্রুটি রিপোর্ট করবে।
endpoints ফিল্ডটি ফেইলওভার এবং লোড ব্যালান্সিং বৈশিষ্ট্য প্রদানের জন্য একটি অ্যারে। ফেইলওভার এবং লোড ব্যালান্সিং সম্পর্কিত বিভাগটি দেখুন। এটি মনে রাখা গুরুত্বপূর্ণ যে, গ্রুপটি endpoints এ একাধিক কালেক্টর তালিকাভুক্ত করলেও ব্রাউজার শুধুমাত্র একটি এন্ডপয়েন্ট নির্বাচন করবে । আপনি যদি একই সাথে একাধিক সার্ভারে একটি রিপোর্ট পাঠাতে চান, তাহলে আপনার ব্যাকএন্ডকে রিপোর্টগুলো ফরওয়ার্ড করতে হবে।
ব্রাউজার কীভাবে রিপোর্ট পাঠায়?
ব্রাউজারটি পর্যায়ক্রমে রিপোর্টগুলো একত্রিত করে আপনার কনফিগার করা রিপোর্টিং এন্ডপয়েন্টগুলোতে পাঠিয়ে দেয়।
রিপোর্ট পাঠানোর জন্য, ব্রাউজার Content-Type: application/reports+json সহ একটি POST রিকোয়েস্ট পাঠায়, যার বডিতে ক্যাপচার করা ওয়ার্নিং/এররগুলোর অ্যারে থাকে।
ব্রাউজার কখন রিপোর্ট পাঠায়?
রিপোর্টগুলি আপনার অ্যাপ থেকে আউট-অফ-ব্যান্ডে পাঠানো হয় , অর্থাৎ ব্রাউজারই নিয়ন্ত্রণ করে কখন রিপোর্টগুলি আপনার সার্ভারে পাঠানো হবে।
ব্রাউজারটি সারিবদ্ধ রিপোর্টগুলো সবচেয়ে উপযুক্ত সময়ে সরবরাহ করার চেষ্টা করে। এটি হতে পারে রিপোর্টগুলো প্রস্তুত হওয়ার সাথে সাথেই (ডেভেলপারকে সময়মতো প্রতিক্রিয়া জানানোর জন্য), কিন্তু ব্রাউজারটি উচ্চ অগ্রাধিকারের কাজ প্রক্রিয়াকরণে ব্যস্ত থাকলে, অথবা ব্যবহারকারী সেই সময়ে একটি ধীর এবং/অথবা যানজটপূর্ণ নেটওয়ার্কে থাকলে, রিপোর্ট সরবরাহে বিলম্ব করতে পারে। ব্যবহারকারী যদি ঘন ঘন পরিদর্শক হন, তবে ব্রাউজারটি প্রথমে একটি নির্দিষ্ট উৎস সম্পর্কিত রিপোর্ট পাঠানোর ক্ষেত্রেও অগ্রাধিকার দিতে পারে।
রিপোর্টিং এপিআই ব্যবহার করার ক্ষেত্রে পারফরম্যান্স নিয়ে তেমন কোনো উদ্বেগ নেই (যেমন আপনার অ্যাপের সাথে নেটওয়ার্কের দ্বন্দ্ব)। এছাড়া, ব্রাউজার কখন কিউড রিপোর্টগুলো পাঠাবে, তা নিয়ন্ত্রণ করারও কোনো উপায় নেই।
একাধিক এন্ডপয়েন্ট কনফিগার করা
একটিমাত্র রেসপন্সের মাধ্যমে একাধিক 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-গুলোতে সেইসব বিরক্তিকর কনসোল সতর্কতা/ত্রুটি পাঠিয়ে দেয়।
ফেইলওভার এবং লোড ব্যালেন্সিং
বেশিরভাগ সময় আপনি প্রতিটি গ্রুপের জন্য একটি করে ইউআরএল কালেক্টর কনফিগার করবেন। তবে, যেহেতু রিপোর্টিংয়ের কারণে প্রচুর ট্র্যাফিক তৈরি হতে পারে, তাই স্পেসিফিকেশনে ডিএনএস এসআরভি রেকর্ড দ্বারা অনুপ্রাণিত ফেইলওভার এবং লোড-ব্যালান্সিং বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়েছে।
ব্রাউজারটি একটি গ্রুপের মধ্যে সর্বাধিক একটি এন্ডপয়েন্টে রিপোর্ট পৌঁছে দেওয়ার জন্য যথাসাধ্য চেষ্টা করবে। লোড বন্টনের জন্য এন্ডপয়েন্টগুলোকে একটি weight নির্ধারণ করে দেওয়া যেতে পারে, যেখানে প্রতিটি এন্ডপয়েন্ট রিপোর্টিং ট্র্যাফিকের একটি নির্দিষ্ট ভগ্নাংশ গ্রহণ করে। ফলব্যাক কালেক্টর (fallback collector) সেট আপ করার জন্য এন্ডপয়েন্টগুলোকে একটি 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 একটি সম্পর্কিত, কিন্তু ভিন্ন রিপোর্টিং ব্যবস্থা। এটি জাভাস্ক্রিপ্ট কলের উপর ভিত্তি করে তৈরি। এটি নেটওয়ার্ক ত্রুটি লগিংয়ের জন্য উপযুক্ত নয় , কারণ জাভাস্ক্রিপ্টের মাধ্যমে নেটওয়ার্ক ত্রুটি শনাক্ত করা যায় না।
উদাহরণ সার্ভার
নিচে এক্সপ্রেস ব্যবহার করা একটি নোড সার্ভারের উদাহরণ দেওয়া হলো। এতে দেখানো হয়েছে কীভাবে নেটওয়ার্ক ত্রুটির জন্য রিপোর্টিং কনফিগার করতে হয় এবং ফলাফল সংগ্রহের জন্য একটি ডেডিকেটেড হ্যান্ডলার তৈরি করা হয়।
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}`);
});