Het maken van een Vue.js-component die geavanceerde foutafhandeling met error boundaries implementeert, vereist het gebruik van Vue's error handling mechanismen en het structureren van componenten zodat fouten worden opgevangen en afgehandeld. Hieronder leg ik uit hoe je dit kunt doen, inclusief detectie van fouten in child componenten, tonen van een fallback UI, foutgegevens loggen, en specifieke fouten onderscheiden voor aangepaste reacties. ### 1. Error Boundary in Vue.js Vue 3 introduceert de `errorCaptured` lifecycle hook, waarmee je fouten van child componenten kunt onderscheppen. Voor een centrale foutafhandeling maak je een wrapper component die deze hook gebruikt: ```vue <template> <div> <slot v-if="!hasError"></slot> <div v-else class="fallback-ui" @click="reload"> Er is een fout opgetreden. Klik hier om opnieuw te laden. </div> </div> </template> <script> export default { data() { return { hasError: false, errorInfo: null, }; }, errorCaptured(err, vm, info) { this.hasError = true; this.errorInfo = { err, info, component: vm }; // Log de fout naar Sentry this.logError(err, info); // Return false om verdere error propagation te voorkomen return false; }, methods: { logError(err, info) { // Hier stuur je de foutgegevens naar Sentry via API fetch('https://api.sentry.io/store/', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ error: err.toString(), info, component: this.errorInfo?.component?.$options?.name || 'Unknown', timestamp: new Date().toISOString(), }), }); }, reload() { window.location.reload(); }, }, }; </script> ``` ### 2. Gebruik van de Error Boundary Je wikkelt je hoofdcomponenten, zoals de productlijst, in deze Error Boundary: ```vue <ErrorBoundary> <ProductList /> </ErrorBoundary> ``` ### 3. Detectie van specifieke fouten en aangepaste reacties Binnen `errorCaptured` kun je fouttypes onderscheiden door bijvoorbeeld te kijken naar de foutboodschap of foutcode: ```js errorCaptured(err, vm, info) { // Voorbeeld: herhaal bij netwerkfouten if (err.message && err.message.includes('Network Error')) { this.showRetry = true; } else { this.hasError = true; } this.logError(err, info); return false; } ``` Daarnaast kun je in je fallback UI speciale knoppen tonen, afhankelijk van de fout: ```vue <div v-if="showRetry" class="fallback-ui"> <p>Netwerkfout. Probeer het opnieuw.</p> <button @click="retry">Opnieuw proberen</button> </div> ``` En in je script: ```js methods: { retry() { // Logica om opnieuw te proberen, bijvoorbeeld herladen this.hasError = false; this.showRetry = false; // eventueel herladen of opnieuw fetchen this.$emit('retry'); }, } ``` ### 4. Productlijst met filters en sorteeropties In je productlijst component kun je de foutafhandeling integreren door het in een Error Boundary te plaatsen en daarnaast de functionaliteit voor filters en sortering te implementeren: ```vue <ErrorBoundary> <ProductList /> </ErrorBoundary> ``` `ProductList` zou je kunnen structureren met data, methods en computed properties voor filters en sorteren. Als er een fout optreedt in deze component of een child component, wordt deze gevangen door de boundary en wordt de fallback UI getoond. --- ### Samenvatting - Gebruik `errorCaptured` in een wrapper component om fouten te onderscheppen. - Toon een fallback UI bij fouten, met opties zoals opnieuw laden of retry. - Log fouten naar Sentry via API in `logError`. - Detecteer specifieke fouten door foutmeldingen of codes te inspecteren en pas je reactie aan, zoals het tonen van een retry knop bij netwerkfouten. - Plaats je productlijst binnen de error boundary voor geavanceerde foutafhandeling. Zo creëer je een robuuste Vue.js applicatie met geavanceerde foutafhandeling en gebruikersvriendelijke fallback opties.

