app.config.errorHandler für globale Fehler
Globaler Fehler-Handler, Protokollierung in Sentry/Datadog und umgebungsabhängige Fehleranzeige
app.config.errorHandler für globale Fehler ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Der globale Fehler-Handler
Vue stellt app.config.errorHandler bereit, eine einzelne Funktion, die Fehler aus beliebigen Bereichen der App abfängt, sofern sie nicht lokal behandelt wurden. Sie ist Ihre letzte Verteidigungslinie.
Die Signatur des Handlers
Er erhält dieselben drei Argumente wie onErrorCaptured: den Fehler, die Komponenteninstanz und einen Info-String.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Einrichtung
Konfigurieren Sie ihn in Ihrer Einstiegsdatei an der App-Instanz, bevor Sie die App mounten.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Nicht behandelte Fehler abfangen
Er fängt Fehler beim Rendern von Komponenten, in Lifecycle-Hooks, Watchern und Event-Handlern in der gesamten App ab – einschließlich solcher, die lokale onErrorCaptured-Hooks passiert haben.
In Produktion an Sentry melden
Leiten Sie Fehler in der Produktion an einen Monitoring-Dienst wie Sentry weiter, damit Sie von Fehlern erfahren, auf die Benutzer stoßen.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Detailliertes Logging in der Entwicklung
Protokollieren Sie während der Entwicklung ausführlichere Informationen in der Konsole, um Fehler schnell zu debuggen.
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();
}
};Nach Umgebung unterscheiden
Ein robuster Handler erledigt beides: Er meldet Fehler in der Produktion und protokolliert sie in der Entwicklung ausführlich – und zwar in einer einzigen Funktion.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Asynchrone Fehler
Der globale Handler fängt auch Fehler ab, die innerhalb asynchroner Lifecycle-Hooks und Watcher ausgelöst werden. Für rohe, nicht behandelte Promise-Ablehnungen außerhalb von Vue fügen Sie zusätzlich einen window-Listener hinzu.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Beziehung zu Boundaries
Lokale Boundaries und onErrorCaptured behandeln und kapseln Fehler in der Nähe ihres Entstehungsorts. Der globale Handler ist das Sicherheitsnetz für alles, was entweicht. Verwenden Sie beide gemeinsam.
Fehler nicht lautlos verschlucken
Vermeiden Sie einen leeren Handler, der Fehler verbirgt. Protokollieren oder melden Sie sie immer zumindest – lautlose Fehler machen Bugs unsichtbar und äußerst schwer nachzuverfolgen.
Kontext hinzufügen
Ergänzen Sie Meldungen um die aktuelle Route, die Benutzer-ID oder die App-Version, damit sich Produktionsfehler schneller analysieren lassen.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Kurze Überprüfung
Welche Fehler behandelt app.config.errorHandler?
Zusammenfassung
Sie haben gelernt, dass app.config.errorHandler = (err, instance, info) => {} der globale Catch-all-Handler ist: Melden Sie Fehler in der Produktion an Sentry, protokollieren Sie sie während der Entwicklung ausführlich und kombinieren Sie ihn mit lokalen Boundaries, um Fehler geschichtet und robust zu behandeln.
Häufig gestellte Fragen
Ist die Lektion „app.config.errorHandler für globale Fehler“ kostenlos?
Ja — der vollständige Text von „app.config.errorHandler für globale Fehler“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „app.config.errorHandler für globale Fehler“?
Globaler Fehler-Handler, Protokollierung in Sentry/Datadog und umgebungsabhängige Fehleranzeige Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „app.config.errorHandler für globale Fehler“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Lifecycle-Hook onErrorCaptured
- Komponenten als Error Boundaries
- app.config.errorHandler für globale Fehler
- Asynchrone Fehlerbehandlung in Composables