/** * Läuft vor React/Next – fängt kritische Fehler (ChunkLoadError, MIME, etc.) * und zeigt einen schwarzen Fullscreen mit kopierbarem Fehler-Modal. * * WICHTIG zur Hydration-Sicherheit: * - Dieses Skript wird über das Root-Layout in den eingebettet * (kein hydratisiertes Element). * - Das Overlay-Element wird beim Anzeigen NICHT in eingehängt, * sondern als Child von (documentElement). Damit verändert sich * die DOM-Struktur des , die React hydratisieren möchte, NICHT. * Andernfalls würde ein früher Fehler (z.B. ChunkLoadError) ein Extra- *

in einfügen und genau die Hydration-Meldung * "Did not expect server HTML to contain a

" auslösen. */ (function () { var errors = []; var shown = false; var contentEl = null; var overlayEl = null; var pendingShow = false; var isDev = false; try { isDev = document.documentElement && document.documentElement.getAttribute('data-env') === 'development'; } catch (e) {} function isCritical(msg, err) { if (isDev) return false; var s = (msg || '') + (err && err.message ? err.message : '') + (err && err.stack ? err.stack : ''); return ( /ChunkLoadError|Loading chunk .* failed|MIME type|Refused to execute script|Refused to apply style|net::ERR_ABORTED|Minified React error|Failed to fetch dynamically imported module|getStaticProps|Dynamic server usage/i.test(s) ); } function isStaleChunkError(text) { return /ChunkLoadError|Loading chunk .* failed|Failed to fetch dynamically imported module/i.test(text || ''); } /** * ChunkLoadError = Client hat veraltete Chunk-URLs (z. B. nach Dev-/Deploy-Neustart). * Ein einmaliger Reload holt den frischen Build. Guard über sessionStorage, * damit kein Reload-Loop entsteht, falls der Chunk wirklich kaputt ist. */ function tryAutoReloadForStaleChunk() { // Auch in Dev: nach next-Restart sind alte Chunk-URLs tot → einmal hard reload. try { var key = 'kg-chunk-reload-at'; var last = Number(sessionStorage.getItem(key) || 0); if (Date.now() - last < 30000) return false; sessionStorage.setItem(key, String(Date.now())); } catch (e) { return false; } try { var href = (location.pathname || '/') + (location.search || '') + (location.hash || ''); if (href && href !== '/') { sessionStorage.setItem('kg:last-href', href); sessionStorage.setItem('kg:restore-pending', '1'); } } catch (eSave) {} location.reload(); return true; } function getErrorText() { return errors.map(function (e) { return (e.ts ? '[' + e.ts + '] ' : '') + e.text; }).join('\n\n---\n\n'); } function buildOverlay() { var div = document.createElement('div'); div.id = 'kynxgate-critical-error-overlay'; div.style.cssText = 'position:fixed;inset:0;background:#000;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;'; var modal = document.createElement('div'); modal.style.cssText = 'background:#111;border:1px solid #333;border-radius:12px;max-width:90vw;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;min-width:320px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);'; var title = document.createElement('div'); title.style.cssText = 'padding:16px 20px;border-bottom:1px solid #333;font-size:18px;font-weight:600;color:#ef4444;display:flex;align-items:center;gap:10px;'; title.innerHTML = ' Kritischer Fehler'; contentEl = document.createElement('pre'); contentEl.style.cssText = 'padding:20px;margin:0;overflow:auto;flex:1;font-size:12px;line-height:1.5;color:#e5e5e5;white-space:pre-wrap;word-break:break-all;max-height:50vh;'; contentEl.textContent = getErrorText(); var actions = document.createElement('div'); actions.style.cssText = 'padding:16px 20px;border-top:1px solid #333;display:flex;gap:12px;flex-wrap:wrap;'; var copyBtn = document.createElement('button'); copyBtn.textContent = 'In Zwischenablage kopieren'; copyBtn.style.cssText = 'padding:10px 16px;background:#2563eb;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;'; copyBtn.onclick = function () { navigator.clipboard.writeText(getErrorText()).then(function () { copyBtn.textContent = 'Kopiert!'; setTimeout(function () { copyBtn.textContent = 'In Zwischenablage kopieren'; }, 2000); }); }; var reloadBtn = document.createElement('button'); reloadBtn.textContent = 'Seite neu laden'; reloadBtn.style.cssText = 'padding:10px 16px;background:#444;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;'; reloadBtn.onclick = function () { location.reload(); }; actions.appendChild(copyBtn); actions.appendChild(reloadBtn); modal.appendChild(title); modal.appendChild(contentEl); modal.appendChild(actions); div.appendChild(modal); return div; } function attachOverlay() { if (!overlayEl) return; // Wir hängen das Overlay an (documentElement), NICHT an , // damit die -Struktur, die React hydratisiert, unverändert bleibt. var host = document.documentElement || document.body; if (!host) return false; if (overlayEl.parentNode !== host) { try { host.appendChild(overlayEl); return true; } catch (e) { // Fallback: an , wenn documentElement nicht akzeptiert if (document.body && document.body !== host) { document.body.appendChild(overlayEl); return true; } return false; } } return true; } function showOverlay() { if (shown) return; shown = true; overlayEl = buildOverlay(); // Wenn DOM noch nicht bereit ist, warten – sonst sofort anhängen. if (document.readyState === 'loading' || !document.documentElement) { pendingShow = true; document.addEventListener('DOMContentLoaded', function () { pendingShow = false; attachOverlay(); }, { once: true }); } else { attachOverlay(); } } function addError(text, isCrit) { errors.push({ ts: new Date().toISOString(), text: text }); // Stale Chunks immer einmal neu laden (auch Dev, wo isCritical=false) if (isStaleChunkError(text) && tryAutoReloadForStaleChunk()) return; if (isCrit) showOverlay(); if (shown && contentEl) contentEl.textContent = getErrorText(); } window.onerror = function (msg, source, lineno, colno, err) { var parts = [msg]; if (source) parts.push(source + (lineno != null ? ':' + lineno + (colno != null ? ':' + colno : '') : '')); if (err && err.stack) parts.push(err.stack); var text = parts.filter(Boolean).join('\n'); addError(text, isCritical(msg, err)); return false; }; window.addEventListener('unhandledrejection', function (ev) { var reason = ev.reason; var msg = reason && (reason.message || reason.toString()); var stack = reason && reason.stack ? '\n' + reason.stack : ''; var text = (msg || 'Unhandled rejection') + stack; addError(text, isCritical(msg, reason)); }); var origConsoleError = console.error; if (!isDev) { console.error = function () { var args = Array.prototype.slice.call(arguments); origConsoleError.apply(console, args); var str = args.map(function (a) { if (typeof a === 'string') return a; if (a && a.message) return a.message + (a.stack ? '\n' + a.stack : ''); try { return JSON.stringify(a); } catch (e) { return String(a); } }).join(' '); addError(str, /ChunkLoadError|Loading chunk|MIME type|Refused to execute|Refused to apply|ERR_ABORTED|Minified React error|Failed to fetch dynamically imported/i.test(str)); }; } })();

Anmelden