Comment gérez-vous les erreurs d'exécution dans un arbre React ?

Les error boundaries attrapent les erreurs levées pendant le rendu, dans les méthodes de cycle de vie et dans les constructeurs situés en dessous d'elles, puis rendent un fallback au lieu de démonter toute l'application. Ce sont encore des composants de classe qui utilisent getDerivedStateFromError et componentDidCatch, ou une bibliothèque d'enrobage. Elles n'attrapent pas les erreurs dans les gestionnaires d'événements, les callbacks asynchrones ni dans la frontière elle-même, donc ceux-là exigent un try catch ordinaire plus du reporting.

Les error boundaries attrapent tout ce qui est levé pendant le rendu du sous-arbre en dessous d'elles, et glissent un fallback pour qu'un widget cassé n'emporte pas la page. J'utilise en général l'enrobage react-error-boundary plutôt que d'écrire la classe moi-même, puisqu'il me donne un gestionnaire de reset gratuitement. Les trous sont la partie que les gens oublient : rien de levé dans un onClick, un setTimeout ou une promesse rejetée non gérée n'atteint une frontière, donc ceux-là ont encore besoin d'un try catch avec un état d'erreur explicite. Sur le placement, une frontière à la racine, c'est en gros un écran de crash plus joli. Ce que je fais vraiment, c'est envelopper chaque zone utile indépendamment, donc la barre latérale, le panneau principal et tout embed tiers ont chacun la leur, avec un fallback qui dit ce qui a échoué et propose un réessai qui réinitialise la frontière et relance la récupération. Chaque frontière remonte à notre outil de suivi d'erreurs avec la pile de composants et le contexte utilisateur dans componentDidCatch, et dans React 19 je positionne aussi onUncaughtError à la racine pour que rien ne passe sans être journalisé.