Error Boundary

React 🟡 Mid

Définition

Composant classe qui intercepte les erreurs de rendu de son sous-arbre et affiche une UI de secours ; il n'existe toujours pas d'équivalent hook. React 19 (5 décembre 2024) ajoute aux racines les options onCaughtError et onUncaughtError et ne relance plus les erreurs de rendu (elles vont à window.reportError ou console.error). Next.js 16.3 (3 août 2026) fournit catchError (next/error) : une frontière qui n'interfère pas avec notFound/redirect et expose retry() pour re-rendre des Server Components en échec.

Analogie

Comme un fusible électrique : il saute pour protéger le reste du circuit.

Exemple de code

class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) { logToService(error, info.componentStack); }
  render() {
    return this.state.hasError ? <p>Oups !</p> : this.props.children;
  }
}
// React 19 : journalisation globale à la racine
createRoot(el, {
  onCaughtError: (err, info) => logToService(err, info),
  onUncaughtError: (err, info) => logToService(err, info),
}).render(<App />);

Cas d'usage

Encapsuler des sections critiques pour que le reste de l'app continue de fonctionner en cas d'erreur.

Anti-pattern

Ne pas logger l'erreur dans componentDidCatch, perdant des informations précieuses en production.

Termes liés

#core#interview#resilience

En entretien

Explique-moi une Error Boundary.
C'est un composant classe qui intercepte les erreurs de rendu de son sous-arbre et affiche une UI de secours ; il n'existe toujours pas d'équivalent hook. React 19 ajoute aux racines les options onCaughtError et onUncaughtError et ne relance plus les erreurs de rendu, qui vont désormais à window.reportError ou console.error.
Quel anti-pattern affaiblit une Error Boundary en production ?
Ne pas logger l'erreur dans componentDidCatch, ce qui fait perdre des informations précieuses pour diagnostiquer le problème en production. Comme un fusible électrique, elle protège le reste du circuit mais il faut quand même enregistrer pourquoi il a sauté.
Quelle amélioration apporte Next.js 16.3 sur les erreurs ?
Il fournit catchError (next/error), une frontière qui n'interfère pas avec notFound/redirect et expose retry() pour re-rendre des Server Components en échec. C'est plus fin qu'une Error Boundary classique React sur ce périmètre serveur.

Sources

Fiche mise à jour le 2026-09-27