यदि आपने कुछ समय के लिए रिएक्ट के साथ काम किया है, तो आपको एक संदेश का सामना करना पड़ सकता है, जिसमें लिखा है "एक त्रुटि सीमा जोड़ने पर विचार करें त्रुटि से निपटने के व्यवहार को अनुकूलित करने के लिए आपका पेड़।" आपने इसे अपने ब्राउज़र कंसोल में देखा होगा जब भी आपके कंपोनेंट टकरा जाना।
त्रुटि होने पर बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए रिएक्ट एक त्रुटि सीमा का उपयोग करने की सिफारिश करता है।
प्रतिक्रिया में त्रुटि सीमा वर्ग क्या है?
त्रुटि सीमाएँ इस तरह काम करती हैं वेनिला जावास्क्रिप्ट में ब्लॉक को आज़माएं/पकड़ें. अंतर यह है कि वे रिएक्ट घटकों में होने वाली त्रुटियों को पकड़ते हैं। यदि यूआई घटक में कोई त्रुटि होती है, तो रिएक्ट उस घटक के भीतर ट्री को अनमाउंट कर देता है और इसे आपके द्वारा परिभाषित फ़ॉलबैक यूआई से बदल देता है। इसका मतलब यह है कि एक त्रुटि केवल उस घटक को प्रभावित करती है जिसमें यह होता है और शेष एप्लिकेशन अपेक्षा के अनुरूप काम करता है।
के अनुसार प्रतिक्रिया प्रलेखन, त्रुटि सीमा वर्ग त्रुटियों को नहीं पकड़ता है:
- इवेंट हैंडलर।
- अतुल्यकालिक कोड।
- सर्वर-साइड कोड।
- त्रुटियाँ त्रुटि सीमा में ही फेंक दी जाती हैं (इसके बच्चों के बजाय)।
उपरोक्त त्रुटियों के लिए, आप कोशिश/पकड़ ब्लॉक का उपयोग कर सकते हैं।
उदाहरण के लिए, में होने वाली त्रुटि को पकड़ने के लिए आयोजन प्रबंधकर्ता, निम्न कोड का उपयोग करें:
समारोहघटनाघटक() {
कॉन्स्ट [त्रुटि, सेट त्रुटि] = उपयोगस्टेट (व्यर्थ)कॉन्स्ट हैंडलक्लिक = () => {
कोशिश {
// कुछ करो
} पकड़ना (गलती) {
सेट त्रुटि (त्रुटि)
}
}
वापस करना (
<>
<डिव>{गलती? गलती: ""}डिव>
<बटनक्लिक पर={हैंडलक्लिक}>बटनबटन>
)
}
केवल रिएक्ट घटकों में त्रुटियों को पकड़ने के लिए त्रुटि सीमाओं का उपयोग करें।
एक त्रुटि सीमा वर्ग बनाना
आप निम्न विधियों में से एक या दोनों विधियों वाले वर्ग को परिभाषित करके एक त्रुटि सीमा बना सकते हैं:
- स्थिर getDerivedStateFromError ()
- कंपोनेंटडिडकैच ()
GetDerivedStateFromError() फ़ंक्शन त्रुटि पकड़े जाने के बाद घटक स्थिति को अपडेट करता है जबकि आप कंसोल में त्रुटि जानकारी लॉग करने के लिए घटकडिडकैच() का उपयोग कर सकते हैं। आप त्रुटि रिपोर्टिंग सेवा को त्रुटियाँ भी भेज सकते हैं।
नीचे एक उदाहरण दिखाया गया है कि एक साधारण त्रुटि सीमा वर्ग कैसे बनाया जाए।
कक्षात्रुटि सीमाका विस्तारप्रतिक्रिया.अवयव{
निर्माता(सहारा) {
बहुत अच्छा(सहारा);
यहराज्य = { गलती: असत्य };
}स्थिरgetDerivedStateFromError(गलती){
// अद्यतन स्थिति ताकि अगला रेंडर फ़ॉलबैक UI दिखाएगा।
वापस करना { गलती: गलती };
}कंपोनेंटडिडकैच (एरर, एररइन्फो) {
// त्रुटि को त्रुटि रिपोर्टिंग सेवा में लॉग करें
}प्रदान करना() {
अगर (यह।राज्य।गलती) {
// यहां एक कस्टम फ़ॉलबैक UI बनाएं
वापस करना<एच 1>लगता है कोई समस्या है।एच 1>;
}
वापस करनायहसहारा बच्चे;
}
}
निर्यातगलती करना त्रुटि सीमा;
जब कोई त्रुटि होती है, getDerivedStateFromError() स्थिति को अपडेट करेगा और इसके परिणामस्वरूप फिर से प्रस्तुत करना ट्रिगर करेगा जो फ़ॉलबैक UI प्रदर्शित करेगा।
यदि आप स्क्रैच से एरर बाउंड्री क्लास नहीं बनाना चाहते हैं, तो इसका उपयोग करें प्रतिक्रिया-त्रुटि-सीमा एनपीएम पैकेज. यह पैकेज एररबाउंड्री घटक प्रदान करता है जो उन घटकों के चारों ओर लपेटता है जो आपको लगता है कि त्रुटियां पैदा कर सकते हैं।
त्रुटि सीमा वर्ग का उपयोग करना
त्रुटियों को संभालने के लिए, त्रुटि सीमा वर्ग घटक के साथ घटक लपेटें। आप शीर्ष-स्तरीय घटक या अलग-अलग घटकों को लपेट सकते हैं।
यदि आप शीर्ष-स्तरीय घटक को लपेटते हैं, तो त्रुटि सीमा वर्ग रिएक्ट एप्लिकेशन में सभी घटकों द्वारा फेंकी गई त्रुटियों को संभाल लेगा।
<त्रुटि सीमा>
<अनुप्रयोग/>
त्रुटि सीमा>
यदि आप एक व्यक्तिगत घटक को एक त्रुटि सीमा के साथ लपेटते हैं, तो उस घटक में एक त्रुटि दूसरे घटक के रेंडर करने के तरीके को प्रभावित नहीं करेगी।
<त्रुटि सीमा>
<प्रोफ़ाइल/>
त्रुटि सीमा>
उदाहरण के लिए, प्रोफ़ाइल घटक में कोई त्रुटि प्रभावित नहीं करेगी कि हीरो घटक जैसे अन्य घटक कैसे प्रस्तुत करते हैं। जबकि प्रोफ़ाइल घटक क्रैश हो सकता है, शेष एप्लिकेशन ठीक काम करेगा। यह रिएक्ट द्वारा प्रदान की गई सामान्य सफेद फ़ॉलबैक स्क्रीन को रेंडर करने से कहीं बेहतर है।
जावास्क्रिप्ट में त्रुटियों को संभालना
प्रोग्रामिंग त्रुटियां डेवलपर्स और उपयोगकर्ताओं के लिए निराशाजनक हो सकती हैं। त्रुटियों को संभालने में विफल रहने से आपके उपयोगकर्ता खराब यूआई को समझने में मुश्किल त्रुटि संदेशों के साथ उजागर कर सकते हैं।
अपने रिएक्ट घटक का निर्माण करते समय, उपयोगकर्ता के अनुकूल त्रुटि संदेशों को प्रदर्शित करने के लिए या तो स्क्रैच से या प्रतिक्रिया-त्रुटि-सीमा पैकेज का उपयोग करके एक त्रुटि सीमा वर्ग बनाएँ।
