Next.js App Router میں Error Boundaries
زیادہ تر Next.js ایپس تب بہترین کام کرتی ہیں جب سب کچھ ٹھیک چل رہا ہو۔ جب چیزیں غلط ہو جاتی ہیں تو وہ ناکام ہو جاتی ہیں۔ اعلیٰ معیار کی ایپس ان ناکامیوں کو بہتر طریقے سے سنبھالنے کے لیے error boundaries کا استعمال کرتی ہیں۔
App Router، Pages Router کے مقابلے میں ایک مختلف ماڈل استعمال کرتا ہے۔ یہ React Error Boundaries پر انحصار کرتا ہے۔ آپ اپنے روٹ (route) کے کسی بھی لیول پر مسائل کو پکڑنے کے لیے error.js فائلوں کا استعمال کرتے ہیں۔
یہ کیسے کام کرتا ہے:
• غلطیاں (Errors) قریبی error.js boundary کے اندر ہی رہتی ہیں۔ • غلطیاں کسی گلوبل ہینڈلر (global handler) تک نہیں پہنچتیں جب تک کہ آپ ایسا نہ چاہیں۔ • آپ اپنی ایپ کے مختلف حصوں کے لیے مختلف error screens دکھا سکتے ہیں۔
error.js فائل کے اصول:
- اسے Client Component ہونا چاہیے۔ اوپر 'use client' کا استعمال کریں۔
- یہ اس سیگمنٹ اور اس کے تمام بچوں (children) میں غلطیوں کو پکڑتا ہے۔
- آپ کو ناکام رینڈر (failed render) کو دوبارہ کوشش کرنے کے لیے ایک reset function ملتا ہے۔
نیٹ ورک ڈراپ جیسے عارضی مسائل کے لیے reset function کا استعمال کریں۔ اسے مستقل غلطیوں کے لیے استعمال نہ کریں۔
root layout کے لیے global-error.js کا استعمال کریں۔ عام error.js، root layout.js میں ہونے والی غلطیوں کو نہیں پکڑتا۔ global-error.js آپ کا آخری سہارا ہے۔ یہ root layout کو تبدیل کر دیتا ہے، اس لیے اسے اپنے خود کے اور
ٹیگز کی ضرورت ہوتی ہے۔مختلف قسم کی غلطیوں (error types) کو سنبھالنا:
- گمشدہ ڈیٹا کے لیے notFound() کا استعمال کریں۔ یہ not-found.js کو ٹرگر کرتا ہے۔
- غیر متوقع ناکامیوں کے لیے throw Error() کا استعمال کریں۔ یہ error.js کو ٹرگر کرتا ہے۔
یہ علیحدگی آپ کی ایپ کو صاف ستھرا رکھتی ہے۔ ایک صارف جو کسی گمشدہ بلاگ پوسٹ کو تلاش کر رہا ہے، اسے 404 پیج نظر آتا ہے۔ ایک صارف جو ڈیٹا بیس کریش کا سامنا کر رہا ہے، اسے error message نظر آتا ہے۔
میں ایک AI image generator کے لیے اس پیٹرن کا استعمال کرتا ہوں۔ اس عمل میں API calls اور فائل اپ لوڈز جیسے بہت سے مراحل شامل ہیں۔ اگر ایک مرحلہ ناکام ہو جاتا ہے، تو error boundary ایک مخصوص پیغام دکھاتی ہے۔ reset بٹن صارف کو اپنا پرامپٹ (prompt) کھوئے بغیر دوبارہ کوشش کرنے کی اجازت دیتا ہے۔
ایک اچھا ڈھانچہ (structure) ایسا نظر آتا ہے:
• global-error.js: آخری حفاظتی جال (safety net)۔ • error.js: روٹ لیول کی غلطیوں کو سنبھالتا ہے۔ • dashboard/error.js: ڈیش بورڈ کے اندر غلطیوں کو سنبھالتا ہے۔ • auth/error.js: لاگ ان یا سیشن کی غلطیوں کو سنبھالتا ہے۔
یہ طریقہ کار ایک چھوٹی سی غلطی کو آپ کی پوری ویب سائٹ کو خراب کرنے سے روکتا ہے۔