Zeker! Hier is een uitgebreide gids voor het opzetten van een foutafhandelings- en loggingstrategie in je React Native-app, gericht op best practices en jouw specifieke context: 1. Globale foutafhandeling a. Uncaught JavaScript-fouten opvangen: Gebruik `ErrorUtils.setGlobalHandler` om ongedekte fouten in React Native te onderscheppen: ```javascript import { Alert } from 'react-native'; const globalErrorHandler = (error, isFatal) => { // Log de fout console.log('Globale fout:', error); // Optioneel: verzend foutrapport sendErrorToServer(error, isFatal); if (isFatal) { // Toon een gebruikersvriendelijke melding Alert.alert( 'Er is een onverwachte fout opgetreden', 'De app moet worden afgesloten. Herstart de app.', [{ text: 'OK', onPress: () => {/* Optioneel: afsluiten of herstarten */} }] ); } }; ErrorUtils.setGlobalHandler(globalErrorHandler); ``` b. Fouten in componenten en functies afvangen: Gebruik try-catch blokken rondom kritieke code, vooral bij netwerkverzoeken: ```javascript try { await fetchData(); } catch (error) { console.log('Netwerkfout:', error); // Feedback aan gebruiker Alert.alert('Netwerkfout', 'Controleer je internetverbinding en probeer opnieuw.'); // Verzamel foutgegevens sendErrorToServer(error); } ``` 2. Netwerkfouten specifiek beheren - Detecteer en behandel netwerkproblemen expliciet door bijv. `fetch` of `axios` te gebruiken met error-afhandeling. - Gebruik `NetInfo` (van `@react-native-community/netinfo`) om netwerkstatus te monitoren en gebruikers te informeren: ```javascript import NetInfo from '@react-native-community/netinfo'; NetInfo.addEventListener(state => { if (!state.isConnected) { Alert.alert('Geen internetverbinding', 'Je hebt momenteel geen internetverbinding.'); } }); ``` 3. Crashrapportage en foutvolgsystemen integreren - Integreer tools zoals Sentry, Bugsnag of Firebase Crashlytics voor geavanceerde fouttracking: ```javascript import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'JOUW_DSN_URL' }); // Bij fouten: Sentry.captureException(error); ``` - Zorg dat je foutgegevens automatisch worden gestuurd bij crashes en fouten. 4. Loggingstrategie - Gebruik een gestructureerde aanpak: - Logserieniveau (info, waarschuwing, fout) - Contextuele info (gebruikersactie, scherm, component) - Beperk console logging in productie; gebruik een loggingbibliotheek of aangepaste logger die logs kan sturen naar een externe server. 5. Gebruikersfeedback - Toon duidelijke, niet-technische berichten bij fouten: ```javascript Alert.alert( 'Oeps!', 'Er is iets misgegaan. Probeer het later nog eens.', [{ text: 'OK' }] ); ``` - Geef opties voor herladen of contact opnemen. 6. Best practices - Minimaliseer het gebruik van try-catch: gebruik het waar het echt nodig is. - Zorg voor consistente foutafhandeling op alle niveaus. - Test foutscenario’s grondig (bijvoorbeeld door netwerk uit te schakelen). - Documenteer je foutafhandelingsproces en training voor je team. Door bovenstaande strategieën te implementeren, verbeter je de stabiliteit van je app, krijg je waardevolle inzichten in fouten en bied je gebruikers een prettige ervaring, zelfs bij problemen.

