# Come funzionano Error Boundaries in React, con esempi

> Come funzionano gli Error Boundaries in React: componenti che catturano gli errori dei figli per migliorare stabilità e affidabilità dell'app.

- Autore / Author: Diego Betto (https://diegobetto.com/about/)
- Pubblicato / Published: 2024-07-17
- URL: https://diegobetto.com/error-boundaries-in-react/
- Tag: errori, boundaries, react, javascript

In un'applicazione React, gli errori non sono solo fastidiosi, ma possono anche causare il crollo dell'intera applicazione, con conseguenti danni all'esperienza utente. Per ovviare a questo problema, React introduce il concetto di **Error Boundaries**.

Gli Error Boundaries sono componenti speciali che fungono da catcher di errori per i componenti sottostanti. Quando un errore si verifica all'interno di un componente figlio, React cerca l'Error Boundary più vicino nell'albero dei componenti e ne attiva il metodo `componentDidCatch` per gestire l'errore.

## Come funzionano gli Error Boundaries

Un Error Boundary è un componente React di tipo classe che implementa il metodo `componentDidCatch`. Questo metodo viene chiamato quando un errore si verifica all'interno del componente stesso o di uno dei suoi componenti figlio. All'interno di `componentDidCatch`, è possibile registrare l'errore, aggiornare lo stato del componente e visualizzare un'interfaccia utente di fallback al posto del componente che ha generato l'errore.

## Esempio di Error Boundary

```jsx
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error, info) {
    console.error("Error:", error);
    this.setState({ error });
  }

  render() {
    const { error } = this.state;
    if (error) {
      return (
        <div>
          <h1>Si è verificato un errore!</h1>
          <p>Messaggio di errore: {error.message}</p>
        </div>
      );
    }

    return this.props.children;
  }
}
```

In questo esempio, l'Error Boundary registra l'errore nella console e aggiorna lo stato del componente con l'oggetto errore. Il render metodo quindi controlla lo stato dell'errore e, se presente, visualizza un'interfaccia utente di fallback al posto del componente figlio.

## Vantaggi degli Error Boundaries

Gli Error Boundaries offrono diversi vantaggi:

- **Prevengono il crash dell'applicazione**: Isolando l'errore all'interno dell'Error Boundary, si impedisce che l'intero applicazione da crollare.
- **Migliora l'esperienza utente**: Visualizzando un'interfaccia utente di fallback, si fornisce all'utente un'esperienza più gradevole rispetto a un semplice crash dell'applicazione.
- **Facilitano il debug**: Registrando l'errore e fornendo informazioni utili, gli Error Boundaries facilitano il debug dell'applicazione.

## Casi d'uso degli Error Boundaries

Gli Error Boundaries possono essere utilizzati in diverse situazioni:

- **Componenti critici**: Proteggere i componenti critici dell'applicazione da errori che potrebbero causare gravi problemi.
- **Componenti terzi**: Avvolgere componenti terzi di cui non si ha il controllo completo per evitare che errori in questi componenti causino il crash dell'intera applicazione.
- **Sezioni sperimentali**: Proteggere sezioni sperimentali dell'applicazione da errori che potrebbero non essere ancora stati testati a fondo.

## Il modulo "react-error-boundary"

[<strong>react-error-boundary</strong>](https://www.npmjs.com/package/react-error-boundary)
è un pacchetto npm popolare che semplifica la creazione di error boundaries in React. Fornisce un
componente riutilizzabile che può essere avvolto attorno ad altri componenti per catturare gli
errori e visualizzare un'interfaccia utente di fallback personalizzata.

### Funzionalità principali di react-error-boundary

- **Cattura errori JavaScript**: Cattura gli errori che si verificano nei componenti secondari, impedendo il crash dell'intera applicazione.
- **Visualizza un'interfaccia utente di fallback**: Permette di personalizzare l'interfaccia utente visualizzata quando si verifica un errore, fornendo una migliore esperienza utente.
- **Registra gli errori**: Consente di registrare gli errori catturati per un'analisi e un debug successivi.
- **Supporta diverse modalità di fallback**: Offre diverse opzioni per la visualizzazione dell'interfaccia utente di fallback, come testo semplice, componenti React o URL esterni.

### Esempi di utilizzo di react-error-boundary

Ecco un esempio di come utilizzare **react-error-boundary** per avvolgere un componente e visualizzare un messaggio di errore generico quando si verifica un errore:

```jsx
import React from "react";
import ErrorBoundary from "react-error-boundary";

const MyComponent = () => {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
};
```

In questo esempio, se si verifica un errore all'interno del componente `MyComponent`, l'error boundary visualizzerà un messaggio di errore generico al posto del componente.

È anche possibile personalizzare l'interfaccia utente di fallback utilizzando un componente React. Ad esempio, il seguente codice visualizza un componente `ErrorFallback` quando si verifica un errore:

```jsx
import React from "react";
import ErrorBoundary from "react-error-boundary";
import ErrorFallback from "./ErrorFallback";

const MyComponent = () => {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <MyComponent />
    </ErrorBoundary>
  );
};
```

## Conclusione

Gli Error Boundaries sono uno strumento prezioso per la gestione degli errori in React. Consentono di prevenire il
crollo dell'applicazione, migliorare l'esperienza utente e facilitare il debug. Ti consiglio di utilizzare gli Error
Boundaries in tutte le applicazioni React per garantire una maggiore stabilità e affidabilità.

Buon coding 😉