La gestion des erreurs en React.js est généralement réalisée de deux manières principales :

1. Utilisation de l’opérateur try/catch : On peut envelopper le code qui peut potentiellement lancer une exception dans un bloc try/catch pour gérer les erreurs.

```
try { // Code susceptible de lancer une exception
}
catch (error) { // Gestion de l’erreur
}
```

1. Utilisation des Error Boundaries : React 16 a introduit un nouveau concept appelé “Error Boundaries”. Une Error Boundary est un composant React qui est utilisé pour attraper les erreurs JavaScript dans leur arborescence de composant, enregistrer ces erreurs, et afficher une interface de repli. Ce n’est pas un hook ou une fonction mais un composant de classe qui utilise au moins l’une des méthodes de cycle de vie `static getDerivedStateFromError()` ou `componentDidCatch()`.

```
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; }

static getDerivedStateFromError(error) { // Mettez à jour l’état pour que le prochain rendu montre l’UI de repli. return { hasError: true }; } componentDidCatch(error, info) { // Vous pouvez également enregistrer l’erreur dans un service de rapports d’erreurs logErrorToMyService(error, info); } render() { if (this.state.hasError) { // Vous pouvez rendre n’importe quelle interface de repli custom return

Something went wrong.

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

Ensuite, vous utilisez ces Error Boundaries dans votre application :

```

```

Ainsi quand `MyComponent` jette une erreur, l’UI de repli est montrée.

Comment gère-t-on les erreurs dans Reactjs ?

Something went wrong.