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

Philip Walton

कम शब्दों में कहा जाए तो

शहर में एक नया ऑब्ज़र्वर मिला है! ReportingObserver एक नया एपीआई है. इसकी मदद से यह जानने के लिए कि आपकी साइट ऐसे एपीआई का इस्तेमाल करती है जो अब काम नहीं करता या ब्राउज़र इंटरवेंशन:

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 हैं "सामान" ऐसा वेब ऐप्लिकेशन में होता है. उदाहरण के लिए, कुछ ऐसे एपीआई हैं जो यह देख सकते हैं कि डीओएम के बारे में जानकारी: ResizeObserver, IntersectionObserver, MutationObserver. कैप्चर करने के लिए एपीआई उपलब्ध हैं परफ़ॉर्मेंस के मेज़रमेंट: PerformanceObserver. किसी और तरीके से window.onerror और window.onunhandledrejection जैसे एपीआई हमें इसकी जानकारी भी देते हैं पता लगा सकते हैं.

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

सेवा के बंद होने और इंटरवेंशन के लिए, DevTools कंसोल की चेतावनियां.
DevTools कंसोल में ब्राउज़र से शुरू की गई चेतावनियां.

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

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

एपीआई

यह एपीआई, अन्य "ऑब्ज़र्वर" से अलग नहीं है ऐसे एपीआई 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();

फ़िल्टर की गई रिपोर्ट

रिपोर्ट में सिर्फ़ कुछ टाइप की रिपोर्ट देखने के लिए, प्री-फ़िल्टर का इस्तेमाल किया जा सकता है:

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

बफ़र की गई रिपोर्ट

buffered: true विकल्प वास्तव में तब उपयोगी होता है, जब आप ऐसी रिपोर्ट जो ऑब्ज़र्वर के बनने से पहले जनरेट की गई थीं:

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

यह लाइब्रेरी में लेज़ी लोडिंग (लेज़ी-लोडिंग) जैसी स्थितियों के लिए बहुत अच्छा है, ReportingObserver. ऑब्ज़र्वर को देर से जोड़ा जाता है, लेकिन पेज लोड होने की शुरुआत में हुई किसी भी चीज़ को देखने से न चूकें.

निगरानी करना बंद करें

जी हां! इसमें disconnect तरीका है:

observer.disconnect(); // Stop the observer from collecting reports.

उदाहरण

उदाहरण - आंकड़ों की सेवा देने वाली कंपनी को ब्राउज़र इंटरवेंशन की रिपोर्ट करना:

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, de-facto एपीआई बन जाएगा JS में सभी तरह की समस्याओं को मान लें कि एक ही एपीआई से सभी जानकारी हासिल की जा सकती है जो आपके ऐप्लिकेशन में गलत हो जाता है:

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

मैं ReportingObserver को इंटिग्रेट करने वाले टूल को लेकर भी उत्साहित हूं वर्कफ़्लो को मैनेज किया जा सकता है. Lighthouse, टूल का एक उदाहरण है जो ब्राउज़र को पहले ही बंद कर देती है. "अब काम नहीं करने वाले एपीआई का इस्तेमाल नहीं किया जाता" ऑडिट:

काम नहीं करने वाले एपीआई इस्तेमाल करने के लिए, Lighthouse ऑडिट में ReportingObserver का इस्तेमाल किया जा सकता है.
काम न करने वाले एपीआई इस्तेमाल करने के लिए, लाइटहाउस ऑडिट में ReportingObserver का इस्तेमाल किया जा सकता है.

फ़िलहाल, लाइटहाउस DevTools प्रोटोकॉल का इस्तेमाल करता है ताकि कंसोल मैसेज को स्क्रैप किया जा सके और इन समस्याओं की शिकायत डेवलपर से की जा सके. इसके बजाय, ReportingObserver पर स्विच करना अच्छा रहेगा सुविधा को बंद करने वाली रिपोर्ट और अतिरिक्त मेटाडेटा के लिए, जैसे कि anticipatedRemoval तारीख.

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