// HYDRATION TRACER - Capture exact mismatch details (function() { var serverHTML = ''; var observerStarted = false; // Capture server-rendered HTML before React hydrates document.addEventListener('DOMContentLoaded', function() { serverHTML = document.body.innerHTML.slice(0, 5000); console.log('[HydrationTrace] Server HTML captured'); }); // Intercept React errors to capture hydration details var originalError = console.error; console.error = function() { var args = Array.from(arguments); var msg = args.join(' '); // Check if this is a hydration error if (msg.includes('Hydration') || msg.includes('hydrat') || msg.includes('Text content') || msg.includes('did not match')) { var clientHTML = document.body.innerHTML.slice(0, 5000); // Find the difference var diff = { error: msg.slice(0, 500), serverLength: serverHTML.length, clientLength: clientHTML.length, serverSnippet: serverHTML.slice(0, 500), clientSnippet: clientHTML.slice(0, 500), url: window.location.href, timestamp: new Date().toISOString() }; // Log to console console.log('[HydrationTrace] MISMATCH DETECTED:', JSON.stringify(diff, null, 2)); // Send to server for analysis fetch('/api/errors/hydration-trace', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(diff) }).catch(function() {}); } originalError.apply(console, args); }; })(); // Register Service Worker if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then((registration) => { console.log('SW registered:', registration); }) .catch((error) => { console.error('SW registration failed:', error); }); }); } // Global handler for chunk loading errors window.addEventListener('error', function(event) { if (event.message && ( event.message.includes('Loading chunk') || event.message.includes('Failed to fetch') || event.message.includes('Failed to load') )) { console.error('[ChunkError] Detected chunk loading error'); showChunkErrorPopup(); } }); window.addEventListener('unhandledrejection', function(event) { if (event.reason && event.reason.message && ( event.reason.message.includes('Loading chunk') || event.reason.message.includes('Failed to fetch') || event.reason.message.includes('Failed to load') || event.reason.message.includes('from module') )) { console.error('[ChunkError] Detected chunk loading rejection'); showChunkErrorPopup(); } }); function showChunkErrorPopup() { // Prevent multiple popups if (document.getElementById('chunk-error-popup')) return; var popup = document.createElement('div'); popup.id = 'chunk-error-popup'; popup.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.9);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;'; popup.innerHTML = '

' + '

⚠️

' + '

Update Beschikbaar

' + '

Er is een nieuwe versie. Clear de cache om door te gaan.

' + '' + '' + '

'; document.body.appendChild(popup); } async function clearCacheAndReload() { try { if ('caches' in window) { var names = await caches.keys(); await Promise.all(names.map(function(n) { return caches.delete(n); })); } if ('serviceWorker' in navigator) { var regs = await navigator.serviceWorker.getRegistrations(); await Promise.all(regs.map(function(r) { return r.unregister(); })); } localStorage.clear(); sessionStorage.clear(); } catch(e) { console.error(e); } window.location.reload(); }

SHADOW

SYSTEM

Begin Your Awakening