Het implementeren van effectieve foutafhandeling in je JavaScript-toepassingen is essentieel voor robuuste en onderhoudbare code. Hier zijn de beste praktijken, inclusief strategieën voor het opvangen van fouten, het gebruik van try-catch-blokken en het maken van aangepaste fouttypes: 1. Gebruik van try-catch-blokken - Plaats potentieel foutgevoelige code binnen try-blokken om fouten op te vangen. - Gebruik catch-blokken om fouten af te handelen, bijvoorbeeld door gebruikers een duidelijke melding te geven of fallback-acties uit te voeren. - Voor async functies met await, gebruik try-catch om asynchronous fouten af te handelen. 2. Fouten opvangen in async/await functies ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(`HTTP fout: ${response.status}`); } const data = await response.json(); // Verwerk data } catch (error) { console.error('Fout bij het ophalen van data:', error); // Afhandeling of gebruikersmelding } } ``` 3. Aangepaste fouttypes maken - Maak eigen foutklassen door de Error-klasse uit te breiden. Dit helpt bij het categoriseren en identificeren van fouten. ```javascript class FetchError extends Error { constructor(message, status) { super(message); this.name = 'FetchError'; this.status = status; } } async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new FetchError(`HTTP fout: ${response.status}`, response.status); } const data = await response.json(); return data; } catch (error) { if (error instanceof FetchError) { // Specifieke afhandeling voor fetch-fouten console.error(`FetchError: ${error.message} (Status: ${error.status})`); } else { // Algemene foutafhandeling console.error('Onbekende fout:', error); } } } ``` 4. Strategisch foutafhandelingsbeleid - Bepaal welke fouten kritisch zijn en gepaste acties vereisen. - Log fouten voor latere analyse. - Geef gebruikers duidelijke en vriendelijke foutmeldingen. - Overweeg het gebruik van globale foutafhandelingsmechanismen zoals window.onerror voor onvoorziene fouten. 5. Best practices - Vermijd het ontbreken van foutafhandeling; altijd controleren op fouten. - Gebruik async/await met try-catch voor leesbare asynchrone code. - Documenteer welke functies fouten kunnen gooien en hoe ze afgehandeld moeten worden. - Test je foutafhandelingsscenario's grondig. Door deze richtlijnen te volgen, zorg je voor robuuste, onderhoudbare en gebruiksvriendelijke JavaScript-toepassingen.

Hier zijn de beste praktijken voor foutafhandeling in JavaScript: ## 1. Try-Catch Blokken Gebruiken ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error(`HTTP-fout: ${response.status}`); } const data = await response.json(); return data; } catch (error) { console.error('Fout bij ophalen data:', error.message); // Herstelacties of fallback-logica return null; } } ``` ## 2. Aangepaste Fouttypes Maken ```javascript class NetworkError extends Error { constructor(message, statusCode) { super(message); this.name = 'NetworkError'; this.statusCode = statusCode; this.timestamp = new Date().toISOString(); } } class ValidationError extends Error { constructor(message, field) { super(message); this.name = 'ValidationError'; this.field = field; } } ``` ## 3. Foutafhandeling Strategieën ### Globale Foutafhandeling ```javascript // Onverwachte fouten vangen window.addEventListener('error', (event) => { console.error('Globale fout:', event.error); // Log naar monitoring service }); // Promise afwijzingen vangen window.addEventListener('unhandledrejection', (event) => { console.error('Onbehandelde Promise:', event.reason); event.preventDefault(); }); ``` ### Gedetailleerde Foutafhandeling ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (response.status === 404) { throw new NetworkError('Data niet gevonden', 404); } if (response.status === 500) { throw new NetworkError('Server fout', 500); } if (!response.ok) { throw new NetworkError(`HTTP ${response.status}`, response.status); } const data = await response.json(); // Validatie if (!data || typeof data !== 'object') { throw new ValidationError('Ongeldig data formaat', 'data'); } return data; } catch (error) { switch (error.name) { case 'NetworkError': console.warn('Netwerkfout:', error.message); // Retry logica of fallback break; case 'ValidationError': console.warn('Validatiefout:', error.message); // Gebruiker informeren break; default: console.error('Onverwachte fout:', error); // Naar monitoring service sturen } throw error; // Doorgeven aan aanroeper } } ``` ## 4. Beste Praktijken ### Fouten Loggen ```javascript function logError(error, context = {}) { const errorLog = { timestamp: new Date().toISOString(), message: error.message, stack: error.stack, name: error.name, context: context }; // Naar console, monitoring service, of backend console.error('Fout gelogd:', errorLog); } ``` ### Fout Grenzen (React) ```javascript class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { logError(error, { componentStack: errorInfo.componentStack }); } render() { if (this.state.hasError) { return <h1>Er is iets misgegaan.</h1>; } return this.props.children; } } ``` ### Retry Mechanisme ```javascript async function fetchDataWithRetry(url, maxRetries = 3) { for (let attempt = 1; attempt <= maxRetries; attempt++) { try { const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); return await response.json(); } catch (error) { if (attempt === maxRetries) throw error; console.warn(`Poging ${attempt} mislukt, opnieuw proberen...`); await new Promise(resolve => setTimeout(resolve, 1000 * attempt) // Exponentiële backoff ); } } } ``` ## 5. Foutafhandeling in Productie ```javascript // Fout monitoring service function reportError(error, severity = 'error') { if (process.env.NODE_ENV === 'production') { // Stuur naar Sentry, LogRocket, etc. // monitoringService.captureException(error); } else { console[severity](error); } } // Gebruiksvriendelijke foutmeldingen function getUserFriendlyErrorMessage(error) { const errorMap = { 'NetworkError': 'Geen internetverbinding', 'ValidationError': 'Ongeldige gegevens', 'TypeError': 'Er ging iets mis' }; return errorMap[error.name] || 'Er is een onverwachte fout opgetreden'; } ``` Deze praktijken zorgen voor robuuste foutafhandeling die zowel ontwikkelaars als eindgebruikers helpt!