app.config.errorHandler pour les erreurs globales
Gestionnaire d’erreurs global, journalisation dans Sentry/Datadog et affichage des erreurs adapté à l’environnement
app.config.errorHandler pour les erreurs globales est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Le gestionnaire global d’erreurs
Vue expose app.config.errorHandler, une seule fonction qui intercepte les erreurs provenant de n’importe où dans l’app et qui n’ont pas été gérées localement. C’est votre dernière ligne de défense.
La signature du gestionnaire
Il reçoit les trois mêmes arguments que onErrorCaptured : l’erreur, l’instance du composant et une chaîne d’information.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Le configurer
Configurez-le sur l’instance de l’app dans votre fichier d’entrée, avant le montage.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Intercepter les erreurs non gérées
Il intercepte les erreurs provenant du rendu des composants, des crochets du cycle de vie, des observateurs et des gestionnaires d’événements dans toute l’app, y compris celles qui se sont propagées au-delà des crochets locaux onErrorCaptured.
Signaler les erreurs à Sentry en production
En production, transmettez les erreurs à un service de surveillance tel que Sentry afin d’être informé des défaillances rencontrées par les utilisateurs.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Journalisation détaillée en développement
Pendant le développement, journalisez davantage de détails dans la console afin de déboguer rapidement.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Adapter le comportement à l’environnement
Un gestionnaire robuste fait les deux : il signale les erreurs en production et les journalise en détail en développement, dans une seule fonction.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Erreurs asynchrones
Le gestionnaire global intercepte également les erreurs levées dans les crochets asynchrones du cycle de vie et les observateurs. Pour les rejets de promesses non gérés directement en dehors de Vue, ajoutez également un écouteur window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Lien avec les barrières
Les barrières locales et onErrorCaptured gèrent et contiennent les erreurs près de leur origine ; le gestionnaire global sert de filet de sécurité pour tout ce qui leur échappe. Utilisez-les ensemble.
Ne masquez pas les erreurs en silence
Évitez un gestionnaire vide qui masque les erreurs. Au minimum, journalisez-les ou signalez-les : les échecs silencieux rendent les bogues invisibles et très difficiles à retrouver.
Ajouter du contexte
Enrichissez les rapports avec la route actuelle, l’identifiant de l’utilisateur ou la version de l’app afin d’accélérer l’analyse des erreurs en production.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Vérification rapide
Que prend en charge app.config.errorHandler ?
Récapitulatif
Vous avez appris que app.config.errorHandler = (err, instance, info) => {} est le gestionnaire global qui intercepte tout : signalez les erreurs à Sentry en production, journalisez-les en détail pendant le développement et associez-le à des barrières locales pour une gestion des erreurs en couches et résiliente.
Questions Fréquemment Posées
La leçon « app.config.errorHandler pour les erreurs globales » est-elle gratuite ?
Oui — le texte complet de « app.config.errorHandler pour les erreurs globales » 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 « app.config.errorHandler pour les erreurs globales » ?
Gestionnaire d’erreurs global, journalisation dans Sentry/Datadog et affichage des erreurs adapté à l’environnement 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 3 sur 4.
Combien de temps prend la leçon « app.config.errorHandler pour les erreurs globales » ?
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