ReportingObserver API: एक नए परिप्रेक्ष्य से वेब पृष्ठों के कोड पर एक नज़र

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, वह ReportingObserver API के लिए समर्पित है, एक तंत्र जो आपको अप्रचलित सुविधाओं के उपयोग के बारे में जानने की अनुमति देता है, और यह कि ब्राउज़र पेज कोड के काम में हस्तक्षेप करता है। ReportingObserver इस W3C विनिर्देश का हिस्सा है।

इसकी आवश्यकता क्यों है?

मान लीजिए कि आपके पास कुछ दिनों पहले लॉन्च किया गया एक महत्वपूर्ण वेब प्रोजेक्ट है। उपयोगकर्ताओं, कई में, पहले से ही उसकी साइट पर पंजीकरण करना शुरू कर दिया है। हर कोई जानता है कि इस तरह की परियोजनाएं, ताकि वे इसे आसानी से लागू कर सकें, कंपनियों के लिए पैसा लाएंगे, दृढ़ता से काम करना चाहिए। अब इस बारे में विचार करें कि यदि आपका क्लाइंट साइट के गलत व्यवहार का सामना करता है, तो इसका कारण किसी प्रकार की त्रुटि है, और आपको इसके बारे में कुछ भी पता नहीं है। वह त्रुटि को ठीक नहीं करेगा, जिस घटना को डेवलपर नहीं जानता है, वह बार-बार खुद को प्रकट करेगा, और यह, अंततः, परियोजना के व्यावसायिक लक्ष्यों को नकारात्मक रूप से प्रभावित करेगा।

साइट आगंतुक, संभवतः, वेब विकास के बारे में कुछ भी नहीं जानता है, इसलिए जब साइट अजीब व्यवहार करना शुरू कर देती है, तो समस्या को समझने की कोशिश करने के लिए उसे कंसोल में देखने की संभावना नहीं है, जिसे एक संदेश के रूप में व्यक्त किया जाता है [Intervention] या [Deprecation] ।

तथ्य की बात के रूप में, साइट आगंतुकों को गलतियों की परवाह नहीं करनी चाहिए। उन्हें बस जरूरत है स्थिरता, सुविधा और पूर्वानुमान की। कीड़े एक डेवलपर समस्या है, और इस समस्या से निपटने में डेवलपर्स की मदद करने के लिए ReportingObserver API मौजूद है। ReportingObserver का उपयोग करके ReportingObserver आप डेवलपर को पुराने APIs के उपयोग के बारे में या ब्राउज़र पेज के साथ हस्तक्षेप के बारे में रिपोर्ट भेज सकते हैं। अन्य त्रुटि हैंडलिंग उपकरण ऐसी चीजों का जवाब नहीं देते हैं।

यहाँ क्या ReportingObserver साथ काम कर रहा है

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   console.log(report.type, report.url, report.body); } }, { buffered: true }); observer.observe(); 

आइए इस एपीआई का उपयोग कैसे करें के बारे में बात करते हैं।

ReportingObserver एपीआई संरचना

ब्राउज़रों के पास एपीआई हैं जो त्रुटियों को पकड़ने के लिए डिज़ाइन किए गए हैं। उदाहरण के लिए, window.onerror । हालाँकि, window.onerror पृष्ठ के संचालन के दौरान उत्पन्न होने वाली सभी समस्या स्थितियों को ट्रैक नहीं करता है। उदाहरण के लिए, यह टूल आपके कोड में जावास्क्रिप्ट अपवादों या सिंटैक्स त्रुटियों के कारण रनटाइम त्रुटियों के बारे में जानने में मदद करता है। हालाँकि, यदि आप एक पुरानी सुविधा या ब्राउज़र हस्तक्षेप का उपयोग करने के बारे में सूचना प्राप्त करते हैं, तो window.onerror इस तरह की अधिसूचना का जवाब नहीं देगा। यह इस स्थिति में है कि ReportingObserver काम आएगा।

ReportingObserver API का उपयोग करने के लिए, आपको कॉलबैक के साथ प्रदान करके संबंधित पर्यवेक्षक ऑब्जेक्ट बनाने की आवश्यकता होती है, जब बुलाया जाता है, तो रिपोर्ट को पृष्ठ पर आने वाली समस्याओं की सूची के रूप में इसे भेजा जाएगा। हमने पहले ही ReportingObserver साथ काम करने के लिए आवश्यक कोड की समीक्षा कर ली है। अब आइए एक उदाहरण देखें कि कॉलबैक पर कौन सा डेटा भेजा जा रहा है:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

ReportingObserver साथ काम करते समय ReportingObserver आप रिपोर्ट फ़िल्टर कर सकते हैं। उदाहरण के लिए, यहां एक डिज़ाइन है जो आपको अप्रचलित सुविधाओं के उपयोग पर केवल रिपोर्ट प्राप्त करने की अनुमति देता है:

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

यदि, ReportingObserver ऑब्जेक्ट बनाते समय, आप buffered: true पास करते हैं buffered: true प्रॉपर्टी, इससे ऐसी ऑब्जेक्ट के निर्माण से पहले उत्पन्न रिपोर्ट को देखना संभव होगा:

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

पुरानी सुविधाओं के उपयोग या कोड में ब्राउज़र के हस्तक्षेप के बारे में निगरानी रिपोर्टों को रोकने के लिए, आप पर्यवेक्षक ऑब्जेक्ट को अक्षम कर सकते हैं:

 observer.disconnect(); 

ReportingObserver API उदाहरण

यहाँ ReportingObserver पर्यवेक्षक ऑब्जेक्ट का उपयोग करने का एक उदाहरण है। यहाँ सर्वर पर एक रिपोर्ट भेजने के संगठन का आरेख है:

 const report = new ReportingObserver((reports, observer) => {  for (const report of reports) {     const stringifiedReport = JSON.stringify(report.body);     //        sendReport(stringifiedReport); } }, { types: ['deprecation'], buffered: true }); 

परिणाम

ReportingObserver API डेवलपर को उसके द्वारा अपने प्रोजेक्ट में होने वाली त्रुटियों के बारे में प्राप्त जानकारी की सीमा का विस्तार करने की अनुमति देता है जब वास्तविक उपयोगकर्ता उनके साथ काम करते हैं। यह एपीआई क्रोम 69 में उपलब्ध है, जानकारी है कि यह सुविधा एज में दिखाई देगी। चाहे वह फ़ायरफ़ॉक्स में कुछ समान लागू करने की योजना बनाई गई हो या सफारी अभी भी अज्ञात है।

ReportingObserver बारे में विवरण यहां और यहां पाया जा सकता है ।

प्रिय पाठकों! क्या आप के बारे में सोचते हैं ReportingObserver API?