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

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

एरिक बिडेलमैन
Twitter GitHub होम पेज

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

बैकग्राउंड

कुछ समय पहले, मैंने एक ब्लॉग पोस्ट लिखी थी (आपके वेब ऐप्लिकेशन को देखते हुए) क्योंकि मुझे यह दिलचस्प लगा था कि वेब ऐप्लिकेशन में होने वाली "स्टफ़" को मॉनिटर करने के लिए कितने एपीआई मौजूद हैं. उदाहरण के लिए, ऐसे एपीआई हैं जो DOM के बारे में जानकारी देख सकते हैं: 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 में सभी तरह की समस्याओं का पता लगाने के लिए असली एपीआई बन जाएगा. ज़रा सोचिए कि एक एपीआई आपके ऐप्लिकेशन में होने वाली गड़बड़ियों को ठीक कर सकता है:

दूसरे संसाधन:

Unस्प्लैश पर स्यूवर्ट ओटरलू की हीरो इमेज.