Komponenten als Error Boundaries
Eine ErrorBoundary-Wrapper-Komponente mit Fallback-Slot und Fehleranzeige erstellen
Komponenten als Error Boundaries ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Was ist eine Error Boundary
Eine Error Boundary ist eine wiederverwendbare Komponente, die einen Teil Ihrer Benutzeroberfläche umschließt, darin auftretende Fehler abfängt und einen Fallback anzeigt, anstatt die gesamte Anwendung zu unterbrechen.
Die Grundidee
Die Boundary verwaltet ein hasError-Flag. Solange es auf false steht, rendert sie ihre Kindkomponenten. Sobald ein Fehler abgefangen wurde, setzt sie es auf true und rendert einen Fallback.
import { ref } from "vue";
const hasError = ref(false);Den Fehler abfangen
Verwenden Sie onErrorCaptured, um das Flag zu setzen und die Weitergabe zu stoppen, damit die Boundary den Fehler vollständig selbst behandelt.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Fehlerdetails speichern
Speichern Sie zusätzlich den Fehler selbst, damit der Fallback eine Meldung anzeigen kann oder Sie einen erneuten Versuch anbieten können.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});Die Template-Struktur
Rendern Sie den Default-Slot (die Kindkomponenten), wenn alles fehlerfrei ist, und einen Fallback-Slot, wenn ein Fehler aufgetreten ist.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Der Default-Slot zeigt die Kindkomponenten
Der Default-Slot enthält die geschützte Benutzeroberfläche. Unter normalen Bedingungen ist die Boundary unsichtbar – sie reicht die Kindkomponenten einfach durch.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Der Fallback-Slot wird bei Fehlern angezeigt
Stellen Sie einen benannten fallback-Slot für die Fehleroberfläche bereit. Über eine Scoped-Slot-Prop kann er den Fehler erhalten.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Einen erneuten Versuch hinzufügen
Stellen Sie eine reset-Funktion bereit, damit Nutzende den Fehler beheben können. Eine Methode löscht das Flag und rendert die Kindkomponenten erneut.
function reset() {
hasError.value = false;
error.value = null;
}Erneuter Versuch im Fallback
Geben Sie reset über den Scoped Slot weiter, damit der Fallback eine Schaltfläche für einen erneuten Versuch anbieten kann.
<slot v-else name="fallback" :error="error" :reset="reset" />Ein standardmäßiger Fallback
Geben Sie dem Fallback-Slot sinnvollen Standardinhalt, damit die Boundary auch ohne einen benutzerdefinierten Fallback funktioniert.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Warum Boundaries wichtig sind
Ohne Boundaries kann ein fehlerhaftes Widget eine gesamte Ansicht zum Absturz bringen. Boundaries kapseln Fehler, sodass der Rest der App weiter funktioniert – ein wichtiges Muster für Resilienz.
Kurze Überprüfung
Wie entscheidet eine Error Boundary, was gerendert werden soll?
Zusammenfassung
Sie haben eine Error Boundary erstellt: eine hasError-Referenz, ein onErrorCaptured, das diesen Wert setzt und false zurückgibt, einen Default-Slot für die untergeordneten Elemente sowie einen Fallback-Slot (mit dem Fehler und einer Reset-Funktion), der bei einem Fehler angezeigt wird – so werden Fehler vom Rest der App isoliert.
Häufig gestellte Fragen
Ist die Lektion „Komponenten als Error Boundaries“ kostenlos?
Ja — der vollständige Text von „Komponenten als Error Boundaries“ 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 „Komponenten als Error Boundaries“?
Eine ErrorBoundary-Wrapper-Komponente mit Fallback-Slot und Fehleranzeige erstellen 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 2 von 4.
Wie lange dauert die Lektion „Komponenten als Error Boundaries“?
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