Gestione degli errori in React with Error Boundaries [oc]

È una buona idea avere un limite di errore che avvolge i componenti di livello superiore. Puoi leggere ulteriori informazioni sui limiti di errore nei documenti di React.

A proposito, non esiste ancora un equivalente hook dei limiti di errore, quindi per ora è necessario creare un componente di classe per utilizzare questa funzione.

Normally you’d catch an error in javascript using a try/catch block.
try { thisFunctionDoesNotExist () } catch (error) { console.log('oops!', error)
}

L’istruzione nel blocco catch verrà eseguita solo se viene generata un’eccezione nel blocco try.

Se hai bisogno di qualcosa di simile per i componenti di React, esiste una funzionalità meno conosciuta chiamata Confini di errore. Utilizzando i limiti di errore, quando qualcosa è andato storto, è possibile mostrare all’utente una schermata di fallback e registrare l’errore.

Un limite di errore è un componente che rileva un errore generato in qualsiasi punto dell’albero dei componenti figlio.

class ErrorBoundary extends React.Component { state = { hasError: false } static getDerivedStateFromError(error) { return { hasError: true } } componentDidCatch(error, errorInfo) { logError(error, errorInfo) } render() { if (this.state.hasError) { return <p> ciao ENZO HO FATTO UN ERRORE! </p> } return this.props.children }
}