টিএল; ডিআর
শহরে একটি নতুন পর্যবেক্ষক আছে! ReportingObserver হল একটি নতুন API যা আপনাকে জানাতে দেয় যখন আপনার সাইট একটি অপসারিত API ব্যবহার করে বা ব্রাউজার হস্তক্ষেপে চলে:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
আরও বিশ্লেষণের জন্য একটি ব্যাকএন্ড বা বিশ্লেষণ প্রদানকারীর কাছে প্রতিবেদন পাঠাতে কলব্যাক ব্যবহার করা যেতে পারে।
কেন যে দরকারী? এখন অবধি, অবচয় এবং হস্তক্ষেপের সতর্কতাগুলি শুধুমাত্র কনসোল বার্তা হিসাবে DevTools-এ উপলব্ধ ছিল৷ হস্তক্ষেপ, বিশেষ করে, শুধুমাত্র ডিভাইস এবং নেটওয়ার্ক অবস্থার মত বিভিন্ন বাস্তব-বিশ্বের সীমাবদ্ধতা দ্বারা ট্রিগার করা হয়। এইভাবে, স্থানীয়ভাবে কোনো সাইট ডেভেলপ/পরীক্ষা করার সময় আপনি এই বার্তাগুলি দেখতে পাবেন না। ReportingObserver এই সমস্যার সমাধান প্রদান করে। যখন ব্যবহারকারীরা বন্য অঞ্চলে সম্ভাব্য সমস্যার সম্মুখীন হন, তখন আমরা তাদের সম্পর্কে অবহিত হতে পারি।
ভূমিকা
কিছুক্ষণ আগে, আমি একটি ব্লগ পোস্ট লিখেছিলাম (" আপনার ওয়েব অ্যাপ পর্যবেক্ষণ করা ") কারণ আমি এটি আকর্ষণীয় বলে মনে করেছি যে একটি ওয়েব অ্যাপে ঘটে যাওয়া "স্টাফ" নিরীক্ষণের জন্য কতগুলি API আছে৷ উদাহরণস্বরূপ, এমন API রয়েছে যা DOM সম্পর্কে তথ্য পর্যবেক্ষণ করতে পারে: ResizeObserver , IntersectionObserver , MutationObserver । কর্মক্ষমতা পরিমাপ ক্যাপচার করার জন্য API আছে: PerformanceObserver । অন্যান্য API যেমন window.onerror এবং window.onunhandledrejection এমনকি কিছু ভুল হলে আমাদের জানান।
যাইহোক, অন্যান্য ধরণের সতর্কতা রয়েছে যা এই বিদ্যমান API দ্বারা ক্যাপচার করা হয় না। যখন আপনার সাইট একটি অবচিত API ব্যবহার করে বা একটি ব্রাউজার হস্তক্ষেপের বিরুদ্ধে চলে, তখন DevTools প্রথমে আপনাকে সেগুলি সম্পর্কে জানায়:
কেউ স্বাভাবিকভাবেই মনে করবে window.onerror এই সতর্কতাগুলো ক্যাপচার করে। এটা না! কারণ window.onerror সরাসরি ব্যবহারকারী এজেন্টের দ্বারা উত্পন্ন সতর্কতার জন্য ফায়ার করে না। এটি আপনার কোড চালানোর কারণে রানটাইম ত্রুটির (জেএস ব্যতিক্রম এবং সিনট্যাক্স ত্রুটি) জন্য ফায়ার করে।
ReportingObserver শিথিলতা তুলে নেয়। এটি ব্রাউজার দ্বারা জারি করা সতর্কতা যেমন অবচয় এবং হস্তক্ষেপ সম্পর্কে অবহিত হওয়ার একটি প্রোগ্রামেটিক উপায় প্রদান করে৷ আপনি এটিকে একটি রিপোর্টিং টুল হিসাবে ব্যবহার করতে পারেন এবং ব্যবহারকারীরা আপনার লাইভ সাইটে অপ্রত্যাশিত সমস্যাগুলি আঘাত করছে কিনা ভেবে কম ঘুমাতে পারেন।
এপিআই
এপিআই অন্যান্য "পর্যবেক্ষক" এপিআই যেমন IntersectionObserver এবং ResizeObserver এর মত নয়। আপনি এটি একটি কলব্যাক দিন; এটি আপনাকে তথ্য দেয়। কলব্যাক যে তথ্যটি গ্রহণ করে তা হল পৃষ্ঠার কারণে হওয়া সমস্যার একটি তালিকা:
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
// → report.type === 'deprecation'
// → report.url === 'https://reporting-observer-api-demo.glitch.me'
// → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
// → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
// → report.body.lineNumber === 11
// → report.body.columnNumber === 22
// → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
// → report.body.anticipatedRemoval === <JS_DATE_STR> or null
}
});
observer.observe();
ফিল্টার করা রিপোর্ট
রিপোর্টগুলি শুধুমাত্র নির্দিষ্ট রিপোর্টের ধরনগুলি পর্যবেক্ষণ করার জন্য প্রি-ফিল্টার হতে পারে:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
বাফার রিপোর্ট
যখন আপনি পর্যবেক্ষক তৈরি করার আগে তৈরি করা প্রতিবেদনগুলি দেখতে চান তখন buffered: true বিকল্পটি সত্যিই দরকারী:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
একটি ReportingObserver ব্যবহার করে এমন একটি লাইব্রেরি অলস-লোড করার মতো পরিস্থিতিতে এটি দুর্দান্ত। পর্যবেক্ষক দেরিতে যোগ করা হয়, কিন্তু আপনি পৃষ্ঠা লোডের আগে ঘটে যাওয়া কিছু মিস করবেন না ।
পর্যবেক্ষণ করা বন্ধ করুন
হ্যাঁ! এটি একটি disconnect পদ্ধতি আছে:
observer.disconnect(); // Stop the observer from collecting reports.
উদাহরণ
উদাহরণ - একটি বিশ্লেষণ প্রদানকারীকে ব্রাউজার হস্তক্ষেপের প্রতিবেদন করুন:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
},
{types: ['intervention'], buffered: true}
);
observer.observe();
উদাহরণ - যখন API গুলি সরানো হবে তখন অবহিত করা হবে:
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
if (report.type === 'deprecation') {
sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
}
}
});
observer.observe();
উপসংহার
ReportingObserver আপনাকে আপনার ওয়েব অ্যাপে সম্ভাব্য সমস্যাগুলি আবিষ্কার ও পর্যবেক্ষণ করার জন্য একটি অতিরিক্ত উপায় দেয়৷ এমনকি এটি আপনার কোডবেসের স্বাস্থ্য (বা এর অভাব) বোঝার জন্য একটি দরকারী টুল। একটি ব্যাকএন্ডে প্রতিবেদনগুলি পাঠান, ব্যবহারকারীরা আপনার সাইটে যে বাস্তব-বিশ্বের সমস্যাগুলি করছে সে সম্পর্কে জানুন, কোড আপডেট করুন, লাভ!
ভবিষ্যতে কাজ
ভবিষ্যতে, আমার আশা যে ReportingObserver JS-এ সব ধরনের সমস্যা ধরার জন্য ডি-ফ্যাক্টো API হয়ে উঠবে। আপনার অ্যাপে যা কিছু ভুল হয় তা ধরতে একটি API কল্পনা করুন:
- ব্রাউজার হস্তক্ষেপ
- অবজ্ঞা
- বৈশিষ্ট্য নীতি লঙ্ঘন. crbug.com/867471 দেখুন।
- JS ব্যতিক্রম এবং ত্রুটি (বর্তমানে
window.onerrorদ্বারা পরিসেবা করা হয়)। - আন-হ্যান্ডেলড জেএস প্রতিশ্রুতি প্রত্যাখ্যান (বর্তমানে
window.onunhandledrejectionদ্বারা পরিষেবা করা হয়)
ReportingObserver তাদের ওয়ার্কফ্লোতে একীভূত করার টুলস নিয়েও আমি উত্তেজিত। লাইটহাউস হল এমন একটি টুলের উদাহরণ যা ব্রাউজার অবচয়কে ইতিমধ্যেই ফ্ল্যাগ করে যখন আপনি এটির " অপ্রচলিত APIs এড়িয়ে যান " অডিট চালান:
লাইটহাউস বর্তমানে কনসোল বার্তাগুলি স্ক্র্যাপ করতে এবং বিকাশকারীদের কাছে এই সমস্যাগুলি প্রতিবেদন করতে DevTools প্রোটোকল ব্যবহার করে। পরিবর্তে, এটির সুগঠিত অবমূল্যায়ন প্রতিবেদন এবং anticipatedRemoval তারিখের মতো অতিরিক্ত মেটাডেটার জন্য ReportingObserver এ স্যুইচ করা আকর্ষণীয় হতে পারে।
অতিরিক্ত সম্পদ :