ReportingObserver API-এর মাধ্যমে আপনার কোডের হেল্থ সম্পর্কে জানুন

আপনার প্রোডাকশন অ্যাপে বন্ধ হয়ে যাওয়া API খুঁজুন।

আপনার সাইট কোনও বন্ধ হয়ে যাওয়া API ব্যবহার করলে বা ব্রাউজার ইন্টারভেনশন-এর সম্মুখীন হলে ReportingObserver আপনাকে তা জানায়। প্রাথমিক কার্যকারিতা মূলত Chrome 69-এ চালু করা হয়েছিল। Chrome 84 থেকে, এটি ওয়ার্কারদের ক্ষেত্রে ব্যবহার করা যেতে পারে।

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

বিশ্লেষণের জন্য ব্যাকএন্ড বা অ্যানালিটিক্স প্রদানকারীর কাছে রিপোর্ট পাঠাতে কলব্যাক ব্যবহার করুন।

এটি কেন উপযোগী? এই API-এর আগে, ডেপ্রিকেশন ও ইন্টারভেনশন সংক্রান্ত সতর্কতা শুধুমাত্র DevTools-এ কনসোল মেসেজ হিসেবে উপলভ্য ছিল। বিশেষ করে, ইন্টারভেনশন শুধুমাত্র ডিভাইস ও নেটওয়ার্কের অবস্থার মতো বিভিন্ন বাস্তব-জগতের সীমাবদ্ধতার কারণে ট্রিগার হয়। তাই, লোকালভাবে কোনও সাইট ডেভেলপ/টেস্ট করার সময় আপনি হয়ত এই মেসেজগুলি কখনও দেখতে পাবেন না। ReportingObserver এই সমস্যার সমাধান প্রদান করে। ব্যবহারকারীরা কোনও সম্ভাব্য সমস্যার সম্মুখীন হলে, ওয়েব ডেভেলপারদের সেই বিষয়ে বিজ্ঞপ্তি পাঠানো হতে পারে।

ব্যাকগ্রাউন্ড

কিছুদিন আগে, আমি একটি ব্লগ পোস্ট (আপনার ওয়েব অ্যাপ পর্যবেক্ষণ করা) লিখেছিলাম কারণ আমি দেখেছিলাম যে ওয়েব অ্যাপে কী "জিনিস" ঘটছে তা মনিটর করার জন্য কত API আছে। যেমন, এমন API আছে যা DOM সম্পর্কে তথ্য পর্যবেক্ষণ করতে পারে: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver পারফর্ম্যান্স পরিমাপ ক্যাপচার করে। এমনকি window.onerror এবং window.onunhandledrejection -এর মতো পদ্ধতিগুলি আমাদের জানায় যে কখন কোনও সমস্যা হয়েছে।

তবে, অন্যান্য ধরনের সতর্কতাও আছে যা বর্তমান API-এর মাধ্যমে ক্যাপচার করা হয় না। আপনার সাইট কোনও বন্ধ হয়ে যাওয়া API ব্যবহার করলে বা ব্রাউজার ইন্টারভেনশন-এর মুখোমুখি হলে, DevTools আপনাকে প্রথমে সেই বিষয়ে জানায়:

বন্ধ হয়ে যাওয়া ও হস্তক্ষেপের জন্য DevTools Console সংক্রান্ত সতর্কতা।
DevTools কনসোলে ব্রাউজার-ইনিশিয়েটেড সতর্কতা।

যে কেউ স্বাভাবিকভাবেই ভাববেন যে window.onerror এই সতর্কতাগুলি ক্যাপচার করে। এটি তা করে না। কারণ, ইউজার এজেন্টের মাধ্যমে সরাসরি জেনারেট করা সতর্কতার জন্য window.onerror কাজ করে না। কোড এক্সিকিউশনের কারণে রানটাইম সমস্যা (জাভাস্ক্রিপ্ট এক্সেপশন ও সিনট্যাক্স সমস্যা) হলে এটি ফায়ার করে।

ReportingObserver আরও বেশি পরিশ্রম করে। এটি প্রোগ্রাম্যাটিক উপায়ে ব্রাউজার-ইস্যু করা সতর্কতা যেমন অবচিতি এবং হস্তক্ষেপ সম্পর্কে বিজ্ঞপ্তি দেয়। আপনি এটি রিপোর্টিং টুল হিসেবে ব্যবহার করতে পারেন এবং আপনার লাইভ সাইটে ব্যবহারকারীরা অপ্রত্যাশিত সমস্যার সম্মুখীন হচ্ছেন কিনা তা নিয়ে চিন্তা করে কম ঘুমাতে পারেন।

API

ReportingObserver অন্যান্য Observer API-এর মতোই, যেমন 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();

ফিল্টার করা রিপোর্ট

শুধুমাত্র নির্দিষ্ট ধরনের রিপোর্ট দেখার জন্য রিপোর্ট আগে থেকে ফিল্টার করা যেতে পারে। বর্তমানে, দুই ধরনের রিপোর্ট আছে: 'deprecation' এবং 'intervention'।

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

বাফার করা রিপোর্ট

অবজার্ভার ইনস্ট্যান্স তৈরি হওয়ার আগে জেনারেট হওয়া রিপোর্ট দেখতে চাইলে, buffered: true বিকল্পটি ব্যবহার করুন:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

এই বিকল্পটি এমন পরিস্থিতিতে দারুণ কাজ করে যেখানে ধীরে ধীরে লোড করা লাইব্রেরি ReportingObserver ব্যবহার করে। অবজারভার পরে যোগ করা হয়, তবে পৃষ্ঠা লোড হওয়ার সময় আগে যা ঘটেছে তার কোনও কিছুই আপনি মিস করেন না।

পর্যবেক্ষণ করা বন্ধ করুন

disconnect() পদ্ধতি ব্যবহার করে পর্যবেক্ষণ করা বন্ধ করুন:

observer.disconnect();

উদাহরণ

অ্যানালিটিক্স প্রদানকারীকে ব্রাউজার ইন্টারভেনশন সম্পর্কে রিপোর্ট করুন

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 জাভাস্ক্রিপ্টে সব ধরনের সমস্যা ধরার জন্য ডি ফ্যাক্টো API হয়ে উঠবে। আপনার অ্যাপে যা কিছু ভুল হয়, সেগুলি ধরার জন্য একটি API-এর কথা ভাবুন:

অতিরিক্ত রিসোর্স:

Unsplash-এ Sieuwert Otterloo-এর অনেক বড় ছবি।