Error Boundary
Implementare Error Boundary basati su classi con componentDidCatch e getDerivedStateFromError per impedire che errori di rendering non gestiti causino il crash dell’intera app
Error Boundary è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché usare gli Error Boundary?
Per impostazione predefinita, un errore non gestito durante il rendering, in un metodo del ciclo di vita o in un costruttore manda in crash l'intero albero React. Gli Error Boundary intercettano questi errori in un sottoalbero e permettono di eseguire il rendering di un fallback.
Solo componenti di classe
Gli Error Boundary devono essere componenti di classe, ancora nel 2026: non esiste ancora un equivalente basato su hook. L'hook useErrorBoundary esiste in librerie come react-error-boundary.
getDerivedStateFromError
Metodo statico chiamato quando un componente discendente genera un errore. Restituisca un aggiornamento dello stato che attivi il rendering del fallback.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch per la registrazione
Utilizzi componentDidCatch per registrare l'errore in un servizio, come Sentry o Datadog: riceve sia l'errore sia lo stack dei componenti React.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Avvolgere la radice dell'app
Avvolga l'App di livello superiore in un Error Boundary per evitare la schermata bianca della morte.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Boundary granulari per route o widget
Un boundary globale è il minimo indispensabile. Aggiunga boundary per ogni route, così un crash in una sezione non svuota l'intera app.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Cosa NON intercettano gli Error Boundary
Gli Error Boundary NON intercettano: errori nei gestori degli eventi, nel codice asincrono (setTimeout, promises), errori generati durante il rendering SSR ed errori generati all'interno del boundary stesso. In questi casi utilizzi try/catch.
Errori nei gestori degli eventi
Avvolga i gestori degli eventi in try/catch e chiami una funzione manuale reportError.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}Libreria react-error-boundary
Il pacchetto della community react-error-boundary espone un'API adatta ai function component e supporta il reset.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Ripristino dopo il recupero
Offra un modo per recuperare (un pulsante per ritentare, un cambio di route). Il boundary deve reimpostare il proprio stato per smettere di mostrare il fallback.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Sviluppo e produzione
In sviluppo, React continua a mostrare l'overlay rosso degli errori anche in presenza di un boundary: è intenzionale. In produzione viene mostrato solo il fallback del boundary.
Best practice
1) Boundary globale alla radice dell'app. 2) Boundary per ogni route. 3) Boundary granulari intorno ai widget indipendenti. 4) Registri sempre gli errori in un servizio di tracking. 5) Mostri azioni di recupero (ritentare, tornare alla home). 6) Non ignori gli errori senza mostrarli.
Verifica rapida
Quali tipi di errore NON intercettano gli Error Boundary di React?
Riepilogo: Error Boundary
Class component con static getDerivedStateFromError + componentDidCatch. Avvolge un sottoalbero per intercettare gli errori che si verificano durante il rendering. Non intercetta gli errori nei gestori degli eventi, nel codice asincrono o durante SSR. Posizioni un boundary globale alla radice dell'app, oltre a boundary per route e per widget. Registri gli errori in Sentry. Offra un'azione di recupero. La libreria react-error-boundary offre un'ergonomia più semplice.
Domande Frequenti
La lezione «Error Boundary» è gratuita?
Sì — il testo completo di «Error Boundary» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Error Boundary»?
Implementare Error Boundary basati su classi con componentDidCatch e getDerivedStateFromError per impedire che errori di rendering non gestiti causino il crash dell’intera app Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Error Boundary»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.