+error.svelte für benutzerdefinierte Fehlerseiten
Erstellen Sie benutzerdefinierte Fehler-UIs, die Statuscode und Meldung anzeigen.
+error.svelte für benutzerdefinierte Fehlerseiten ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Benutzerdefinierte Fehler-UI
Erstellen Sie in jedem Routenordner eine +error.svelte-Datei für eine individuell angepasste Fehlerseite.
Fehlerseite auf Root-Ebene
src/routes/+error.svelte fängt Fehler überall dort ab, wo keine verschachtelte Fehlergrenze sie auffängt.
<!-- +error.svelte -->
<script>
import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>Status abrufen
$page.status liefert den HTTP-Status (404, 500 usw.).
Meldung abrufen
$page.error.message liefert die Meldung, die Sie an error() übergeben haben, oder die allgemeine Meldung von handleError.
Unterschiede beim Prerendering
Statische Fehlerseiten können vorab gerendert werden; dynamische Seiten werden für jede Anfrage gerendert.
Verschachtelte Fehlergrenzen
Platzieren Sie +error.svelte in Unterordnern, um die Fehler-UI auf bestimmte Bereiche zu beschränken.
Verständliche Meldungen
Passen Sie die Meldung an: Bei einem 404 sollte eine andere Navigation vorgeschlagen werden, bei einem 500 sollten Sie sich entschuldigen und auf den Support verweisen.
Tracking-IDs
Zeigen Sie eine von handleError zurückgegebene Tracking-ID an, damit Benutzer sie dem Support nennen können.
Links zur Wiederherstellung
Bieten Sie immer einen Weg zurück an: einen Link zur Startseite, ein Suchfeld oder eine Schaltfläche zum Neuladen.
Branding
Gestalten Sie die Fehlerseite wie den Rest Ihrer App. Sie ist Teil der Benutzererfahrung.
Reaktive Aktualisierungen
$page wird aktualisiert, wenn der Benutzer innerhalb des Fehlerkontexts navigiert, sodass die UI aktuell bleibt.
Kurze Überprüfung
Wie greifen Sie auf den Fehlerstatus zu?
Zusammenfassung
Platzieren Sie +error.svelte in den jeweiligen Ordnern, um Fehler-UIs zu beschränken. Lesen Sie $page.status und $page.error aus.
Häufig gestellte Fragen
Ist die Lektion „+error.svelte für benutzerdefinierte Fehlerseiten“ kostenlos?
Ja — der vollständige Text von „+error.svelte für benutzerdefinierte Fehlerseiten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „+error.svelte für benutzerdefinierte Fehlerseiten“?
Erstellen Sie benutzerdefinierte Fehler-UIs, die Statuscode und Meldung anzeigen. Du übst Sveltejs 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 Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs 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 1 von 4.
Wie lange dauert die Lektion „+error.svelte für benutzerdefinierte Fehlerseiten“?
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 Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs 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
- +error.svelte für benutzerdefinierte Fehlerseiten
- Erwartete und unerwartete Fehler
- Die Helfer error() und redirect()
- Fehlerseiten in verschachtelten Layouts