Het maken van een aangepast foutmeldingssysteem in JavaScript vereist een gestructureerde aanpak om fouten effectief te vangen, categoriseren, loggen en rapporteren. Hier is een overzicht van de beste praktijken en een voorbeeldimplementatie: 1. Gebruik een globale foutafhandelaar: - Voor ongeregistreerde fouten: `window.onerror` - Voor promise-rejecties: `window.onunhandledrejection` 2. Creëer een foutcategorie en -object: - Categoriseer fouten (bijv. netwerk, validatie, interne fout) - Voeg relevante details toe (stacktrace, URL, tijdstip) 3. Log fouten naar een server: - Stuur een POST-verzoek met foutgegevens naar je backend - Zorg dat dit asynchroon gebeurt en niet de gebruikerservaring beïnvloedt 4. Beste praktijken: - Gebruik try-catch blokken voor kritieke code - Categoriseer fouten op basis van bron of type - Voeg context toe (bijv. gebruikersactie, pagina, component) - Verzamel en verzend alleen relevante data Hier is een voorbeeldimplementatie: ```javascript // Functie om fouten te loggen naar de server function logFout(foutData) { fetch('/api/logfout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(foutData) }).catch(e => { // Optioneel: fallback logging, bijvoorbeeld in localStorage console.error('Fout logging mislukt:', e); }); } // Functie om foutgegevens samen te stellen function maakFoutObject(error, categorisatie, extraInfo = {}) { return { message: error.message, stack: error.stack, url: window.location.href, tijdstip: new Date().toISOString(), categorisatie: categorisatie, extraInfo: extraInfo }; } // Globale foutafhandelaar voor ongeregistreerde fouten window.onerror = function (message, source, lineno, colno, error) { const foutData = maakFoutObject(error || new Error(message), 'Onbekend', { source: source, lineno: lineno, colno: colno }); logFout(foutData); }; // Afhandelaar voor unhandled promise rejections window.onunhandledrejection = function (event) { const error = event.reason instanceof Error ? event.reason : new Error(event.reason); const foutData = maakFoutObject(error, 'Promise Rejection'); logFout(foutData); }; // Voor specifieke fouten in code: try { // kritieke code } catch (error) { const foutData = maakFoutObject(error, 'Kritieke code'); logFout(foutData); } ``` **Samenvatting van beste praktijken:** - **Log naar server:** Verzamel alle relevante foutgegevens en stuur ze via een API. - **Categoriseer fouten:** Bijvoorbeeld 'Netwerk', 'Validatie', 'Interne fout', om analyse te vergemakkelijken. - **Context toevoegen:** Extra informatie zoals gebruikersactie, pagina, component. - **Automatisering:** Gebruik globale handlers voor ongeregistreerde fouten. - **Veiligheid & privacy:** Zorg dat geen gevoelige gegevens worden gelogd. - **Analyseren & rapporteren:** Gebruik logs voor continue verbetering en prioriteitstelling. Door deze aanpak te volgen, krijg je inzicht in fouten binnen je toepassing en kun je gerichte verbeteringen doorvoeren.

