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

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

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

बैकग्राउंड

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

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

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

अन्य संसाधन:

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