Componenti Error Boundary
Creazione di un componente wrapper ErrorBoundary con slot fallback e visualizzazione dell'errore.
Componenti Error Boundary è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Che cos'è un error boundary
Un error boundary è un componente riutilizzabile che avvolge una parte dell'interfaccia, cattura gli errori che si verificano al suo interno e mostra un fallback invece di lasciare che l'intera app si blocchi.
L'idea fondamentale
Il boundary mantiene un flag hasError. Quando è false esegue il rendering dei propri figli; dopo la cattura di un errore passa a true e mostra un fallback.
import { ref } from "vue";
const hasError = ref(false);Catturare l'errore
Usi onErrorCaptured per impostare il flag e interrompere la propagazione, così il boundary gestisce interamente l'errore.
import { onErrorCaptured } from "vue";
onErrorCaptured((err) => {
hasError.value = true;
return false;
});Memorizzare i dettagli dell'errore
Catturi anche l'errore stesso, così il fallback può visualizzare un messaggio oppure può offrire un nuovo tentativo.
const error = ref(null);
onErrorCaptured((err) => {
hasError.value = true;
error.value = err;
return false;
});La struttura del template
Esegua il rendering dello slot predefinito (i figli) quando non ci sono errori e di uno slot di fallback quando si verifica un errore.
<template>
<slot v-if="!hasError" />
<slot v-else name="fallback" :error="error" />
</template>Lo slot predefinito mostra i figli
Lo slot predefinito contiene l'interfaccia protetta. In condizioni normali il boundary è invisibile: si limita a far passare i figli.
<ErrorBoundary>
<RiskyWidget />
</ErrorBoundary>Lo slot di fallback viene mostrato in caso di errore
Fornisca uno slot denominato fallback per l'interfaccia di errore. Può ricevere l'errore tramite una prop di uno scoped slot.
<ErrorBoundary>
<RiskyWidget />
<template #fallback="{ error }">
<p>Something went wrong: {{ error.message }}</p>
</template>
</ErrorBoundary>Aggiungere un nuovo tentativo
Esponga una funzione di reset per consentire agli utenti di recuperare dall'errore. Un metodo cancella il flag ed esegue nuovamente il rendering dei figli.
function reset() {
hasError.value = false;
error.value = null;
}Riprovare nel fallback
Passi reset attraverso lo scoped slot, così il fallback può offrire un pulsante "Riprova".
<slot v-else name="fallback" :error="error" :reset="reset" />Un fallback predefinito
Fornisca allo slot di fallback un contenuto predefinito sensato, così il boundary funziona anche senza un fallback personalizzato.
<slot name="fallback" :error="error">
<p>An error occurred.</p>
</slot>Perché i boundary sono importanti
Senza i boundary, un singolo widget che va in errore può arrestare un'intera vista. I boundary isolano gli errori, permettendo al resto dell'app di continuare a funzionare: un modello fondamentale di resilienza.
Verifica rapida
Come decide un error boundary cosa visualizzare?
Riepilogo
Ha creato un error boundary: un ref hasError, onErrorCaptured che lo imposta e restituisce false, uno slot predefinito per i componenti figli e uno slot di fallback (con l'errore e una funzione di reset) mostrato quando si verifica un errore, isolando gli errori dal resto dell'app.
Domande Frequenti
La lezione «Componenti Error Boundary» è gratuita?
Sì — il testo completo di «Componenti Error Boundary» è 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 «Componenti Error Boundary»?
Creazione di un componente wrapper ErrorBoundary con slot fallback e visualizzazione dell'errore. 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 2 di 4.
Quanto tempo richiede la lezione «Componenti Error Boundary»?
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