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