Cosa sono gli error boundaries e cosa catturano?

Question

Accepted Answer

Un **error boundary** è un component che cattura gli errori JavaScript lanciati **durante il rendering** nel suo albero di componenti figlio, mostra un'interfaccia di fallback invece di far crollare l'intera app, e può registrare l'errore. ```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: ``` ## Perché è importante ✅ Cattura: errori nel **render**, nei **lifecycle methods**, e nei costruttori dei componenti sottostanti. ❌ **Non** cattura: - Errori negli **event handlers** (usa un normale `try/catch` lì). - Codice **async** (promises, `setTimeout`) — sono al di fuori del flusso di rendering. - Errori nel boundary stesso, o durante **SSR**. ## Note pratiche - Gli error boundaries devono attualmente essere **class components** (o usa la libreria `react-error-boundary` per un'API friendly con hook). - Posiziona diversi boundaries intorno a sezioni indipendenti (widgets, routes) in modo che un widget difettoso non abbatta tutto — un singolo boundary di livello superiore trasforma qualsiasi errore in una pagina completamente vuota.