Frontières d’erreur
Implémentez des frontières d’erreur fondées sur des classes avec componentDidCatch et getDerivedStateFromError pour empêcher les erreurs de rendu non interceptées de faire planter toute l’application.
Frontières d’erreur est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi des limites d’erreurs ?
Par défaut, une erreur non interceptée pendant le rendu, dans une méthode de cycle de vie ou dans un constructeur fait planter tout l’arbre React. Les limites d’erreurs interceptent ces erreurs dans un sous-arbre et vous permettent d’effectuer un rendu de remplacement.
Uniquement les composants de classe
Les limites d’erreurs doivent être des composants de classe (toujours en 2026 : il n’existe pas encore d’équivalent sous forme de hook). Le hook useErrorBoundary existe dans des bibliothèques comme react-error-boundary.
getDerivedStateFromError
Méthode statique appelée lorsqu’un descendant lève une erreur. Elle renvoie une mise à jour de l’état qui déclenche le rendu de remplacement.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch pour la journalisation
Utilisez componentDidCatch pour journaliser l’erreur auprès d’un service (Sentry, Datadog) : la méthode reçoit à la fois l’erreur et la pile de composants React.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Envelopper la racine de l’application
Enveloppez votre composant App de niveau supérieur dans une limite d’erreurs afin d’éviter l’écran blanc de la mort.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Limites précises par route ou composant
Une limite globale est le minimum. Ajoutez des limites par route afin qu’un plantage dans une section ne vide pas toute l’application.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Ce que les limites d'erreur ne détectent pas
Les limites ne détectent pas : les erreurs dans les gestionnaires d'événements, le code asynchrone (setTimeout, promises), les erreurs générées pendant le SSR ni les erreurs dans la limite elle-même. Utilisez try/catch dans ces situations.
Erreurs dans les gestionnaires d'événements
Entourez les gestionnaires d'événements d'un try/catch et appelez manuellement la fonction reportError.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}Bibliothèque react-error-boundary
Le package communautaire react-error-boundary fournit une API adaptée aux composants fonctionnels, avec la possibilité de réinitialiser la limite.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Réinitialisation après récupération
Prévoyez un moyen de récupérer la situation (bouton de nouvelle tentative, changement de route). La limite doit réinitialiser son état afin de ne plus afficher le contenu de secours.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Développement et production
En développement, React affiche toujours la surimpression d'erreur rouge, même avec une limite : c'est intentionnel. En production, seul le contenu de secours de la limite s'affiche.
Bonnes pratiques
1) Une limite globale à la racine de l'application. 2) Des limites par route. 3) Des limites ciblées autour des widgets indépendants. 4) Consignez toujours les erreurs dans un service de suivi. 5) Affichez des actions de récupération (réessayer, revenir à l'accueil). 6) N'ignorez jamais les erreurs en silence.
Vérification rapide
Quels types d'erreurs les limites d'erreur de React ne détectent-elles pas ?
Récapitulatif : limites d'erreur
Composant de classe avec getDerivedStateFromError statique et componentDidCatch. Entoure un sous-arbre pour intercepter les erreurs survenant pendant le rendu. Ne détecte pas les erreurs des gestionnaires d'événements, les erreurs asynchrones ni celles du SSR. Placez une limite globale à la racine de l'application, ainsi que des limites par route et par widget. Consignez les erreurs dans Sentry. Proposez une action de récupération. La bibliothèque react-error-boundary offre une ergonomie plus simple.
Questions Fréquemment Posées
La leçon « Frontières d’erreur » est-elle gratuite ?
Oui — le texte complet de « Frontières d’erreur » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Frontières d’erreur » ?
Implémentez des frontières d’erreur fondées sur des classes avec componentDidCatch et getDerivedStateFromError pour empêcher les erreurs de rendu non interceptées de faire planter toute l’application. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Frontières d’erreur » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Composants composés avec Context
- Render Props et schémas HOC
- Portails pour les modales et les infobulles
- Frontières d’erreur