Window.onerror के साथ जावास्क्रिप्ट त्रुटियों की निगरानी करना

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

Window.onerror घटना के लिए सुन रहा है

आप onerror इवेंट के लिए window.onerror फंक्शन दे सकते हैं जो एक एरर हैंडलर की भूमिका निभाता है:

 window.onerror = function(msg, url, lineNo, columnNo, error) { // ...   ... return false; } 

त्रुटि होने पर इस फ़ंक्शन को कहा जाता है; इसके लिए निम्न तर्क दिए गए हैं:

• msg - त्रुटि संदेश। उदाहरण के लिए, Uncaught ReferenceError: foo is not defined ।
• url - स्क्रिप्ट या दस्तावेज़ का पता जिसमें त्रुटि हुई। उदाहरण के लिए, /dist/app.js ।
• lineNo - पंक्ति संख्या जहाँ त्रुटि हुई (यदि समर्थित है)।
• columnNo - पंक्ति का कॉलम नंबर (यदि समर्थित हो)।
• error - error वस्तु (यदि समर्थित है)।

पहले चार तर्क डेवलपर को बताते हैं कि कौन सी स्क्रिप्ट, किस पंक्ति में, और इस पंक्ति के किस कॉलम में त्रुटि हुई। अंतिम तर्क, प्रकार Error का एक उद्देश्य, संभवतः सभी तर्कों का सबसे महत्वपूर्ण है। चलिए इसके बारे में बात करते हैं।

त्रुटि ऑब्जेक्ट और Error.prototyp.stack गुण

पहली नज़र में, Error ऑब्जेक्ट कुछ विशेष नहीं है। इसमें तीन काफी मानक गुण हैं - message , lineNumber और lineNumber । यह डेटा, window.onerror ईवेंट हैंडलर को दी गई जानकारी को बेमानी माना जा सकता है।

इस मामले में वास्तविक मूल्य गैर-मानक संपत्ति Error.prototype.stack । यह संपत्ति कॉल स्टैक (त्रुटि स्टैक) तक पहुंच देती है, आपको यह पता लगाने की अनुमति देती है कि कार्यक्रम में उस समय क्या हो रहा था जब त्रुटि हुई थी, जो फ़ंक्शन कॉल ने अपनी उपस्थिति से पहले की थी। कॉल स्टैक ट्रेसिंग डीबगिंग प्रक्रिया का एक महत्वपूर्ण हिस्सा हो सकता है। और, इस तथ्य के बावजूद कि stack संपत्ति मानक नहीं है, यह सभी आधुनिक ब्राउज़रों में उपलब्ध है।

यह वही है जो Chrome 46 में त्रुटि ऑब्जेक्ट की stack गुण जैसा दिखता है।

 "Error: foobar\n    at new bar (<anonymous>:241:11)\n    at foo (<anonymous>:245:5)\n at <anonymous>:250:5\n    at <anonymous>:251:3\n at <anonymous>:267:4\n at callFunction (<anonymous>:229:33)\n    at <anonymous>:239:23\n at <anonymous>:240:3\n at Object.InjectedScript.\_evaluateOn (<anonymous>:875:140)\n    at Object.InjectedScript.\_evaluateAndWrap (<anonymous>:808:34)" 

इससे पहले कि हम एक गैर-जिम्मेदार स्ट्रिंग है। जब इस संपत्ति की सामग्री इस रूप में प्रस्तुत की जाती है, तो इसके साथ काम करना असुविधाजनक है। यहां बताया गया है कि स्वरूपण के बाद भी ऐसा ही होगा।

 Error: foobar at new bar (<anonymous>:241:11) at foo (<anonymous>:245:5) at callFunction (<anonymous>:229:33) at Object.InjectedScript._evaluateOn (<anonymous>:875:140) at Object.InjectedScript._evaluateAndWrap (<anonymous>:808:34) 

अब, स्वरूपण के बाद, त्रुटि स्टैक बहुत स्पष्ट दिखता है, यह तुरंत स्पष्ट हो जाता है कि त्रुटियों को डीबग करते समय stack गुण बहुत महत्वपूर्ण क्यों है।

हालांकि, यहां सब कुछ आसानी से नहीं हो रहा है। stack गुण को मानकीकृत नहीं किया गया है, इसे अलग-अलग ब्राउज़रों में अलग-अलग तरीके से लागू किया गया है। यहां एक उदाहरण है कि इंटरनेट एक्सप्लोरर 11 में त्रुटि स्टैक कैसा दिखता है।

 Error: foobar at bar (Unknown script code:2:5) at foo (Unknown script code:6:5) at Anonymous function (Unknown script code:11:5) at Anonymous function (Unknown script code:10:2) at Anonymous function (Unknown script code:1:73) 

आप पिछले उदाहरण के साथ तुलना में देख सकते हैं, कि यहां न केवल स्टैक फ्रेम का प्रतिनिधित्व करने के लिए एक अलग प्रारूप का उपयोग किया जाता है, बल्कि यह भी है कि प्रत्येक फ्रेम के लिए कम डेटा है। उदाहरण के लिए, Chrome new कीवर्ड का उपयोग करने के उदाहरणों की पहचान करता है और अन्य घटनाओं के बारे में (विशेष रूप से, फ़ंक्शन कॉल के बारे में अधिक विस्तृत जानकारी प्रदान करता है। _evaluateOn और। _evaluateAndWrap )। उसी समय, यहां हमने केवल IE और क्रोम की तुलना में क्या दिया। अन्य ब्राउज़र स्टैक के बारे में डेटा प्रदर्शित करने और इस डेटा में शामिल जानकारी का चयन करने के लिए अपने स्वयं के दृष्टिकोण का उपयोग करते हैं।

यह सब एक समान रूप में लाने के लिए, आप तीसरे पक्ष के उपकरण का उपयोग कर सकते हैं। उदाहरण के लिए, रेवेन-जेएस इसके लिए ट्रेसकिट का उपयोग करता है। Stacktrace.js और कुछ अन्य परियोजनाएं एक ही उद्देश्य से काम करती हैं।

विभिन्न ब्राउज़रों द्वारा window.onerror समर्थन की विशेषताएं

windows.onerror घटना काफी समय से ब्राउज़रों में मौजूद है। विशेष रूप से, यह IE6 और फ़ायरफ़ॉक्स 2 में पाया जा सकता है। यहां समस्या यह है कि सभी ब्राउज़र अलग-अलग तरीकों से windows.onerror को लागू करते हैं। उदाहरण के लिए, यह इस घटना के संचालकों को पारित तर्कों की संख्या और संरचना की चिंता करता है।

यहाँ एक तालिका है जो प्रमुख ब्राउज़रों में onerror हैंडलर को दिए onerror तर्कों को onerror है।

ब्राउज़र	संदेश	यूआरएल	lineno	colNo	errorObj
फ़ायरफ़ॉक्स	वहाँ है	वहाँ है	वहाँ है	वहाँ है	वहाँ है
क्रोम	वहाँ है	वहाँ है	वहाँ है	वहाँ है	वहाँ है
धार	वहाँ है	वहाँ है	वहाँ है	वहाँ है	वहाँ है
IE 11	वहाँ है	वहाँ है	वहाँ है	वहाँ है	वहाँ है
IE10	वहाँ है	वहाँ है	वहाँ है	वहाँ है	नहीं
IE 9.8	वहाँ है	वहाँ है	वहाँ है	नहीं	नहीं
सफारी 10 और इसके बाद के संस्करण	वहाँ है	वहाँ है	वहाँ है	वहाँ है	वहाँ है
सफ़ारी ९	वहाँ है	वहाँ है	वहाँ है	वहाँ है	नहीं
Android ब्राउज़र 4.4	वहाँ है	वहाँ है	वहाँ है	वहाँ है	नहीं

शायद आश्चर्य की बात नहीं है, इंटरनेट एक्सप्लोरर 8, 9, और 10 में onerror लिए सीमित समर्थन है। हालाँकि, यह असामान्य लग सकता है कि सफारी ब्राउज़र में त्रुटि ऑब्जेक्ट के लिए समर्थन केवल 10 वें संस्करण में दिखाई दिया, 2016 में जारी किया गया। इसके अलावा, लीगेसी मोबाइल डिवाइस हैं जो मानक एंड्रॉइड ब्राउज़र का उपयोग करते हैं, जो त्रुटि ऑब्जेक्ट का भी समर्थन नहीं करता है। एंड्रॉइड के आधुनिक संस्करणों में, इस ब्राउज़र को क्रोम मोबाइल द्वारा बदल दिया गया है।

यदि हमारे निपटान में कोई त्रुटि वस्तु नहीं है, तो स्टैक ट्रेस के बारे में कोई डेटा नहीं है। इसका मतलब यह है कि ब्राउज़र जो त्रुटि के ऑब्जेक्ट का समर्थन नहीं करते हैं, वे onerror हैंडलर का उपयोग करने के लिए मानक स्क्रिप्ट में स्टैक जानकारी प्रदान नहीं करते हैं। और यह, जैसा कि हमने कहा है, बहुत महत्वपूर्ण है।

विंडो के लिए पॉलिफ़िल डेवलपमेंट। कोशिश / कैच निर्माण का उपयोग करके

ब्राउज़र में स्टैक के बारे में जानकारी प्राप्त करने के लिए जो onerror हैंडलर में एक onerror ऑब्जेक्ट पास करने का समर्थन नहीं करता है, आप निम्न चाल का उपयोग कर सकते हैं। आप कोड को एक try/catch निर्माण में लपेट सकते हैं और त्रुटियों को स्वयं पकड़ सकते हैं। परिणामी त्रुटि ऑब्जेक्ट में सभी आधुनिक ब्राउज़रों में, जो हमें चाहिए वह stack प्रॉपर्टी है।
invoke() सहायक विधि कोड पर एक नज़र डालें, जो ऑब्जेक्ट की दी गई विधि को कॉल करता है, इसे तर्कों की एक सरणी देता है।

 function invoke(obj, method, args) { return obj[method].apply(this,args); } 

यहाँ इसका उपयोग कैसे करना है।

 invoke(Math, 'max', [1,2]); //  2 

यहां एक ही invoke() , लेकिन अब विधि कॉल को try/catch में लपेटा गया है, जो आपको संभावित त्रुटियों को पकड़ने की अनुमति देता है।

 function invoke(obj, method, args) { try {   return obj[method].apply(this,args); } catch(e) {   captureError(e);//      throw e;//      } } invoke(Math,'highest',[1,2]); //  ,     Math.highest 

बेशक, यह बहुत ही महंगा है कि ऐसी संरचनाओं को सभी स्थानों पर मैन्युअल रूप से जोड़ा जाए जहां उनकी आवश्यकता हो सकती है। एक सार्वभौमिक सहायक समारोह बनाकर इस कार्य को सरल बनाया जा सकता है।

 function wrapErrors(fn) { //      if(!fn.__wrapped__) {   fn.__wrapped__ = function() {     try{       return fn.apply(this,arguments);     }catch(e){       captureError(e);//          throw e;//          }   }; } return fn.__wrapped__; } var invoke = wrapErrors(function(obj, method, args) { returnobj[method].apply(this,args); }); invoke(Math,'highest',[1,2]);//,   Math.highest 

चूंकि जावास्क्रिप्ट एकल-थ्रेडेड कोड निष्पादन मॉडल का उपयोग करता है, इसलिए इस आवरण का उपयोग केवल उन फ़ंक्शन कॉल के साथ किया जाना चाहिए जो नए ढेर की शुरुआत में हैं। इसमें सभी फ़ंक्शन कॉल को लपेटने की आवश्यकता नहीं है।

परिणामस्वरूप, यह पता चलता है कि इस फ़ंक्शन का उपयोग निम्न स्थानों पर करने की आवश्यकता है:

• जहां एप्लिकेशन शुरू होता है (उदाहरण के लिए, jQuery का उपयोग करते समय, $(document).ready फ़ंक्शन)
• ईवेंट हैंडलर में (उदाहरण के लिए, addEventListener या फॉर्म के निर्माण में $.fn.click )
• टाइमर घटनाओं द्वारा बुलाए गए कॉलबैक में (उदाहरण के लिए, यह requestAnimationFrame या requestAnimationFrame

यहाँ wrapErrors फ़ंक्शन का उपयोग करके एक उदाहरण दिया wrapErrors है।

 $(wrapErrors(function () {//    doSynchronousStuff1();//     setTimeout(wrapErrors(function () {   doSynchronousStuff2();//      })); $('.foo').click(wrapErrors(function () {   doSynchronousStuff3();//     })); })); 

इस तरह के निर्माणों को स्वयं कोड में जोड़ा जा सकता है, लेकिन यह बहुत समय लेने वाला कार्य है। ऐसी स्थितियों में एक सुविधाजनक विकल्प के रूप में, आप त्रुटियों के साथ काम करने के लिए पुस्तकालयों पर विचार कर सकते हैं, उदाहरण के लिए, ऐसे तंत्र हैं जो त्रुटियों addEventListener लिए उपकरणों के setTimeout addEventListener और setTimeout addEventListener हैं।

सर्वर में त्रुटि स्थानांतरण

इसलिए, अब हमारे पास अपने निपटान के साधनों में त्रुटि जानकारी को या तो windows.onerror का उपयोग करने या try/catch आधार पर सहायक कार्यों का उपयोग करने का मतलब है। क्लाइंट की ओर से ये त्रुटियां होती हैं, और उनके अवरोधन के बाद, हम उनसे निपटना चाहेंगे और उन्हें खत्म करने के उपाय करेंगे। ऐसा करने के लिए, उन्हें हमारे सर्वर पर स्थानांतरित करना होगा। ऐसा करने के लिए, आपको एक वेब सेवा तैयार करने की आवश्यकता है जो HTTP के माध्यम से त्रुटि जानकारी स्वीकार करती है, और फिर किसी तरह इसे आगे की प्रक्रिया के लिए सहेजती है, उदाहरण के लिए, यह एक लॉग फ़ाइल या डेटाबेस में लिखती है।

यदि यह वेब सेवा वेब एप्लिकेशन के समान डोमेन पर स्थित है, तो XMLHttpRequest पर्याप्त होगा। निम्न उदाहरण दिखाता है कि सर्वर से डेटा स्थानांतरित करने के लिए jQuery से AJAX प्रश्नों को निष्पादित करने के लिए फ़ंक्शन का उपयोग कैसे करें।

 function captureError(ex){ var errorData = {   name:ex.name,// : ReferenceError   message:ex.line,// : x is undefined   url:document.location.href,   stack:ex.stack//   ; ,     ! }; $.post('/logger/js/',{   data:errorData }); } 

ध्यान रखें कि यदि आपको सर्वर को त्रुटियों के बारे में जानकारी भेजने के लिए क्रॉस-डोमेन अनुरोध भेजने की आवश्यकता है, तो आपको ऐसे अनुरोधों का समर्थन करने का ध्यान रखना होगा।

परिणाम

आपने त्रुटियों को पकड़ने और सर्वर पर उनके बारे में जानकारी भेजने के लिए एक सेवा बनाने की मूल बातें सीखी हैं। विशेष रूप से, यहां हमने निम्नलिखित मुद्दों की जांच की:

• onerror इवेंट की विशेषताएं और विभिन्न ब्राउज़रों में इसका समर्थन।
• उन मामलों में कॉल स्टैक के बारे में जानकारी प्राप्त करने के लिए onerror try/catch मैकेनिज्म का उपयोग करना जहां onerror एरर ऑब्जेक्ट के साथ काम करने का समर्थन नहीं करता है।
• डेवलपर के सर्वर में त्रुटि डेटा स्थानांतरित करें।

उपरोक्त तंत्र कैसे काम करता है, इसके बारे में जानने के बाद, आपने बुनियादी ज्ञान प्राप्त कर लिया है जो आपको काम के दौरान अतिरिक्त विवरणों को स्पष्ट करते हुए त्रुटियों के साथ काम करने के लिए अपनी खुद की प्रणाली बनाने की अनुमति देगा। शायद यह परिदृश्य उन मामलों के लिए विशेष रूप से प्रासंगिक है जब यह एक निश्चित आवेदन की बात आती है, जिसमें, सुरक्षा कारणों से, यह तीसरे पक्ष के पुस्तकालयों का उपयोग करने की योजना नहीं है। यदि आपका आवेदन तृतीय-पक्ष कोड के उपयोग की अनुमति देता है, तो आप जेएस त्रुटियों की निगरानी के लिए सही उपकरण पा सकते हैं। इस तरह के उपकरणों में संतरी , रोलबार , ट्रैकजेएस और इसी तरह की अन्य परियोजनाएं हैं।

प्रिय पाठकों! जेएस त्रुटियों की निगरानी के लिए आप कौन से उपकरण का उपयोग करते हैं?