error boundaries શું છે અને તેઓ શું પકડે છે?

Question

Accepted Answer

એક **error boundary** એ એક component છે જે **rendering** દરમિયાન તેના child tree માં ફેંકવામાં આવેલ JavaScript errors ને પકડે છે, સમગ્ર app ને ક્રેશ થતા રોકવાને બદલે fallback UI દર્શાવે છે, અને error ને log કરી શકે છે. ```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** માં errors, **lifecycle methods** માં, અને તેની નીચેના components ના constructors માં। ❌ પકડતું **નથી**: - **event handlers** માં errors (ત્યાં સામાન્ય `try/catch` વાપરો). - **Async** કોડ (promises, `setTimeout`) — તેઓ render flow ની બહાર છે. - boundary તાત્પર્યમાં errors, અથવા **SSR** દરમિયાન. ## વ્યાવહારિક નોંધો - Error boundaries વર્તમાને **class components** હોવું જોઈએ (અથવા hook-friendly API માટે `react-error-boundary` library નો ઉપયોગ કરો). - સ્વતંત્ર વિભાગોની ચારપાસ અને વધુ boundaries મૂકો (widgets, routes) જેથી એક ખરાબ widget બધું કરતું નથી દૂર કરે — એક એકલ top-level boundary કોઈપણ error ને સંપૂર્ણ blank page માં ફેરવે છે.