Een robuuste foutafhandelingsstrategie voor je JavaScript-toepassing kan je opzetten door foutcategorieën te definiëren, een gestructureerd loggingsysteem te implementeren en gebruikersvriendelijke meldingen te bieden. Hier is een stapsgewijze aanpak: 1. Fouten Categoriseren ----------------------- - **Netwerkfouten:** Problemen bij API-verzoeken, zoals time-outs of verbindingsfouten. - **Serverfouten:** Fouten gerelateerd aan de server, zoals 500-fouten of ongeldige responses. - **Validatiefouten:** Fouten door ongeldige gebruikersinvoer. - **Onverwachte fouten:** Andere onvoorziene fouten in de code. 2. Effectief Loggen ------------------- - Gebruik een loggingbibliotheek of eigen logfunctie die logs naar de console, een bestand, of een externe service stuurt (bijvoorbeeld Sentry, Loggly). - Log details zoals fouttype, stack trace, gebruikersactie, en timestamp. - Zorg dat logs niet te veel gevoelige informatie bevatten. 3. Gebruiksvriendelijke Feedback ------------------------------- - Geef gebruikers duidelijke en niet-technische meldingen, bijvoorbeeld: "Er is een probleem opgetreden. Probeer het later opnieuw." - Voor verwachte fouten (zoals validatiefouten) toon gerichte berichten. - Vermijd het tonen van technische details aan eindgebruikers. 4. Implementatie in je bestaande try-catch ------------------------------------------- Voor API-aanroepen kun je bijvoorbeeld een structuur gebruiken zoals: ```javascript async function fetchData() { try { const response = await fetch('api/endpoint'); if (!response.ok) { throw new Error(`Server responded with status ${response.status}`); } const data = await response.json(); // Verwerk data } catch (error) { // Categoriseer de fout if (error.name === 'TypeError') { logError('Netwerkfout', error); showUserMessage('Kan geen verbinding maken met de server. Controleer je internetverbinding.'); } else if (error.message.includes('status')) { logError('Serverfout', error); showUserMessage('Er is een probleem met de server. Probeer het later opnieuw.'); } else { logError('Onverwachte fout', error); showUserMessage('Er is een onverwachte fout opgetreden. Neem contact op met de ondersteuning.'); } } } function logError(type, error) { console.error(`[${new Date().toISOString()}] [${type}]`, error); // Voeg eventueel externe logging toe } function showUserMessage(message) { // Toon een vriendelijke boodschap aan de gebruiker alert(message); } ``` 5. Aanvullende Tips ------------------- - Gebruik async/await in combinatie met try-catch voor leesbaarheid. - Centraliseer foutafhandeling waar mogelijk, bijvoorbeeld via een globale handler. - Overweeg het gebruik van externe monitoring tools voor uitgebreide foutanalyse. - Test je foutscenario’s regelmatig om de gebruikerservaring te optimaliseren. Met deze aanpak verbeter je de betrouwbaarheid, diagnose en gebruikerservaring van je toepassing.

