Hook del ciclo di vita onErrorCaptured
Cattura degli errori dai componenti figli, restituzione di false per interrompere la propagazione, oggetti errore.
Hook del ciclo di vita onErrorCaptured è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Catturare gli errori nei componenti
Vue fornisce l'hook del ciclo di vita onErrorCaptured per catturare gli errori generati dai componenti discendenti. Consente a un componente padre di intercettare i problemi del proprio sottoalbero.
La firma dell'hook
onErrorCaptured riceve tre argomenti: l'errore, l'istanza del componente che lo ha generato e una stringa info che descrive dove si è verificato.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});L'argomento err
Il primo argomento è l'oggetto errore sollevato, in genere un'istanza di Error con un messaggio e uno stack che è possibile registrare o visualizzare.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});L'argomento instance
Il secondo argomento è l'istanza del componente che ha generato l'errore, utile per il debug o per aggiungere contesto ai report.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});L'argomento info
Il terzo argomento è una stringa che indica quale ciclo di vita o operazione ha attivato l'errore, ad esempio "funzione di rendering", "funzione setup" o un hook specifico.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Solo gli errori dei componenti discendenti
È importante notare che onErrorCaptured cattura gli errori dei discendenti, non quelli del proprio setup o rendering. Inserisca l'hook in un antenato del codice che desidera proteggere.
Interrompere la propagazione
Per impostazione predefinita, un errore catturato continua a propagarsi verso i gestori degli antenati e verso il gestore globale. Restituisca false per impedirne la propagazione.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Perché interrompere la propagazione
Restituire false confina l'errore localmente: è utile quando il componente gestisce completamente il problema, ad esempio mostrando un fallback, e non desidera che si attivi anche il gestore globale.
Lasciare propagare l'errore
Se desidera che anche i gestori di livello superiore, o quello globale, vedano l'errore, non restituisca false. In questo modo l'hook lo registra localmente e ne consente la propagazione verso l'alto.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Un uso pratico
Un uso comune consiste nella registrazione dell'errore insieme a un flag di recupero. Imposti un flag reattivo per visualizzare un fallback mentre segnala l'errore a scopo diagnostico.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Precauzioni per le operazioni asincrone
onErrorCaptured cattura gli errori nel rendering, nel ciclo di vita e nei gestori sincroni dei componenti discendenti. Alcuni errori asincroni, come i rifiuti di promise non gestiti, vengono gestiti meglio a livello globale, come verrà spiegato più avanti.
Verifica rapida
Che cosa comporta restituire false da onErrorCaptured?
Riepilogo
Ha imparato che onErrorCaptured((err, instance, info)) cattura gli errori dei componenti discendenti. La stringa info fornisce il contesto del ciclo di vita e restituire false interrompe la propagazione, permettendo al componente di gestire localmente il problema.
Domande Frequenti
La lezione «Hook del ciclo di vita onErrorCaptured» è gratuita?
Sì — il testo completo di «Hook del ciclo di vita onErrorCaptured» è 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 «Hook del ciclo di vita onErrorCaptured»?
Cattura degli errori dai componenti figli, restituzione di false per interrompere la propagazione, oggetti 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 1 di 4.
Quanto tempo richiede la lezione «Hook del ciclo di vita onErrorCaptured»?
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