app.config.errorHandler per gli errori globali
Gestore globale degli errori, logging su Sentry/Datadog, visualizzazione degli errori in base all'ambiente.
app.config.errorHandler per gli errori globali è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Il gestore globale degli errori
Vue espone app.config.errorHandler, una singola funzione che intercetta gli errori provenienti da qualsiasi parte dell'app e non gestiti localmente. È l'ultima linea di difesa.
La firma del gestore
Riceve gli stessi tre argomenti di onErrorCaptured: l'errore, l'istanza del componente e una stringa informativa.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Configurazione
Lo configuri sull'istanza dell'app nel file di ingresso, prima del montaggio.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Intercettare gli errori non gestiti
Intercetta gli errori durante il rendering dei componenti, negli hook del ciclo di vita, nei watcher e nei gestori degli eventi di tutta l'app, compresi quelli che hanno superato gli hook locali onErrorCaptured.
Segnalazione a Sentry in produzione
In produzione, inoltri gli errori a un servizio di monitoraggio come Sentry, così può sapere quali problemi incontrano gli utenti.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Logging dettagliato in sviluppo
Durante lo sviluppo, registri nella console informazioni più dettagliate per eseguire rapidamente il debug.
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();
}
};Distinguere in base all'ambiente
Un gestore robusto fa entrambe le cose in un'unica funzione: segnala gli errori in produzione e registra log dettagliati in sviluppo.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Errori asincroni
Il gestore globale intercetta anche gli errori generati all'interno degli hook asincroni del ciclo di vita e dei watcher. Per le reiezioni di promise non gestite che si verificano al di fuori di Vue, aggiunga anche un listener su window.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relazione con i boundary
I boundary locali e onErrorCaptured gestiscono e contengono gli errori vicino al punto in cui si verificano; il gestore globale è la rete di sicurezza per tutto ciò che riesce a sfuggire. Li usi insieme.
Non nasconda gli errori in modo silenzioso
Eviti un gestore vuoto che nasconde gli errori. Registri almeno un log o segnali sempre l'errore: gli errori silenziosi rendono i bug invisibili e molto difficili da individuare.
Aggiungere contesto
Arricchisca le segnalazioni con la route corrente, l'id dell'utente o la versione dell'app, così potrà analizzare più rapidamente gli errori in produzione.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Verifica rapida
Quali errori gestisce app.config.errorHandler?
Riepilogo
Ha imparato che app.config.errorHandler = (err, instance, info) => {} è il gestore globale di tutti gli errori: segnali gli errori a Sentry in produzione, registri informazioni dettagliate durante lo sviluppo e lo affianchi ai boundary locali per una gestione degli errori stratificata e resiliente.
Domande Frequenti
La lezione «app.config.errorHandler per gli errori globali» è gratuita?
Sì — il testo completo di «app.config.errorHandler per gli errori globali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «app.config.errorHandler per gli errori globali»?
Gestore globale degli errori, logging su Sentry/Datadog, visualizzazione degli errori in base all'ambiente. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «app.config.errorHandler per gli errori globali»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Hook del ciclo di vita onErrorCaptured
- Componenti Error Boundary
- app.config.errorHandler per gli errori globali
- Gestione degli errori asincroni nei composable