Natuurlijk! Hieronder vind je een stapsgewijze uitleg en voorbeeldcode om een Angular HTTP-interceptor te ontwikkelen die API-fouten vastlegt en gebruiksvriendelijke feedback geeft, inclusief het behandelen van foutscenario's zoals “De gevraagde bron kon niet worden gevonden.”. ### Stap 1: Maak een nieuwe HTTP-interceptor Gebruik Angular CLI om een nieuwe interceptor te genereren: ```bash ng generate interceptor api-error ``` ### Stap 2: Implementeer de interceptor Open de gegenereerde `api-error.interceptor.ts` en pas deze aan: ```typescript import { Injectable } from '@angular/core'; import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; @Injectable() export class ApiErrorInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(req).pipe( catchError((error: HttpErrorResponse) => { // Foutafhandeling this.handleError(error); // Optioneel: je kan hier een aangepaste fout- of gebruiksvriendelijke boodschap teruggeven return throwError(() => error); }) ); } private handleError(error: HttpErrorResponse): void { // Controleer het fouttype if (error.status === 404) { // Specifieke boodschap voor 404 alert('De gevraagde bron kon niet worden gevonden.'); } else if (error.status === 500) { alert('Serverfout. Probeer het later opnieuw.'); } else if (error.status === 0) { alert('Geen verbinding met de server. Controleer je internetverbinding.'); } else { // Algemene foutmelding alert(`Er is een fout opgetreden: ${error.message}`); } // Hier kun je ook logs naar een externe service sturen console.error('API fout:', error); } } ``` ### Stap 3: Voeg de interceptor toe aan de providers In je `app.module.ts`: ```typescript import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { ApiErrorInterceptor } from './path/to/api-error.interceptor'; @NgModule({ // ... providers: [ { provide: HTTP_INTERCEPTORS, useClass: ApiErrorInterceptor, multi: true }, ], // ... }) export class AppModule { } ``` ### Stap 4: Voorbeeld van foutscenario's De bovenstaande code behandelt verschillende scenario's: - **404 Not Found:** toont “De gevraagde bron kon niet worden gevonden.” - **500 Internal Server Error:** toont een bericht dat de server een fout heeft. - **Geen verbinding:** wanneer de server niet bereikbaar is (`status === 0`). ### Tips voor verdere verbetering: - Gebruik een service voor het tonen van meldingen (bijv. Angular Material Snackbar) in plaats van `alert()`. - Log errors naar een externe monitoringdienst. - Voeg meer foutcodes toe en pas de berichten aan voor gebruikersvriendelijkheid. --- Heeft u nog verdere hulp nodig bij het aanpassen of uitbreiden van deze interceptor?

