onErrorCaptured-lifecycle-hook
Fouten uit child-components opvangen, false retourneren om propagatie te stoppen en foutobjecten gebruiken.
onErrorCaptured-lifecycle-hook is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.
Fouten in componenten opvangen
Vue biedt de hook voor de levenscyclus onErrorCaptured om fouten op te vangen die door onderliggende componenten worden veroorzaakt. Hiermee kan een oudercomponent fouten uit zijn deelboom onderscheppen.
De signatuur van de hook
onErrorCaptured ontvangt drie argumenten: de fout, de componentinstantie die de fout veroorzaakte en een info-tekenreeks die beschrijft waar dit gebeurde.
import { onErrorCaptured } from "vue";
onErrorCaptured((err, instance, info) => {
// handle it
});Het argument err
Het eerste argument is het opgeworpen foutobject - meestal een instantie van Error met een bericht en aanroepstack die je in het logboek kunt vastleggen of kunt weergeven.
onErrorCaptured((err) => {
console.error("Captured:", err.message);
});Het argument instance
Het tweede argument is de componentinstantie die de fout veroorzaakte. Dit is handig voor foutopsporing of om context aan je rapporten toe te voegen.
onErrorCaptured((err, instance) => {
console.log("From component:", instance);
});Het argument info
Het derde argument is een tekenreeks die aangeeft welke levenscyclus of bewerking de fout heeft veroorzaakt - bijvoorbeeld „renderfunctie”, „setupfunctie” of een specifieke hook.
onErrorCaptured((err, instance, info) => {
console.log("Vue context:", info);
});Alleen fouten van onderliggende componenten
Belangrijk: onErrorCaptured vangt fouten uit onderliggende componenten op, niet uit de eigen setup of render van de component. Plaats de hook boven de code die je wilt beschermen.
Doorgifte stoppen
Standaard wordt een opgevangen fout nog steeds doorgegeven aan afhandelaars van bovenliggende componenten en aan de globale afhandelaar. Geef false terug om te voorkomen dat de fout verdergaat.
onErrorCaptured((err) => {
reportError(err);
return false; // do not propagate
});Waarom doorgifte stoppen
Als je false teruggeeft, blijft de fout lokaal - handig wanneer deze component de fout volledig afhandelt (bijvoorbeeld door een terugvalweergave te tonen) en niet wil dat ook de globale afhandelaar wordt aangeroepen.
Doorgifte toestaan
Als je wilt dat afhandelaars op een hoger niveau (of de globale afhandelaar) de fout ook zien, geef je false niet terug. De hook legt de fout dan lokaal vast en laat deze verder omhooggaan.
onErrorCaptured((err) => {
logLocally(err);
// no return -> still propagates
});Een praktisch gebruik
Een veelvoorkomend gebruik is logboekregistratie plus een herstelvlag. Stel een reactieve vlag in om een terugvalweergave te tonen en rapporteer de fout voor diagnostiek.
const failed = ref(false);
onErrorCaptured((err) => {
failed.value = true;
report(err);
return false;
});Aandachtspunten bij asynchroon gedrag
onErrorCaptured vangt fouten op in renderfuncties, hooks van de levenscyclus en synchrone afhandelaars van onderliggende componenten. Sommige asynchrone fouten (niet-afgevangen afwijzingen van promises) kun je beter op globaal niveau afhandelen - dat komt later aan bod.
Korte controle
Wat doet het teruggeven van false vanuit onErrorCaptured?
Samenvatting
Je hebt geleerd dat onErrorCaptured((err, instance, info)) fouten uit onderliggende componenten opvangt. De tekenreeks info geeft context over de levenscyclus en door false terug te geven stop je de doorgifte, zodat de component de fout lokaal kan afhandelen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “onErrorCaptured-lifecycle-hook” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “onErrorCaptured-lifecycle-hook”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.
Wat leer ik in “onErrorCaptured-lifecycle-hook”?
Fouten uit child-components opvangen, false retourneren om propagatie te stoppen en foutobjecten gebruiken. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “onErrorCaptured-lifecycle-hook”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- onErrorCaptured-lifecycle-hook
- Error Boundary-components
- app.config.errorHandler voor globale fouten
- Asynchrone foutafhandeling in composables