Hier is een uitgebreide uitleg voor het maken van een aangepast foutmeldingssysteem in JavaScript: ## Basisstructuur foutafhandeling ```javascript class ErrorLogger { constructor() { this.endpoint = '/api/error-log'; this.environment = process.env.NODE_ENV || 'development'; } // Hoofdfunctie voor het loggen van fouten async logError(error, context = {}) { const errorData = { timestamp: new Date().toISOString(), environment: this.environment, message: error.message, stack: error.stack, type: this.categorizeError(error), context: context, url: window.location.href, userAgent: navigator.userAgent }; // Log naar console in development if (this.environment === 'development') { console.error('Fout opgetreden:', errorData); } // Stuur naar server await this.sendToServer(errorData); } // Categoriseer fouten categorizeError(error) { if (error instanceof SyntaxError) return 'SYNTAX_ERROR'; if (error instanceof TypeError) return 'TYPE_ERROR'; if (error instanceof ReferenceError) return 'REFERENCE_ERROR'; if (error instanceof RangeError) return 'RANGE_ERROR'; if (error.name === 'NetworkError') return 'NETWORK_ERROR'; if (error.name === 'TimeoutError') return 'TIMEOUT_ERROR'; return 'UNKNOWN_ERROR'; } // Verstuur naar server async sendToServer(errorData) { try { const response = await fetch(this.endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(errorData) }); if (!response.ok) { throw new Error(`Server responded with ${response.status}`); } } catch (networkError) { // Fallback: opslaan in localStorage bij netwerkfouten this.saveOffline(errorData); console.warn('Fout opgeslagen offline:', networkError); } } // Offline opslag als fallback saveOffline(errorData) { const offlineErrors = JSON.parse(localStorage.getItem('offlineErrors') || '[]'); offlineErrors.push(errorData); localStorage.setItem('offlineErrors', JSON.stringify(offlineErrors.slice(-50))); // Beperk tot laatste 50 } } ``` ## Globale foutafhandeling ```javascript // Globale error handler voor onopgevangen fouten window.addEventListener('error', (event) => { const errorLogger = new ErrorLogger(); errorLogger.logError(event.error, { type: 'UNHANDLED_ERROR', filename: event.filename, lineno: event.lineno, colno: event.colno }); }); // Promise rejection handler window.addEventListener('unhandledrejection', (event) => { const errorLogger = new ErrorLogger(); errorLogger.logError(event.reason, { type: 'UNHANDLED_PROMISE_REJECTION' }); }); ``` ## Gebruik in applicatie ```javascript // Initialiseer logger const errorLogger = new ErrorLogger(); // Voorbeeld gebruik async function fetchUserData(userId) { try { const response = await fetch(`/api/users/${userId}`); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } return await response.json(); } catch (error) { await errorLogger.logError(error, { function: 'fetchUserData', userId: userId, severity: 'HIGH' }); throw error; // Herwerp de fout voor verdere afhandeling } } // Aangepaste fouten class CustomValidationError extends Error { constructor(message, field, value) { super(message); this.name = 'ValidationError'; this.field = field; this.value = value; } } // Gebruik aangepaste fouten function validateUser(user) { if (!user.email) { throw new CustomValidationError('Email is verplicht', 'email', user.email); } } ``` ## Server-side voorbeeld (Node.js/Express) ```javascript // errorRoutes.js const express = require('express'); const router = express.Router(); router.post('/api/error-log', async (req, res) => { try { const errorData = req.body; // Valideer en verrijk de data const enrichedError = { ...errorData, receivedAt: new Date(), ip: req.ip, // Voeg extra metadata toe }; // Opslag in database (bijv. MongoDB, PostgreSQL) await saveErrorToDatabase(enrichedError); // Real-time notificaties voor kritieke fouten if (this.isCriticalError(enrichedError)) { await sendAlert(enrichedError); } res.status(200).json({ success: true }); } catch (error) { console.error('Fout bij verwerken error log:', error); res.status(500).json({ success: false }); } }); function isCriticalError(error) { const criticalTypes = ['SYNTAX_ERROR', 'NETWORK_ERROR']; return criticalTypes.includes(error.type) || error.severity === 'HIGH'; } ``` ## Beste praktijken ### 1. Foutcategorisatie ```javascript const ERROR_CATEGORIES = { CLIENT: { VALIDATION: 'CLIENT_VALIDATION', NETWORK: 'CLIENT_NETWORK', RUNTIME: 'CLIENT_RUNTIME' }, SERVER: { API: 'SERVER_API', DATABASE: 'SERVER_DATABASE', AUTH: 'SERVER_AUTH' }, EXTERNAL: { THIRD_PARTY: 'EXTERNAL_SERVICE' } }; ``` ### 2. Severity levels ```javascript const SEVERITY_LEVELS = { LOW: 'LOW', // Info, geen directe actie nodig MEDIUM: 'MEDIUM', // Waarschuwing, onderzoek gewenst HIGH: 'HIGH', // Kritiek, directe actie nodig CRITICAL: 'CRITICAL' // Systeem-storing }; ``` ### 3. Rate limiting ```javascript class RateLimitedLogger extends ErrorLogger { constructor() { super(); this.errorCounts = new Map(); this.limit = 10; // Max errors per minuut per type } async logError(error, context) { const errorType = this.categorizeError(error); const count = this.errorCounts.get(errorType) || 0; if (count >= this.limit) { console.warn(`Rate limit bereikt voor: ${errorType}`); return; } this.errorCounts.set(errorType, count + 1); await super.logError(error, context); } } ``` ## Configuratie tips 1. **Development vs Production**: Gebruik verschillende log levels 2. **Sensitive data**: Filter gevoelige informatie voor het loggen 3. **Performance**: Gebruik async logging om de hoofdthread niet te blokkeren 4. **Retentie**: Definieer bewaartermijnen voor logs 5. **Monitoring**: Integreer met monitoring tools zoals Sentry of DataDog Dit systeem biedt een robuuste basis voor foutafhandeling en kan worden uitgebreid afhankelijk van je specifieke vereisten.