Next.js App Router में Error Boundaries
अधिकांश Next.js ऐप्स तब अच्छी तरह काम करते हैं जब सब कुछ सही रहता है। जब चीजें गलत होती हैं, तो वे विफल हो जाते हैं। उच्च गुणवत्ता वाले ऐप्स इन विफलताओं को कुशलतापूर्वक संभालने के लिए error boundaries का उपयोग करते हैं।
App Router, Pages Router की तुलना में एक अलग मॉडल का उपयोग करता है। यह React Error Boundaries पर निर्भर करता है। आप अपने रूट के किसी भी स्तर पर समस्याओं को पकड़ने के लिए error.js फ़ाइलों का उपयोग करते हैं।
यह कैसे काम करता है:
• त्रुटियां (Errors) निकटतम error.js boundary के भीतर ही रहती हैं। • त्रुटियां तब तक ग्लोबल हैंडलर (global handler) पर नहीं जातीं जब तक कि आप ऐसा न चाहें। • आप अपने ऐप के विभिन्न हिस्सों के लिए अलग-अलग एरर स्क्रीन दिखा सकते हैं।
error.js फ़ाइल के नियम:
- यह एक Client Component होना चाहिए। ऊपर 'use client' का उपयोग करें।
- यह उस सेगमेंट और उसके सभी चाइल्ड कंपोनेंट्स में त्रुटियों को पकड़ता है।
- आपको विफल रेंडर को फिर से प्रयास करने के लिए एक reset function मिलता है।
नेटवर्क ड्रॉप जैसी अस्थायी समस्याओं के लिए reset function का उपयोग करें। इसका उपयोग स्थायी त्रुटियों के लिए न करें।
root layout के लिए global-error.js का उपयोग करें। मानक error.js, root layout.js में होने वाली त्रुटियों को नहीं पकड़ता है। global-error.js आपका अंतिम विकल्प है। यह root layout को बदल देता है, इसलिए इसे अपने स्वयं के और
टैग की आवश्यकता होती है।विभिन्न प्रकार की त्रुटियों का प्रबंधन करना:
- गायब डेटा के लिए notFound() का उपयोग करें। यह not-found.js को ट्रिगर करता है।
- अप्रत्याशित विफलताओं के लिए throw Error() का उपयोग करें। यह error.js को ट्रिगर करता है।
यह अलगाव आपके ऐप को व्यवस्थित रखता है। एक उपयोगकर्ता जो किसी गायब ब्लॉग पोस्ट को खोज रहा है, उसे 404 पेज दिखाई देता है। डेटाबेस क्रैश का सामना करने वाले उपयोगकर्ता को एरर मैसेज दिखाई देता है।
मैं एक AI इमेज जनरेटर के लिए इस पैटर्न का उपयोग करता हूँ। इस प्रक्रिया में API कॉल और फ़ाइल अपलोड जैसे कई चरण होते हैं। यदि एक चरण विफल हो जाता है, तो error boundary एक विशिष्ट संदेश दिखाती है। reset बटन उपयोगकर्ता को अपना प्रॉम्प्ट (prompt) खोए बिना फिर से प्रयास करने की अनुमति देता है।
एक अच्छा स्ट्रक्चर ऐसा दिखता है:
• global-error.js: अंतिम सुरक्षा जाल (safety net)। • error.js: रूट-लेवल की त्रुटियों को संभालता है। • dashboard/error.js: डैशबोर्ड के अंदर की त्रुटियों को संभालता है। • auth/error.js: लॉगिन या सेशन त्रुटियों को संभालता है।
यह दृष्टिकोण एक छोटी सी त्रुटि को आपकी पूरी वेबसाइट को खराब करने से रोकता है।