𝗘𝗿𝗿𝗼𝗿 𝗕𝗼𝘂𝗻𝗱𝗮𝗿𝗶𝗲𝘀 𝗶𝗻 𝗡𝗲𝘅𝘁.𝗷𝘀 𝗔𝗽𝗽 𝗥𝗼𝘂𝘁𝗲𝗿
जेव्हा सर्व काही व्यवस्थित चालते, तेव्हा बहुतेक Next.js ॲप्स उत्तम काम करतात. पण जेव्हा गोष्टी चुकतात, तेव्हा ती अपयशी ठरतात. उच्च दर्जाची ॲप्स अशा त्रुटी (failures) अत्यंत सुलभतेने हाताळण्यासाठी error boundaries चा वापर करतात.
App Router हे Pages Router पेक्षा वेगळ्या मॉडेलचा वापर करते. हे React Error Boundaries वर अवलंबून असते. तुमच्या राऊटच्या कोणत्याही स्तरावरील समस्या पकडण्यासाठी तुम्ही error.js फाइल्स वापरू शकता.
हे कसे कार्य करते:
• त्रुटी (Errors) जवळच्या error.js boundary मध्येच राहतात. • जोपर्यंत तुम्ही इच्छित नाही, तोपर्यंत त्रुटी global handler कडे जात नाहीत. • तुम्ही तुमच्या ॲपच्या वेगवेगळ्या भागांसाठी वेगवेगळ्या error screens दाखवू शकता.
error.js फाइलचे नियम:
- ती Client Component असणे आवश्यक आहे. वरच्या बाजूला 'use client' वापरा.
- ती त्या सेगमेंटमधील आणि त्याच्या सर्व चाईल्ड (children) मधील त्रुटी पकडते.
- अयशस्वी रेंडर पुन्हा करण्याचा प्रयत्न करण्यासाठी तुम्हाला एक reset function मिळते.
नेटवर्क ड्रॉप सारख्या तात्पुरत्या समस्यांसाठी reset function वापरा. कायमस्वरूपी त्रुटींसाठी (permanent errors) याचा वापर करू नका.
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 image generator साठी या पॅटर्नचा वापर करतो. या प्रक्रियेत API calls आणि file uploads सारख्या अनेक पायऱ्या असतात. जर एखादी पायरी अयशस्वी झाली, तर error boundary एक विशिष्ट संदेश दाखवते. reset बटण वापरकर्त्याला त्यांचा प्रॉम्प्ट (prompt) न गमावता पुन्हा प्रयत्न करण्याची परवानगी देते.
एक चांगली रचना अशी दिसते:
• global-error.js: अंतिम सुरक्षा कवच (safety net). • error.js: रूट-लेव्हलच्या त्रुटी हाताळते. • dashboard/error.js: डॅशबोर्डमधील त्रुटी हाताळते. • auth/error.js: लॉगिन किंवा सेशनच्या त्रुटी हाताळते.
हा दृष्टिकोन एका लहान त्रुटीमुळे तुमची संपूर्ण वेबसाइट खराब होण्यापासून वाचवतो.