कम शब्दों में कहा जाए तो
शहर में एक नया ऑब्ज़र्वर मिला है! 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 कंसोल की चेतावनियां.](https://developer.chrome.com/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=9&hl=hi)
कोई व्यक्ति सोच सकता है कि 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 का इस्तेमाल किया जा सकता है.](https://developer.chrome.com/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=9&hl=hi)
फ़िलहाल, लाइटहाउस DevTools प्रोटोकॉल का इस्तेमाल करता है
ताकि कंसोल मैसेज को स्क्रैप किया जा सके और इन समस्याओं की शिकायत डेवलपर से की जा सके. इसके बजाय,
ReportingObserver
पर स्विच करना अच्छा रहेगा
सुविधा को बंद करने वाली रिपोर्ट और अतिरिक्त मेटाडेटा के लिए, जैसे कि
anticipatedRemoval
तारीख.
दूसरे संसाधन: