बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
शहर में एक नया ऑब्ज़र्वर मिला है! 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 से इस समस्या का समाधान करने में मदद मिलती है. जब उपयोगकर्ताओं को जंगल में संभावित समस्याओं का सामना करना पड़ता है,
तो हमें उनके बारे में सूचित किया जा सकता है.
शुरुआती जानकारी
कुछ समय पहले, मैंने एक ब्लॉग पोस्ट ("आपके वेब ऐप्लिकेशन को देखा जा रहा है") क्योंकि मुझे यह दिलचस्प लगा कि वेब ऐप्लिकेशन में होने वाली "चीज़ों" को मॉनिटर करने के लिए कितने एपीआई हैं. उदाहरण के लिए, ऐसे एपीआई हैं जो डीओएम के बारे में जानकारी देख सकते हैं: ResizeObserver, IntersectionObserver, MutationObserver. परफ़ॉर्मेंस मेज़रमेंट को कैप्चर करने के लिए, कुछ एपीआई उपलब्ध हैं: PerformanceObserver. जब कुछ गलत होता है, तो window.onerror और window.onunhandledrejection जैसे दूसरे एपीआई भी हमें इसकी जानकारी देते हैं.
हालांकि, दूसरी तरह की चेतावनियां भी होती हैं, जिन्हें इन मौजूदा एपीआई से कैप्चर नहीं किया जाता. जब आपकी साइट ऐसे एपीआई का इस्तेमाल करती है जो अब काम नहीं करता या किसी ब्राउज़र इंटरवेंशन का इस्तेमाल करता है, तो 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, JS में सभी तरह की समस्याओं
का पता लगाने के लिए डी-फ़ैक्टो एपीआई बन जाएगा. मान लें कि एक एपीआई से आपके ऐप्लिकेशन में
होने वाली हर गड़बड़ी का पता लगाया जा सकता है:
- ब्राउज़र इंटरवेंशन
- बंद किया गया
- सुविधा की नीति का उल्लंघन. crbug.com/867471 पर जाएं.
- JS अपवाद और गड़बड़ियां (फ़िलहाल,
window.onerrorकी ओर से सेवा दी जाती है). - बिना मैनेज किए गए JS प्रॉमिस अस्वीकार किया गया है (फ़िलहाल,
window.onunhandledrejectionमें सेवा दी जाती है)
मैं उन टूल को लेकर भी उत्साहित हूं जो ReportingObserver को उनके वर्कफ़्लो में शामिल करते हैं. Lighthouse ऐसे टूल का उदाहरण है जो "अब काम नहीं करने वाले एपीआई से बचाता है" ऑडिट चलाने पर, ब्राउज़र को बंद होने से पहले ही फ़्लैग कर देता है:
फ़िलहाल, लाइटहाउस DevTools प्रोटोकॉल का इस्तेमाल कंसोल मैसेज को स्क्रैप करने और डेवलपर को इन समस्याओं की रिपोर्ट करने के लिए करता है. इसके बजाय, काम न करने वाली रिपोर्ट और anticipatedRemoval तारीख जैसे अतिरिक्त मेटाडेटा के लिए, ReportingObserver पर स्विच करना दिलचस्प हो सकता है.
दूसरे संसाधन: