app.config.errorHandler voor globale fouten
Globale foutafhandeling, loggen naar Sentry/Datadog en omgevingsafhankelijke foutweergave.
app.config.errorHandler voor globale fouten is een gratis Vue Academy-les op CoddyKit. Dit is les 3 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.
De globale foutafhandelaar
Vue stelt app.config.errorHandler beschikbaar: één functie die fouten opvangt uit elke plek in de app waar ze niet lokaal zijn afgehandeld. Dit is je laatste verdedigingslinie.
De signatuur van de afhandelaar
Deze ontvangt dezelfde drie argumenten als onErrorCaptured: de fout, de componentinstantie en een informatiereeks.
app.config.errorHandler = (err, instance, info) => {
// global handling
};Instellen
Configureer deze op de appinstantie in je invoerbestand, voordat je de app mount.
const app = createApp(App);
app.config.errorHandler = (err, instance, info) => {
console.error(err, info);
};
app.mount("#app");Niet-afgehandelde fouten opvangen
Deze vangt fouten op bij het weergeven van componenten, in levenscyclusfuncties, watchers en gebeurtenisafhandelaars in de hele app — ook fouten die voorbij lokale onErrorCaptured-hooks zijn doorgestroomd.
Fouten in productie aan Sentry rapporteren
Stuur fouten in productie door naar een bewakingsdienst zoals Sentry, zodat je leert van fouten die gebruikers tegenkomen.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) {
Sentry.captureException(err, { extra: { info } });
}
};Gedetailleerde registratie tijdens ontwikkeling
Leg tijdens de ontwikkeling uitgebreidere details vast in de console, zodat je problemen snel kunt opsporen.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.DEV) {
console.group("Vue error");
console.error(err);
console.log("info:", info, "instance:", instance);
console.groupEnd();
}
};Vertakken op basis van de omgeving
Een robuuste afhandelaar doet beide: rapporteren in productie en in ontwikkeling uitvoerige informatie vastleggen, in één functie.
app.config.errorHandler = (err, instance, info) => {
if (import.meta.env.PROD) Sentry.captureException(err);
else console.error("[Vue]", err, info);
};Asynchrone fouten
De globale afhandelaar vangt ook fouten op die binnen asynchrone levenscyclusfuncties en watchers worden gegooid. Voeg voor onbewerkte, niet-afgehandelde afwijzingen van beloften buiten Vue ook een listener op window toe.
window.addEventListener("unhandledrejection", (e) => {
Sentry.captureException(e.reason);
});Relatie met foutgrenzen
Lokale foutgrenzen en onErrorCaptured verwerken en bevatten fouten dicht bij de plek waar ze ontstaan; de globale afhandelaar is het vangnet voor alles wat ontsnapt. Gebruik ze samen.
Fouten niet stilletjes negeren
Vermijd een lege afhandelaar die fouten verbergt. Leg fouten altijd op zijn minst vast of rapporteer ze — stille fouten maken problemen onzichtbaar en zeer moeilijk op te sporen.
Context toevoegen
Verrijk rapporten met de huidige route, gebruikers-id of appversie, zodat je fouten in productie sneller kunt onderzoeken.
Sentry.captureException(err, {
tags: { info },
user: { id: currentUserId }
});Korte controle
Welke fouten handelt app.config.errorHandler af?
Samenvatting
Je hebt geleerd dat app.config.errorHandler = (err, instance, info) => {} de globale allesvanger is: rapporteer fouten aan Sentry in productie, leg tijdens de ontwikkeling gedetailleerde informatie vast en combineer deze met lokale foutgrenzen voor gelaagde, veerkrachtige foutafhandeling.
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 “app.config.errorHandler voor globale fouten” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “app.config.errorHandler voor globale fouten”, 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 “app.config.errorHandler voor globale fouten”?
Globale foutafhandeling, loggen naar Sentry/Datadog en omgevingsafhankelijke foutweergave. 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 3 van 4.
Hoe lang duurt de les “app.config.errorHandler voor globale fouten”?
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