इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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 इस समस्या का हल उपलब्ध कराता है. जब उपयोगकर्ताओं को किसी समस्या का पता चलता है, तो हमें इसकी सूचना दी जा सकती है.

ध्यान दें: ReportingObserver सिर्फ़ Chrome 69 में उपलब्ध है. इसे दूसरे ब्राउज़र भी इस्तेमाल कर रहे हैं.

परिचय

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

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

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

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

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

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

एपीआई

यह एपीआई, 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']});

मुख्य शब्द: फ़िलहाल, रिपोर्ट दो तरह की होती हैं: 'deprecation' और 'intervention'.

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

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

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

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

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

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

अन्य संसाधन: