Error boundaries کیا ہیں اور یہ کیا پکڑتے ہیں؟

Question

IT Interview Practice · Accepted Answer

ایک **error boundary** ایک ایسا جزو ہے جو **rendering** کے دوران اپنے child tree میں پھینکی گئی JavaScript غلطیوں کو پکڑتا ہے، پورے ایپ کو کریش کرنے کی بجائے ایک fallback UI دکھاتا ہے، اور غلطی کو ریکارڈ کر سکتا ہے۔ ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## جو یہ پکڑتا ہے — اور جو یہ نہیں پکڑتا ✅ پکڑتا ہے: **render** میں غلطیاں، **lifecycle methods** میں، اور اس کے نیچے کے اجزاء کے constructors میں۔ ❌ **نہیں پکڑتا**: - **event handlers** میں غلطیاں (وہاں عام `try/catch` استعمال کریں)۔ - **Async** کوڈ (promises, `setTimeout`) — یہ render flow کے باہر ہیں۔ - خود boundary میں غلطیاں، یا **SSR** کے دوران۔ ## عملی نوٹس - Error boundaries کو فی الوقت **class components** ہونا چاہیے (یا hook-friendly API کے لیے `react-error-boundary` لائبریری استعمال کریں)۔ - آزاد حصوں کے ارد گرد متعدد boundaries رکھیں (widgets، routes) تاکہ ایک ناکام widget ہر چیز کو نیچے نہ لے جائے — ایک ہی top-level boundary کسی بھی غلطی کو مکمل طور پر خالی صفحہ میں تبدیل کر دیتا ہے۔

جو یہ پکڑتا ہے — اور جو یہ نہیں پکڑتا

عملی نوٹس

متعلقہ سوالات