Hook de cycle de vie onErrorCaptured
Interception des erreurs des composants enfants, renvoi de false pour arrêter la propagation et objets d’erreur
Hook de cycle de vie onErrorCaptured est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Intercepter les erreurs dans les composants
Vue fournit la fonction de cycle de vie onErrorCaptured pour intercepter les erreurs lancées par les composants descendants. Elle permet à un parent d'intercepter les échecs provenant de son sous-arbre.
La signature de la fonction
onErrorCaptured reçoit trois arguments : l'erreur, l'instance du composant qui l'a levée et une chaîne info décrivant l'endroit où elle s'est produite.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});L'argument err
Le premier argument est l'objet d'erreur levé — généralement une instance de Error avec un message et une trace que vous pouvez consigner ou afficher.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});L'argument instance
Le deuxième argument est l'instance du composant qui a provoqué l'erreur, ce qui est utile pour le débogage ou pour ajouter du contexte à vos rapports.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});L'argument info
Le troisième argument est une chaîne qui indique quel cycle de vie ou quelle opération a déclenché l'erreur — par exemple « fonction de rendu », « fonction setup » ou une fonction de cycle de vie particulière.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Uniquement les erreurs des enfants
Point important, onErrorCaptured intercepte les erreurs des descendants, mais pas celles du propre setup ou rendu du composant. Placez cette fonction dans un ancêtre du code que vous souhaitez protéger.
Arrêter la propagation
Par défaut, une erreur capturée continue de se propager vers les gestionnaires des ancêtres et le gestionnaire global. Renvoyez false pour l'empêcher d'aller plus loin.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Pourquoi arrêter la propagation
Renvoyer false contient l'erreur localement — c'est utile lorsque ce composant gère entièrement l'échec (par exemple, en affichant une solution de repli) et ne souhaite pas que le gestionnaire global soit déclenché également.
La laisser remonter
Si vous voulez que des gestionnaires de niveau supérieur (ou le gestionnaire global) voient aussi l'erreur, ne renvoyez pas false. La fonction la consigne alors localement et la laisse remonter.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Une utilisation concrète
Une utilisation courante consiste à consigner l'erreur et à utiliser un indicateur de récupération. Définissez un indicateur réactif pour afficher une solution de repli tout en signalant l'erreur à des fins de diagnostic.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Particularités de l'asynchrone
onErrorCaptured intercepte les erreurs survenant lors du rendu des descendants, du cycle de vie et des gestionnaires synchrones. Certaines erreurs asynchrones (rejets de promesses non interceptés) sont mieux gérées au niveau global — ce point sera abordé plus loin.
Vérification rapide
Que fait le renvoi de false depuis onErrorCaptured ?
Récapitulatif
Vous avez appris que onErrorCaptured((err, instance, info)) intercepte les erreurs des composants descendants. La chaîne info fournit le contexte du cycle de vie et renvoyer false arrête la propagation afin que le composant puisse gérer l'échec localement.
Questions Fréquemment Posées
La leçon « Hook de cycle de vie onErrorCaptured » est-elle gratuite ?
Oui — le texte complet de « Hook de cycle de vie onErrorCaptured » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Hook de cycle de vie onErrorCaptured » ?
Interception des erreurs des composants enfants, renvoi de false pour arrêter la propagation et objets d’erreur Tu pratiques Vue 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 Vue Academy ?
Aucune expérience préalable n'est requise. Vue 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 1 sur 4.
Combien de temps prend la leçon « Hook de cycle de vie onErrorCaptured » ?
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 Vue Academy ?
Oui. Chaque leçon Vue 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
- Hook de cycle de vie onErrorCaptured
- Composants de limite d’erreurs
- app.config.errorHandler pour les erreurs globales
- Gestion asynchrone des erreurs dans les composables