Error boundaries के हुन् र तिनीहरूले के पक्रन्छन्?

Question

Accepted Answer

**Error boundary** एक कम्पोनेन्ट हो जसले JavaScript त्रुटिहरू पक्रन्छ जो **रेन्डरिङको समयमा** यसको बाल रूखमा फालिन्छ, सम्पूर्ण अ्यापलिकेसन क्र्यास गर्नुको सट्टा फलब्याक 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`) — तिनीहरू रेन्डर प्रवाहको बाहिर छन्। - boundary आफैमा त्रुटिहरू, वा **SSR** को समयमा। ## व्यावहारिक नोटहरू - Error boundaries वर्तमानमा **class components** हुनुपर्छ (वा hook-friendly API को लागि `react-error-boundary` लाइब्रेरी प्रयोग गर्नुहोस्)। - स्वतन्त्र खण्डहरू (widgets, routes) को चारैतिर धेरै boundaries राख्नुहोस् ताकि एक विफल विजेटले सबै कुरा तल न ल्याए — एकल top-level boundary कुनै पनि त्रुटिलाई पूर्ण रिक्त पृष्ठमा परिणत गर्छ।