Hier is een Vue.js implementatie met error boundaries voor je productlijst component: ```vue <template> <div> <!-- Error Boundary Component --> <error-boundary @error-caught="handleError"> <!-- Productlijst met filters --> <product-list :products="filteredProducts" @sort="handleSort" @filter="handleFilter" @retry="fetchProducts" /> <!-- Fallback UI slot --> <template #fallback="{ error, resetError }"> <div class="error-fallback"> <div v-if="isNetworkError(error)"> <h3>Netwerkfout opgetreden</h3> <p>Er is een probleem met de verbinding.</p> <button @click="retryOperation">Opnieuw proberen</button> </div> <div v-else> <h3>Er is een fout opgetreden</h3> <p>Klik hier om opnieuw te laden</p> <button @click="resetError">Opnieuw laden</button> </div> </div> </template> </error-boundary> </div> </template> <script> // Error Boundary Component const ErrorBoundary = { name: 'ErrorBoundary', data() { return { hasError: false, currentError: null } }, errorCaptured(error, vm, info) { // Fout detecteren in child componenten this.hasError = true this.currentError = { error, component: vm.$options.name, info } // Doorgeven aan parent component this.$emit('error-caught', this.currentError) // Voorkomen dat de fout verder propageert return false }, methods: { resetError() { this.hasError = false this.currentError = null } }, render(h) { if (this.hasError) { // Fallback UI tonen return this.$scopedSlots.fallback({ error: this.currentError, resetError: this.resetError }) } // Normale child content return this.$slots.default[0] } } // Product List Component const ProductList = { name: 'ProductList', props: ['products'], methods: { async fetchProducts() { try { // Simulatie van API call const response = await fetch('/api/products') if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`) } this.$emit('update:products', await response.json()) } catch (error) { // Fout doorgooien naar error boundary throw error } }, handleSort(sortBy) { // Sorteerlogica die mogelijk fouten kan veroorzaken try { const sorted = [...this.products].sort((a, b) => a[sortBy].localeCompare(b[sortBy]) ) this.$emit('sorted', sorted) } catch (error) { throw new Error(`Sorteerfout: ${error.message}`) } } }, mounted() { this.fetchProducts() } } export default { name: 'ProductCatalog', components: { ErrorBoundary, ProductList }, data() { return { products: [], filters: {}, errorLog: [] } }, computed: { filteredProducts() { // Filterlogica hier return this.products } }, methods: { // Foutafhandeling async handleError(errorInfo) { // Fouten loggen naar Sentry await this.logToSentry(errorInfo) // Lokale error log bijhouden this.errorLog.push({ timestamp: new Date().toISOString(), ...errorInfo }) }, // Sentry logging async logToSentry(errorInfo) { try { await fetch('https://sentry.io/api/your-endpoint', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer your-sentry-token' }, body: JSON.stringify({ message: errorInfo.error.message, component: errorInfo.component, stack: errorInfo.error.stack, context: errorInfo.info }) }) } catch (loggingError) { console.error('Sentry logging mislukt:', loggingError) } }, // Specifieke foutdetectie isNetworkError(error) { return error.error instanceof TypeError && error.error.message.includes('fetch') || error.error.message.includes('network') || error.error.message.includes('HTTP') }, // Aangepaste reacties voor specifieke fouten retryOperation() { if (this.isNetworkError(this.currentError)) { this.fetchProducts() } }, handleFilter(filterOptions) { try { // Filter implementatie this.filters = { ...filterOptions } } catch (error) { throw new Error(`Filterfout: ${error.message}`) } } } } </script> <style scoped> .error-fallback { padding: 2rem; text-align: center; border: 1px solid #e0e0e0; border-radius: 8px; margin: 1rem 0; } .error-fallback button { padding: 0.5rem 1rem; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } .error-fallback button:hover { background: #0056b3; } </style> ``` ## Belangrijke concepten uitgelegd: ### 1. **Error Boundary Pattern** - `errorCaptured()` lifecycle hook vangt fouten in child componenten - Return `false` voorkomt verdere propagatie - Fallback UI wordt getoond bij fouten ### 2. **Foutdetectie en Classificatie** - `isNetworkError()` methode identificeert netwerkproblemen - Type checking met `instanceof` - String matching voor foutberichten ### 3. **Sentry Integration** - HTTP POST naar Sentry API endpoint - Gestructureerde error data met context - Fallback voor logging fouten ### 4. **Specifieke Foutafhandeling** - Netwerkfouten: retry functionaliteit - Andere fouten: algemene fallback UI - Aangepaste error messages per fouttype ### 5. **Fallback UI Management** - Conditionele rendering gebaseerd op fouttype - Scoped slots voor flexibele UI - Reset functionaliteit om state te herstellen Deze implementatie biedt robuuste foutafhandeling met duidelijke scheiding van concerns en uitbreidbare architectuur voor toekomstige foutscenario's.