यदि आपने कुछ समय के लिए रिएक्ट के साथ काम किया है, तो आपको एक संदेश मिल सकता है, जिसमें लिखा है, “त्रुटि से निपटने के व्यवहार को अनुकूलित करने के लिए अपने ट्री में एक त्रुटि सीमा जोड़ने पर विचार करें।” जब भी आपके घटक क्रैश होते हैं, तो आपने इसे अपने ब्राउज़र कंसोल में देखा होगा।
त्रुटि होने पर बेहतर उपयोगकर्ता अनुभव प्रदान करने के लिए रिएक्ट एक त्रुटि सीमा का उपयोग करने की सिफारिश करता है।
प्रतिक्रिया में त्रुटि सीमा वर्ग क्या है?
त्रुटि सीमाएं वैनिला जावास्क्रिप्ट में ट्राई/कैच ब्लॉक की तरह काम करती हैं। अंतर यह है कि वे रिएक्ट घटकों में होने वाली त्रुटियों को पकड़ते हैं।
यदि यूआई घटक में कोई त्रुटि होती है, तो रिएक्ट उस घटक के भीतर ट्री को अनमाउंट कर देता है और इसे आपके द्वारा परिभाषित फ़ॉलबैक यूआई से बदल देता है। इसका मतलब यह है कि एक त्रुटि केवल उस घटक को प्रभावित करती है जिसमें यह होता है और शेष एप्लिकेशन अपेक्षा के अनुरूप काम करता है।
केवल रिएक्ट घटकों में त्रुटियों को पकड़ने के लिए त्रुटि सीमा का उपयोग करें।
एक त्रुटि सीमा वर्ग बनाना
आप निम्न में से एक या दोनों विधियों वाले वर्ग को परिभाषित करके एक त्रुटि सीमा बना सकते हैं।
GetDerivedStateFromError() फ़ंक्शन त्रुटि के पकड़े जाने के बाद घटक स्थिति को अपडेट करता है जबकि आप कंसोल में त्रुटि जानकारी लॉग करने के लिए कंपोनेंटडिडकैच() का उपयोग कर सकते हैं। आप त्रुटि रिपोर्टिंग सेवा को त्रुटियाँ भी भेज सकते हैं।
नीचे एक उदाहरण दिखाया गया है कि एक साधारण त्रुटि सीमा वर्ग कैसे बनाया जाए।
जब कोई त्रुटि होती है, getDerivedStateFromError() स्थिति को अपडेट करेगा और इसके परिणामस्वरूप फिर से प्रस्तुत करना ट्रिगर करेगा जो फ़ॉलबैक UI प्रदर्शित करेगा।
यदि आप स्क्रैच से त्रुटि सीमा वर्ग नहीं बनाना चाहते हैं, तो प्रतिक्रिया-त्रुटि-सीमा एनपीएम पैकेज का उपयोग करें। यह पैकेज एररबाउंड्री घटक प्रदान करता है जो उन घटकों के चारों ओर लपेटता है जो आपको लगता है कि त्रुटियां पैदा कर रहे हैं।
त्रुटि सीमा वर्ग का उपयोग करना
त्रुटियों को संभालने के लिए, घटक को त्रुटि बाउंडिंग वर्ग घटक के साथ लपेटें। आप एक शीर्ष-स्तरीय घटक या अलग-अलग घटकों को लपेट सकते हैं।
यदि आप एक शीर्ष-स्तरीय घटक को लपेटते हैं, तो त्रुटि प्रबंधन वर्ग आपके रिएक्ट एप्लिकेशन में सभी घटकों द्वारा फेंकी गई त्रुटियों को संभाल लेगा।
यदि आप एक व्यक्तिगत घटक को एक त्रुटि सीमा के साथ लपेटते हैं, तो उस घटक में एक त्रुटि दूसरे घटक को प्रस्तुत करने के तरीके को प्रभावित नहीं करेगी।
उदाहरण के लिए, Profile कॉम्पोनेंट में एक एरर अन्य कंपोनेंट्स जैसे Hero कंपोनेंट के रेंडर करने के तरीके को प्रभावित नहीं करेगा। जबकि प्रोफ़ाइल घटक क्रैश हो सकता है, शेष एप्लिकेशन ठीक काम करेगा। यह रिएक्ट द्वारा प्रदान की गई सामान्य सफेद फ़ॉलबैक स्क्रीन को रेंडर करने से कहीं बेहतर है।
जावास्क्रिप्ट में त्रुटियों को संभालना
प्रोग्रामिंग त्रुटियां डेवलपर्स और उपयोगकर्ताओं के लिए निराशाजनक हो सकती हैं। त्रुटियों को संभालने में विफल रहने से आपके उपयोगकर्ताओं को त्रुटि संदेशों को समझने में कठिनाई वाले खराब UI का सामना करना पड़ सकता है।
अपने रिएक्ट घटक का निर्माण करते समय, उपयोगकर्ता के अनुकूल त्रुटि संदेशों को प्रदर्शित करने के लिए, या तो खरोंच से या प्रतिक्रिया-त्रुटि-सीमा पैकेज का उपयोग करके एक त्रुटि सीमा वर्ग बनाएँ।
जल्दी या बाद में, एक उपयोगकर्ता एक ऐसे URL पर जाएगा जो आपकी वेबसाइट पर मौजूद नहीं है। उसके बाद उपयोगकर्ता क्या करता है आप पर निर्भर है।
वे बैक बटन दबा सकते हैं और आपकी साइट छोड़ सकते हैं। इसके बजाय, आप उन्हें आपकी वेबसाइट पर नेविगेट करने में मदद करने के लिए एक उपयोगी 404 पृष्ठ प्रदान कर सकते हैं।
रिएक्ट वेबसाइटों के लिए, आप एक उपयोगी 404 नहीं मिला पृष्ठ बनाने के लिए रिएक्ट राउटर का उपयोग कर सकते हैं।
404 पेज बनाएं
404 त्रुटि तब होती है जब आप किसी वेबसाइट पर किसी ऐसे पृष्ठ पर जाने का प्रयास करते हैं जिसे सर्वर नहीं ढूंढ पाता है। एक डेवलपर के रूप में, 404 त्रुटियों को संभालने का अर्थ है एक ऐसा पृष्ठ बनाना जिसे अनुरोधित पृष्ठ नहीं मिलने पर सर्वर प्रतिस्थापन के रूप में उपयोग करता है।
प्रतिक्रिया में, आप ऐसा नहीं मिला घटक बनाकर ऐसा करते हैं जो उन मार्गों पर प्रस्तुत करेगा जो मौजूद नहीं हैं।
यह लेख मानता है कि आपके पास रूटिंग सेट अप के साथ पहले से ही एक क्रियाशील रिएक्ट एप्लिकेशन है। यदि आप नहीं करते हैं, तो एक रिएक्ट एप्लिकेशन बनाएं और फिर रिएक्ट राउटर स्थापित करें।
NotFound.js नामक एक नई फ़ाइल बनाएँ और 404 पृष्ठ बनाने के लिए निम्न कोड जोड़ें।
* का उपयोग मार्गों में निर्दिष्ट नहीं किए गए सभी यूआरएल के लिए नोटफाउंड घटक प्रस्तुत करता है।
प्रतिक्रिया में अनुमार्गण
आप राउटर का उपयोग करके आसानी से उन सभी URL के लिए 404 पृष्ठ बना सकते हैं जो आपके रिएक्ट वेब ऐप में मौजूद नहीं हैं।
ब्राउज़र के पास एक डिफ़ॉल्ट 404 पेज होता है, लेकिन एक कस्टम पेज बनाने से आप अपने उपयोगकर्ताओं को बता सकते हैं कि क्या गलत हुआ और वे इसे कैसे ठीक कर सकते हैं। आप एक 404 पेज भी बना सकते हैं जो आपके ब्रांड के अनुकूल हो।
