रिपोर्टिंग ऑब्ज़र्वर एपीआई की मदद से अपने कोड की परफ़ॉर्मेंस जानें

अपने प्रोडक्शन ऐप्लिकेशन में, बंद किए गए एपीआई ढूंढें.

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();

विश्लेषण के लिए, बैकएंड या आंकड़ों की सेवा देने वाली कंपनी को रिपोर्ट भेजने के लिए, कॉलबैक का इस्तेमाल करें.

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

बैकग्राउंड

कुछ समय पहले, मैंने एक ब्लॉग पोस्ट (अपने वेब ऐप्लिकेशन को मॉनिटर करना) लिखा था, क्योंकि मुझे यह जानकर हैरानी हुई कि वेब ऐप्लिकेशन में होने वाली "गतिविधियों" को मॉनिटर करने के लिए, कितने एपीआई उपलब्ध हैं. उदाहरण के लिए, ऐसे एपीआई हैं जो डीओएम के बारे में जानकारी देख सकते हैं: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver परफ़ॉर्मेंस मेज़रमेंट कैप्चर करता है. window.onerror और window.onunhandledrejection जैसे तरीकों से, हमें यह भी पता चलता है कि क्या गड़बड़ी हुई है.

हालांकि, ऐसी अन्य चेतावनियां भी हैं जिन्हें मौजूदा एपीआई कैप्चर नहीं करते. जब आपकी साइट किसी ऐसे एपीआई का इस्तेमाल करती है जो अब काम नहीं करता या ब्राउज़र इंटरवेंशन की समस्या आती है, तो DevTools आपको इनके बारे में सबसे पहले बताता है:

आम तौर पर, यह माना जाता है कि window.onerror इन चेतावनियों को कैप्चर करता है. ऐसा नहीं है. इसकी वजह यह है कि window.onerror, सीधे तौर पर उपयोगकर्ता एजेंट से जनरेट की गई चेतावनियों के लिए ट्रिगर नहीं होता. यह कोड लागू होने की वजह से होने वाली, रनटाइम की गड़बड़ियों (JavaScript के अपवाद और सिंटैक्स की गड़बड़ियां) के लिए फ़ायर होता है.

ReportingObserver, धीमे चलने वाले प्रोसेस को तेज़ कर देता है. यह प्रोग्रामैटिक तरीके से, ब्राउज़र से मिलने वाली चेतावनियों के बारे में सूचना पाने की सुविधा देता है. जैसे, इस्तेमाल में नहीं होने वाले वर्शन और इंटरवेंशन. इसका इस्तेमाल रिपोर्टिंग टूल के तौर पर किया जा सकता है. इससे आपको यह चिंता करने की ज़रूरत नहीं होगी कि उपयोगकर्ता आपकी लाइव साइट पर अनचाही समस्याओं का सामना कर रहे हैं या नहीं.

एपीआई

ReportingObserver, Observer के अन्य एपीआई जैसे कि 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();

एपीआई हटाए जाने पर सूचना पाएं

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, JavaScript में सभी तरह की समस्याओं का पता लगाने के लिए, डिफ़ॉल्ट तौर पर इस्तेमाल किया जाने वाला एपीआई बन जाएगा. एक ऐसे एपीआई की कल्पना करें जो आपके ऐप्लिकेशन में होने वाली हर गड़बड़ी का पता लगा सके:

• ब्राउज़र इंटरवेंशन
• अब काम नहीं करने वाले वर्शन
• सुविधा से जुड़ी नीति का उल्लंघन. Chromium की समस्या #867471 देखें.
• JS अपवाद और गड़बड़ियां (फ़िलहाल, window.onerror की ओर से सेवा दी जाती है).
• जेएस प्रॉमिस के अस्वीकार किए गए ऐसे उदाहरण जिन पर कार्रवाई नहीं की गई है (फ़िलहाल, window.onunhandledrejection की मदद से इनकी सेवा की जाती है)

अन्य संसाधन:

• W3C स्पेसिफ़िकेशन
• chromestatus.com एंट्री

Unsplash पर, Sieuwert Otterloo की हीरो इमेज.