Hier is een uitgebreide uitleg voor het ontwikkelen van een Angular HTTP-interceptor voor foutafhandeling: ## 1. Interceptor Aanmaken ```typescript // error-interceptor.service.ts import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import { MessageService } from './message.service'; @Injectable() export class ErrorInterceptor implements HttpInterceptor { constructor(private messageService: MessageService) {} intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { return next.handle(req).pipe( catchError((error: HttpErrorResponse) => { this.handleError(error); return throwError(() => error); }) ); } } ``` ## 2. Foutafhandeling Implementeren ```typescript private handleError(error: HttpErrorResponse): void { let gebruikerBericht: string; switch (error.status) { case 0: // Network error gebruikerBericht = 'Geen verbinding met de server. Controleer uw internetverbinding.'; break; case 400: gebruikerBericht = this.handleBadRequest(error); break; case 401: gebruikerBericht = 'U bent niet geautoriseerd. Log opnieuw in.'; break; case 403: gebruikerBericht = 'U heeft geen toegang tot deze bron.'; break; case 404: gebruikerBericht = this.handleNotFound(error); break; case 409: gebruikerBericht = 'Conflict: De gegevens zijn al in gebruik.'; break; case 422: gebruikerBericht = this.handleUnprocessableEntity(error); break; case 429: gebruikerBericht = 'Te veel verzoeken. Probeer het later opnieuw.'; break; case 500: gebruikerBericht = 'Interne serverfout. Probeer het later opnieuw.'; break; case 503: gebruikerBericht = 'Service tijdelijk niet beschikbaar.'; break; default: gebruikerBericht = 'Er is een onverwachte fout opgetreden.'; break; } this.messageService.toastError(gebruikerBericht); this.logError(error); } ``` ## 3. Specifieke Foutscenario's Behandelen ```typescript private handleNotFound(error: HttpErrorResponse): string { const url = error.url || ''; // Specifieke 404 scenario's if (url.includes('/api/gebruikers/')) { return 'De gevraagde gebruiker kon niet worden gevonden.'; } if (url.includes('/api/producten/')) { return 'Het gevraagde product kon niet worden gevonden.'; } if (url.includes('/api/bestellingen/')) { return 'De gevraagde bestelling kon niet worden gevonden.'; } // Algemeen 404 bericht return 'De gevraagde bron kon niet worden gevonden.'; } private handleBadRequest(error: HttpErrorResponse): string { if (error.error && error.error.errors) { const validatieFouten = error.error.errors; return this.formatValidationErrors(validatieFouten); } return 'Ongeldig verzoek. Controleer de ingevoerde gegevens.'; } private handleUnprocessableEntity(error: HttpErrorResponse): string { if (error.error && error.error.detail) { return error.error.detail; } return 'De gegevens konden niet worden verwerkt.'; } private formatValidationErrors(errors: any): string { const fouten = Object.values(errors).flat() as string[]; return fouten.join(' '); } ``` ## 4. Fout Logging Service ```typescript // error-logging.service.ts import { Injectable } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ErrorLoggingService { logError(error: HttpErrorResponse): void { const errorLog = { timestamp: new Date().toISOString(), url: error.url, status: error.status, message: error.message, userAgent: navigator.userAgent, stack: error.error?.stack || 'Geen stack trace beschikbaar' }; // Log naar console (in development) console.error('HTTP Fout:', errorLog); // Stuur naar externe logging service this.sendToLoggingService(errorLog); } private sendToLoggingService(log: any): void { // Implementeer je favoriete logging service // Bijvoorbeeld: Sentry, LogRocket, of eigen backend } } ``` ## 5. Message Service voor Gebruikersfeedback ```typescript // message.service.ts import { Injectable } from '@angular/core'; import { MatSnackBar } from '@angular/material/snack-bar'; @Injectable({ providedIn: 'root' }) export class MessageService { constructor(private snackBar: MatSnackBar) {} toastError(message: string): void { this.snackBar.open(message, 'Sluiten', { duration: 5000, panelClass: ['error-snackbar'], horizontalPosition: 'center', verticalPosition: 'top' }); } toastSuccess(message: string): void { this.snackBar.open(message, 'Sluiten', { duration: 3000, panelClass: ['success-snackbar'] }); } } ``` ## 6. Interceptor Registreren ```typescript // app.module.ts import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { ErrorInterceptor } from './error-interceptor.service'; @NgModule({ providers: [ { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true } ] }) export class AppModule { } ``` ## 7. CSS voor Styling ```css /* styles.css */ .error-snackbar { background-color: #f44336; color: white; } .success-snackbar { background-color: #4caf50; color: white; } ``` ## Gebruiksvoorbeelden: De interceptor werkt automatisch voor alle HTTP-verzoeken: ```typescript // Component this.http.get('/api/producten/999').subscribe({ next: (response) => { // Succes handler }, error: (error) => { // Hier wordt automatisch de interceptor uitgevoerd // Gebruiker ziet: "Het gevraagde product kon niet worden gevonden." } }); ``` ## Belangrijke Kenmerken: - **Gebruikersvriendelijk**: Toont duidelijke, NL-talige berichten - **Contextueel**: Specifieke berichten voor verschillende resource types - **Uitbreidbaar**: Eenvoudig nieuwe foutscenario's toevoegen - **Logging**: Fouten worden gelogd voor debugging - **Non-intrusive**: Gebruikers worden niet gestoord met technische details Deze implementatie zorgt voor een professionele foutafhandeling die zowel ontwikkelaars als eindgebruikers helpt!