Zeker, hier is een uitgebreide strategie voor foutafhandeling en logging in React Native: ## 1. Gestructureerde Foutafhandeling ### Globale Foutafhandeling ```javascript // ErrorBoundary.js import React from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error('Error Boundary caught:', error, errorInfo); // Log naar je tracking service this.logError(error, errorInfo); } render() { if (this.state.hasError) { return this.props.fallback || <DefaultErrorScreen />; } return this.props.children; } } ``` ### Gebruik in je app: ```javascript // App.js import ErrorBoundary from './ErrorBoundary'; const App = () => { return ( <ErrorBoundary fallback={<CustomErrorScreen />}> <YourApp /> </ErrorBoundary> ); }; ``` ## 2. Netwerkfoutafhandeling ### Gestandaardiseerde API calls ```javascript // apiService.js class ApiService { async makeRequest(url, options = {}) { try { const response = await fetch(url, { timeout: 10000, ...options }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } return await response.json(); } catch (error) { this.handleNetworkError(error); throw error; } } handleNetworkError(error) { let userMessage = 'Er ging iets mis'; if (error.message.includes('Network request failed')) { userMessage = 'Geen internetverbinding'; } else if (error.message.includes('timeout')) { userMessage = 'Verzoek duurt te lang'; } else if (error.message.includes('4')) { userMessage = 'Serverfout - probeer het later opnieuw'; } else if (error.message.includes('5')) { userMessage = 'Probleem met de server'; } // Toon gebruikersfeedback Alert.alert('Fout', userMessage); // Log de fout Logger.error('Network Error', { error: error.message, userMessage, timestamp: new Date().toISOString() }); } } ``` ## 3. Geavanceerde Logging Service ```javascript // Logger.js class Logger { static levels = { ERROR: 0, WARN: 1, INFO: 2, DEBUG: 3 }; static log(level, message, metadata = {}) { const logEntry = { level, message, timestamp: new Date().toISOString(), platform: Platform.OS, version: DeviceInfo.getVersion(), ...metadata }; // Console logging (alleen in development) if (__DEV__) { console[level.toLowerCase()](message, logEntry); } // Stuur naar externe service in production if (!__DEV__) { this.sendToRemote(logEntry); } } static error(message, metadata) { this.log('ERROR', message, metadata); } static warn(message, metadata) { this.log('WARN', message, metadata); } static info(message, metadata) { this.log('INFO', message, metadata); } static debug(message, metadata) { this.log('DEBUG', message, metadata); } static async sendToRemote(logEntry) { try { await fetch('YOUR_LOGGING_ENDPOINT', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(logEntry) }); } catch (error) { // Fallback: sla lokaal op this.storeLocally(logEntry); } } static storeLocally(logEntry) { // Gebruik AsyncStorage of een lokale database AsyncStorage.getItem('app_logs') .then(logs => { const existingLogs = logs ? JSON.parse(logs) : []; existingLogs.push(logEntry); // Beperk tot laatste 100 logs const limitedLogs = existingLogs.slice(-100); AsyncStorage.setItem('app_logs', JSON.stringify(limitedLogs)); }); } } ``` ## 4. Fout Tracking Integratie ### Sentry (aanbevolen) ```javascript // monitoring.js import * as Sentry from '@sentry/react-native'; Sentry.init({ dsn: 'YOUR_SENTRY_DSN', environment: __DEV__ ? 'development' : 'production', beforeSend(event) { // Filter gevoelige informatie delete event.request?.cookies; return event; } }); // Gebruik in componenten const trackError = (error, context = {}) => { Sentry.withScope(scope => { scope.setExtras(context); Sentry.captureException(error); }); Logger.error('Sentry tracked error', { error: error.message, ...context }); }; ``` ## 5. Gebruikersfeedback ### Vriendelijke foutschermen ```javascript // ErrorScreens.js import React from 'react'; import { View, Text, Button, StyleSheet } from 'react-native'; export const NetworkErrorScreen = ({ onRetry }) => ( <View style={styles.container}> <Text style={styles.title}>Geen verbinding</Text> <Text style={styles.message}> Controleer je internetverbinding en probeer opnieuw </Text> <Button title="Opnieuw proberen" onPress={onRetry} /> </View> ); export const GenericErrorScreen = ({ onRetry, onReport }) => ( <View style={styles.container}> <Text style={styles.title}>Er ging iets mis</Text> <Text style={styles.message}> Onverwachte fout opgetreden. We werken eraan! </Text> <View style={styles.buttonContainer}> <Button title="Opnieuw proberen" onPress={onRetry} /> <Button title="Fout melden" onPress={onReport} /> </View> </View> ); ``` ## 6. Platform-specifieke Afhandeling ```javascript // platformHandling.js import { Platform, Alert } from 'react-native'; export const handlePlatformSpecificError = (error) => { if (Platform.OS === 'ios') { // iOS-specifieke foutafhandeling if (error.code === 'EAI_AGAIN') { return 'DNS-fout - controleer je netwerk'; } } else if (Platform.OS === 'android') { // Android-specifieke foutafhandeling if (error.message.includes('CLEARTEXT')) { return 'Beveiligingsfout - gebruik HTTPS'; } } return 'Onbekende fout opgetreden'; }; ``` ## 7. Best Practices Checklist ### ✅ Implementeer altijd: - Error Boundaries voor React componenten - Try-catch blokken voor async operaties - Netwerk status monitoring - Gestructureerde logging - Gebruikersvriendelijke foutmeldingen ### ✅ Vermijd: - `console.log` in production - Technische foutmeldingen tonen aan gebruikers - Fouten negeren in promises - Geen feedback bij laadstates ### ✅ Testscenario's: - Schakel wifi/4G uit tijdens API calls - Forceer memory warnings - Test met trage netwerken - Simuleer server errors ## 8. Aanbevolen Libraries ```bash npm install @sentry/react-native npm install react-native-device-info npm install @react-native-async-storage/async-storage ``` Deze strategie zorgt voor robuuste foutafhandeling, gedetailleerde logging en een professionele gebruikerservaring, zelfs wanneer er dingen misgaan.