Sveltejs Academy · Lezione

+error.svelte per pagine di errore personalizzate

Crei interfacce di errore personalizzate che mostrino il codice e il messaggio di stato.

Lezione 1 di 413 passaggi

+error.svelte per pagine di errore personalizzate è una lezione Sveltejs Academy gratuita su CoddyKit. Questa è la lezione 1 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 Sveltejs Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Sveltejs Academy include 4 lezioni in totale.

UI di errore personalizzata

Crei +error.svelte in qualsiasi cartella di una route per ottenere una pagina di errore personalizzata.

Pagina di errore radice

src/routes/+error.svelte intercetta gli errori che si verificano ovunque e che non vengono catturati da un error boundary annidato.

<!-- +error.svelte -->
<script>
  import { page } from "$app/stores";
</script>
<h1>{$page.status}: {$page.error?.message}</h1>

Accedere allo status

$page.status fornisce lo status HTTP (404, 500 ecc.).

Accedere al messaggio

$page.error.message fornisce il messaggio passato a error() oppure il messaggio generico proveniente da handleError.

Differenze nel prerendering

Le pagine di errore statiche possono essere prerenderizzate; quelle dinamiche vengono generate per ogni richiesta.

Boundary annidati

Inserisca +error.svelte nelle sottocartelle per limitare la UI di errore a sezioni specifiche.

Messaggi chiari

Adatti il messaggio: un 404 dovrebbe suggerire di visitare un'altra pagina, mentre un 500 dovrebbe esprimere rammarico e fornire un link all'assistenza.

ID di tracciamento

Mostri un ID di tracciamento restituito da handleError, così gli utenti potranno comunicarlo all'assistenza.

Link per il recupero

Offra sempre un modo per tornare indietro: un link alla home, una casella di ricerca o un pulsante per ricaricare la pagina.

Branding

Stili la pagina di errore come il resto dell'applicazione: fa parte dell'esperienza utente.

Aggiornamenti reattivi

$page si aggiorna se l'utente naviga nel contesto dell'errore, mantenendo aggiornata la UI.

Verifica rapida

Come si accede allo status dell'errore?

Riepilogo

Posizioni +error.svelte in ogni cartella per ottenere UI di errore con ambito limitato. Legga $page.status e $page.error.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi
41
Lezioni
163

Domande Frequenti

La lezione «+error.svelte per pagine di errore personalizzate» è gratuita?

Sì — il testo completo di «+error.svelte per pagine di errore personalizzate» è 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 Sveltejs Academy, passa a CoddyKit PRO. Il corso Sveltejs Academy include 4 lezioni in totale.

Cosa imparerò in «+error.svelte per pagine di errore personalizzate»?

Crei interfacce di errore personalizzate che mostrino il codice e il messaggio di stato. Eserciti Sveltejs 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 Sveltejs Academy?

Non è richiesta alcuna esperienza precedente. Sveltejs 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 1 di 4.

Quanto tempo richiede la lezione «+error.svelte per pagine di errore personalizzate»?

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 Sveltejs Academy?

Sì. Ogni lezione Sveltejs 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

  1. +error.svelte per pagine di errore personalizzate
  2. Errori previsti e imprevisti
  3. Helper error() e redirect()
  4. Pagine di errore nei layout annidati
← Torna a Sveltejs Academy