Fouten globaal afhandelen
Vang HTTP-fouten centraal op en transformeer ze
Fouten globaal afhandelen is een gratis Angular 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 Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Centrale foutafhandeling
In plaats van HTTP-fouten in elke component af te handelen, kan een interceptor ze centraal verwerken: ze loggen, een toast tonen, bij 401 omleiden of de foutstructuur normaliseren.
catchError in een interceptor
Leid de stroom van next(req) via catchError om fouten te onderscheppen.
import { catchError, throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
export const errorInterceptor: HttpInterceptorFn = (req, next) =>
next(req).pipe(
catchError((err: HttpErrorResponse) => {
console.error('HTTP error', err.status);
return throwError(() => err);
})
);HttpErrorResponse inspecteren
HttpErrorResponse bevat status, message en de error-body van de server. Vertak op basis van de status om verschillende gevallen af te handelen.
catchError((err: HttpErrorResponse) => {
if (err.status === 0) console.error('network/CORS error');
else console.error('server error', err.status);
return throwError(() => err);
})Bij 401 omleiden
Een 401 betekent meestal dat de sessie is verlopen. Leid vanuit de interceptor om naar de loginpagina.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const router = inject(Router);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
if (err.status === 401) router.navigate(['/login']);
return throwError(() => err);
})
);
};Een melding tonen
Injecteer een toast-/meldingsservice om fouten op een consistente manier aan de gebruiker te tonen.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const toast = inject(ToastService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
toast.error(err.error?.message ?? 'Something went wrong');
return throwError(() => err);
})
);
};Opnieuw gooien of onderdrukken
Gooi de fout meestal opnieuw met throwError(() => err), zodat components er nog op kunnen reageren. Retourneer alleen een fallback-observable (zoals of(null)) als je de fout echt voor aanroepers wilt verbergen.
De fout normaliseren
Zet verschillende foutbodies van de server om naar één consistente foutstructuur voor de app voordat je de fout opnieuw gooit. Zo wordt afhandeling verderop eenvoudiger.
catchError((err: HttpErrorResponse) => {
const appError = {
code: err.status,
message: err.error?.message ?? err.message
};
return throwError(() => appError);
})Client- en serverfouten onderscheiden
err.error instanceof ErrorEvent (of err.status === 0) wijst op een client- of netwerkfout; anders heeft de backend een foutstatus geretourneerd. Handel deze gevallen verschillend af.
Dubbele afhandeling voorkomen
Als de interceptor al een toast toont, mogen components niet ook een toast voor dezelfde fout tonen. Kies één laag voor meldingen aan de gebruiker om dubbele berichten te voorkomen.
Naar een monitoringservice loggen
Een centrale interceptor is de ideale plek om fouten door te sturen naar een monitoringtool (Sentry enzovoort), met de context van de aanvraag erbij.
export const errorInterceptor: HttpInterceptorFn = (req, next) => {
const monitor = inject(MonitoringService);
return next(req).pipe(
catchError((err: HttpErrorResponse) => {
monitor.captureHttpError(req.url, err.status, err.message);
return throwError(() => err);
})
);
};De foutinterceptor ordenen
Plaats de foutinterceptor zo dat deze de andere interceptors omhult. Zo kan hij fouten uit de hele keten onderscheppen, inclusief fouten bij opnieuw proberen.
provideHttpClient(
withInterceptors([authInterceptor, retryInterceptor, errorInterceptor])
)Korte controle
Test je begrip van centrale foutafhandeling.
Samenvatting: fouten centraal afhandelen
Een foutinterceptor centraliseert de afhandeling van HTTP-fouten.
- Gebruik
catchErroropnext(req). - Vertak op
HttpErrorResponse.status(bijvoorbeeld omleiden bij 401). - Gooi de fout opnieuw zodat components kunnen reageren; onderdruk de fout alleen als dat de bedoeling is.
Hierna: opnieuw proberen en laadindicatoren.
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
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “Fouten globaal afhandelen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Fouten globaal afhandelen”, 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 Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “Fouten globaal afhandelen”?
Vang HTTP-fouten centraal op en transformeer ze Je oefent met Angular 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 Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular 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 “Fouten globaal afhandelen”?
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 Angular Academy?
Ja. Elke les over Angular 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
- Functionele interceptors
- Authenticatieheaders toevoegen
- Fouten globaal afhandelen
- Opnieuw proberen en laadindicatoren