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

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

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

बैकग्राउंड

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

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

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