Que sont les limites d'erreur (error boundaries) et qu'est-ce qu'elles interceptent ?

Question

Accepted Answer

Une **error boundary** est un composant qui intercepte les erreurs JavaScript levées **pendant le rendu** dans son arborescence enfant, affiche une interface de secours au lieu de faire planter toute l'application, et peut enregistrer l'erreur. ```jsx class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; // render the fallback on next render } componentDidCatch(error, info) { logToService(error, info); // side effect: report it } render() { return this.state.hasError ? : this.props.children; } } // wrap an independent section so its failure doesn't blank the page: ``` ## Ce qu'elle intercepte — et ce qu'elle n'intercepte pas ✅ Intercepte : les erreurs dans **render**, dans les **lifecycle methods** et dans les constructeurs des composants en dessous. ❌ N'intercepte pas : - Les erreurs dans les **event handlers** (utilisez un `try/catch` normal là). - Le code **async** (promises, `setTimeout`) — ils sont en dehors du flux de rendu. - Les erreurs dans la limite elle-même, ou pendant le **SSR**. ## Pourquoi c'est important - Les limites d'erreur doivent actuellement être des **composants de classe** (ou utilisez la bibliothèque `react-error-boundary` pour une API compatible avec les hooks). - Placez plusieurs limites autour de sections indépendantes (widgets, routes) afin qu'un widget défaillant ne fasse pas tout s'effondrer — une seule limite au niveau supérieur transforme n'importe quelle erreur en une page entièrement vierge.