Zeker, ik help je graag een robuuste foutafhandelingsstrategie voor je JavaScript-toepassing te ontwerpen. Hier is een complete aanpak in het Nederlands: ## 1. Foutencategorisatie Creëer eerst een duidelijke classificatie van fouttypes: ```javascript class AppError extends Error { constructor(message, type, code, originalError = null) { super(message); this.type = type; this.code = code; this.originalError = originalError; this.timestamp = new Date().toISOString(); } } // Foutcategorieën const ErrorTypes = { NETWORK: 'NETWORK_ERROR', VALIDATION: 'VALIDATION_ERROR', AUTHORIZATION: 'AUTHORIZATION_ERROR', NOT_FOUND: 'NOT_FOUND_ERROR', SERVER: 'SERVER_ERROR', CLIENT: 'CLIENT_ERROR', UNKNOWN: 'UNKNOWN_ERROR' }; ``` ## 2. Gestructureerde foutenlogging Implementeer een logging-systeem met verschillende niveaus: ```javascript class Logger { static error(error, context = {}) { const logEntry = { timestamp: new Date().toISOString(), level: 'ERROR', error: { message: error.message, type: error.type, code: error.code, stack: error.stack }, context: context, userAgent: navigator.userAgent, url: window.location.href }; // Console logging voor ontwikkeling console.error('🚨 Fout opgetreden:', logEntry); // Stuur naar externe logging service (bijv. Sentry, LogRocket) this.sendToMonitoringService(logEntry); } static sendToMonitoringService(logEntry) { // Implementeer je favoriete monitoring service // Bijvoorbeeld: Sentry.captureException(error) } } ``` ## 3. Verbeterde API-foutafhandeling Breid je try-catch blokken uit met specifieke foutdetectie: ```javascript class ApiService { async makeApiCall(url, options = {}) { try { const response = await fetch(url, { headers: { 'Content-Type': 'application/json', ...options.headers }, ...options }); if (!response.ok) { throw await this.handleHttpError(response); } return await response.json(); } catch (error) { if (error instanceof AppError) { throw error; } throw this.wrapUnknownError(error, 'API-aanroep'); } } async handleHttpError(response) { const errorData = await response.json().catch(() => ({})); switch (response.status) { case 400: return new AppError( errorData.message || 'Ongeldig verzoek', ErrorTypes.VALIDATION, 'VALIDATION_400' ); case 401: return new AppError( 'Niet geautoriseerd - log opnieuw in', ErrorTypes.AUTHORIZATION, 'AUTH_401' ); case 404: return new AppError( 'Bron niet gevonden', ErrorTypes.NOT_FOUND, 'NOT_FOUND_404' ); case 500: return new AppError( 'Serverfout - probeer het later opnieuw', ErrorTypes.SERVER, 'SERVER_500' ); default: return new AppError( `HTTP-fout: ${response.status}`, ErrorTypes.SERVER, `HTTP_${response.status}` ); } } wrapUnknownError(error, context) { return new AppError( `Onverwachte fout: ${error.message}`, ErrorTypes.UNKNOWN, 'UNKNOWN_ERROR', error ); } } ``` ## 4. Gebruikersvriendelijke feedback Creëer een gebruikersinterface voor foutmeldingen: ```javascript class ErrorHandler { static handleError(error, userContext = {}) { // Log de fout Logger.error(error, userContext); // Toon gebruikersvriendelijke feedback this.showUserFeedback(error); // Voer specifieke acties uit op basis van fouttype this.executeErrorActions(error); } static showUserFeedback(error) { const feedback = this.getUserFriendlyMessage(error); // Gebruik je eigen UI-component of een toast library this.showNotification(feedback.message, feedback.type); } static getUserFriendlyMessage(error) { const messages = { [ErrorTypes.NETWORK]: { message: 'Geen internetverbinding. Controleer je netwerk.', type: 'warning' }, [ErrorTypes.AUTHORIZATION]: { message: 'Je sessie is verlopen. Log opnieuw in.', type: 'error', action: () => this.redirectToLogin() }, [ErrorTypes.VALIDATION]: { message: 'Controleer de ingevoerde gegevens.', type: 'warning' }, [ErrorTypes.SERVER]: { message: 'Tijdelijke serverstoring. Probeer het over enkele minuten opnieuw.', type: 'error' } }; return messages[error.type] || { message: 'Er is een onverwachte fout opgetreden. Probeer het opnieuw.', type: 'error' }; } static executeErrorActions(error) { switch (error.type) { case ErrorTypes.AUTHORIZATION: // Redirect naar login window.location.href = '/login'; break; case ErrorTypes.NETWORK: // Toon offline indicator this.showOfflineIndicator(); break; } } static showNotification(message, type) { // Implementeer je eigen notificatie-systeem console.log(`[${type.toUpperCase()}] ${message}`); } } ``` ## 5. Globale foutafhandeling Voeg globale error handlers toe: ```javascript // Onafhandelde Promise afwijzingen window.addEventListener('unhandledrejection', (event) => { event.preventDefault(); const error = new AppError( event.reason?.message || 'Onverwachte Promise fout', ErrorTypes.UNKNOWN, 'UNHANDLED_PROMISE' ); ErrorHandler.handleError(error, { source: 'unhandledrejection' }); }); // Globale JavaScript fouten window.addEventListener('error', (event) => { const error = new AppError( event.message, ErrorTypes.CLIENT, 'GLOBAL_ERROR', event.error ); ErrorHandler.handleError(error, { source: 'global', filename: event.filename, lineno: event.lineno, colno: event.colno }); }); ``` ## 6. Gebruik in je applicatie ```javascript // Voorbeeld gebruik async function loadUserData(userId) { try { const apiService = new ApiService(); const userData = await apiService.makeApiCall(`/api/users/${userId}`); return userData; } catch (error) { ErrorHandler.handleError(error, { component: 'UserProfile', userId: userId, action: 'loadUserData' }); throw error; // Herwerp voor component-specifieke afhandeling } } ``` ## Belangrijkste voordelen: - **Gestructureerd**: Duidelijke categorisatie van fouten - **Uitgebreide logging**: Gedetailleerde informatie voor debugging - **Gebruikersvriendelijk**: Duidelijke feedback voor eindgebruikers - **Schaalbaar**: Eenvoudig uit te breiden met nieuwe fouttypes - **Onderhoudbaar**: Centrale afhandeling van alle fouten Deze strategie zorgt voor een professionele foutafhandeling die zowel ontwikkelaars als gebruikers helpt!