Se hai lavorato con React per un po', potresti aver incontrato un messaggio che dice "Considera l'aggiunta di un limite di errore a il tuo albero per personalizzare il comportamento di gestione degli errori. Potresti averlo visto nella console del tuo browser ogni volta che i tuoi componenti incidente.
React consiglia di utilizzare un limite di errore per fornire una migliore esperienza utente quando si verifica un errore.
Qual è la classe limite di errore in React?
I limiti di errore funzionano come il blocco try/catch in JavaScript vanilla. La differenza è che rilevano gli errori che si verificano nei componenti React. Se si verifica un errore in un componente dell'interfaccia utente, React smonta l'albero all'interno di quel componente e lo sostituisce con l'interfaccia utente di fallback che hai definito. Ciò significa che un errore riguarda solo il componente in cui si verifica e il resto dell'applicazione funziona come previsto.
Secondo il Reagire alla documentazione, le classi limite di errore non rilevano errori in:
- Gestori di eventi.
- Codice asincrono.
- Codice lato server.
- Errori generati nel limite di errore stesso (piuttosto che nei suoi figli).
Per gli errori di cui sopra, puoi utilizzare il blocco try/catch.
Ad esempio, per rilevare un errore che si verifica nel file gestore di eventi, utilizzare il seguente codice:
funzioneEventComponent() {
cost [errore, setError] = useState(nullo)cost handleClick = () => {
Tentativo {
// Fare qualcosa
} presa (errore) {
setError (errore)
}
}
ritorno (
<>
<div>{errore? errore: ""}div>
<pulsanteal clic={handleClick}>Pulsantepulsante>
)
}
Utilizza i limiti di errore per rilevare gli errori solo nei componenti React.
Creazione di una classe limite di errore
Puoi creare un limite di errore definendo una classe che contiene uno o entrambi i seguenti metodi:
- static getDerivedStateFromError()
- componenteDidCatch()
La funzione getDerivedStateFromError() aggiorna lo stato del componente una volta rilevato l'errore, mentre puoi utilizzare componentDidCatch() per registrare le informazioni sull'errore nella console. È inoltre possibile inviare gli errori a un servizio di segnalazione degli errori.
Di seguito è riportato un esempio che mostra come creare una semplice classe limite di errore.
classeErrorBoundaryestendeReagire.Componente{
costruttore(oggetti di scena) {
super(oggetti di scena);
Questo.stato = { errore: falso };
}staticogetDerivedStateFromError(errore){
// Aggiorna lo stato in modo che il rendering successivo mostri l'interfaccia utente di fallback.
ritorno { errore: errore};
}componentDidCatch (errore, errorInfo) {
// Registra l'errore in un servizio di segnalazione errori
}rendere() {
Se (Questo.stato.errore) {
// Crea qui un'interfaccia utente di fallback personalizzata
ritorno<h1>Sembra che ci sia un problema.h1>;
}
ritornoQuesto.oggetti di scena.bambini;
}
}
esportarepredefinito ErrorBoundary;
Quando si verifica un errore, getDerivedStateFromError() aggiornerà lo stato e di conseguenza attiverà un nuovo rendering che visualizzerà l'interfaccia utente di fallback.
Se non vuoi creare la classe del limite di errore da zero, usa il metodo pacchetto NPM react-error-boundary. Questo pacchetto fornisce il componente ErrorBoundary che avvolge i componenti che si ritiene possano generare errori.
Utilizzo della classe limite di errore
Per gestire gli errori, eseguire il wrapping dei componenti con il componente della classe limite di errore. È possibile eseguire il wrapping del componente di primo livello o dei singoli componenti.
Se esegui il wrapping del componente di primo livello, la classe limite di errore gestirà gli errori generati da tutti i componenti nell'applicazione React.
<ErrorBoundary>
<App/>
ErrorBoundary>
Se esegui il wrapping di un singolo componente con un ErrorBoundary, un errore in quel componente non influirà sulla modalità di rendering di un altro componente.
<ErrorBoundary>
<Profilo/>
ErrorBoundary>
Ad esempio, un errore nel componente del profilo non influirà sul rendering di un altro componente come il componente Eroe. Mentre il componente del profilo potrebbe bloccarsi, il resto dell'applicazione funzionerà correttamente. Questo è molto meglio del rendering della schermata di fallback bianca generica fornita da React.
Gestione degli errori in JavaScript
Gli errori di programmazione possono essere frustranti per sviluppatori e utenti. La mancata gestione degli errori può esporre gli utenti a una brutta interfaccia utente con messaggi di errore difficili da comprendere.
Quando crei il tuo componente React, crea una classe limite di errore da zero o utilizzando il pacchetto react-error-boundary per visualizzare messaggi di errore intuitivi.