(function installPublicStyleRecovery() { if (typeof window === 'undefined' || window.__hubPublicStyles) return; const records = new Map(), policies = new Map(); const initialLinks = new WeakSet(); const captureInitial = () => { for (const link of document.querySelectorAll('link[rel="stylesheet"]')) initialLinks.add(link); }; if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', captureInitial, { once: true }); else captureInitial(); const reader = () => /^\/(?:visuals\/[^/]+(?:\/embed|\/videos\/[^/]+)?|live\/(?:[^/]+|file\/[^/]+))\/?$/.test(location.pathname); function asset(value) { try { const url = new URL(value, location.href); if (url.search || url.hash || url.username || url.password || url.origin !== 'https://storage.googleapis.com') return null; const match = url.pathname.match(/^\/moose-reports-images\/hub-assets\/([a-f0-9]{40})\/_next\/static\/css\/([a-f0-9]{8,64}\.css)$/); return match ? { url: url.href, path: url.pathname, version: match[1], filename: match[2] } : null; } catch { return null; } } function report(record) { try { void fetch('/api/internal/log-error', { method: 'POST', keepalive: true, headers: { 'content-type': 'application/json' }, body: JSON.stringify({ source: 'resource', feature: 'public-reader-stylesheet', severity: record.diagnostic.outcome === 'recovered' ? 'warning' : 'error', message: `Stylesheet ${record.diagnostic.outcome === 'recovered' ? 'recovered after one retry' : 'could not recover'}: ${record.asset.url}`, url: location.origin + record.route, stylesheetDiagnostics: record.diagnostic }) }).catch(() => {}); } catch { /* Reporting cannot change the load result. */ } } function finish(record, loaded) { if (!record.pending) return; record.pending = false; clearTimeout(record.timer); const recovered = loaded && Boolean(record.replacement?.sheet); record.diagnostic.outcome = recovered ? 'recovered' : 'failed'; record.diagnostic.elapsedMs = Math.min(300000, Date.now() - record.started); if (!recovered) { record.replacement?.remove(); if (record.route === location.pathname && reader() && !document.getElementById('hub-style-failure')) { const notice = document.createElement('div'); notice.id = 'hub-style-failure'; notice.setAttribute('role', 'alert'); notice.textContent = 'Some page styles could not load. '; const button = document.createElement('button'); button.type = 'button'; button.textContent = 'Reload page'; button.onclick = () => location.reload(); notice.appendChild(button); // Native text/button remain usable even when all application CSS failed. notice.style.cssText = 'position:fixed;top:0;left:0;right:0;z-index:2147483647;padding:12px;background:#fff;color:#111;border:2px solid #b91c1c;font:16px sans-serif'; button.style.cssText = 'min-height:44px;padding:8px;cursor:pointer'; const host = document.body || document.documentElement; host.appendChild(notice); // Do not prepend a node into React's hydration order. Reserve the // fixed notice's measured height instead, including after rotation. const padding = parseFloat(window.getComputedStyle(host).paddingTop) || 0; const reserve = () => { if (notice.isConnected) host.style.paddingTop = `${padding + notice.getBoundingClientRect().height}px`; }; reserve(); if (typeof window.ResizeObserver === 'function') new window.ResizeObserver(reserve).observe(notice); else window.addEventListener('resize', reserve); } } report(record); // React owns the original stylesheet node. Keep it in place so hydration // does not recreate the failed URL after our replacement has loaded. // Only these synthetic completion events are already covered by our final // diagnostic; ordinary later resource failures remain reportable. record.dispatching = true; try { for (const link of record.links) link.dispatchEvent(new Event(recovered ? 'load' : 'error')); } finally { record.dispatching = false; } } async function recover(link, event) { const target = asset(link.href); if (!reader() || !target || link.disabled || link.rel !== 'stylesheet') return; const previous = records.get(target.url); if (previous) { if (previous.pending && !previous.links.includes(link)) { previous.links.push(link); link.remove(); } return; } if (records.size >= 20) return; const record = { asset: target, route: location.pathname, started: Date.now(), pending: true, links: [link], replacement: null, timer: null, diagnostic: { version: 1, assetPath: target.path, firstEvent: event.type === 'missing-sheet' ? 'missing-sheet' : 'error', attempts: 1, outcome: 'failed', online: navigator.onLine !== false, probeStatus: null, probeError: null, probeContentType: 'unavailable', cspDirective: policies.get(target.url) || null, elapsedMs: 0 } }; records.set(target.url, record); event.stopImmediatePropagation?.(); const diagnostic = record.diagnostic; if (diagnostic.online && !diagnostic.cspDirective) { const controller = new AbortController(), timer = setTimeout(() => controller.abort(), 2500); try { const response = await fetch(target.url, { method: 'HEAD', credentials: 'omit', redirect: 'error', cache: 'no-store', signal: controller.signal }); diagnostic.probeStatus = response.status; diagnostic.probeContentType = /^text\/css(?:;|$)/i.test(response.headers.get('content-type') || '') ? 'css' : 'other'; } catch { diagnostic.probeError = controller.signal.aborted ? 'timeout' : 'network'; } finally { clearTimeout(timer); } } diagnostic.cspDirective = policies.get(target.url) || diagnostic.cspDirective; // A rate-limited public origin is temporary. Try the exact immutable Hub // copy once; never retry the throttled origin or relax CSP/MIME checks. const rateLimited = diagnostic.probeStatus === 429; const denied = !rateLimited && diagnostic.probeStatus !== null && (diagnostic.probeStatus < 200 || diagnostic.probeStatus >= 300 || diagnostic.probeContentType !== 'css'); if (!diagnostic.online || diagnostic.cspDirective || denied || record.route !== location.pathname || !reader()) return finish(record, false); const replacement = document.createElement('link'); for (const attribute of Array.from(link.attributes)) replacement.setAttribute(attribute.name, attribute.value); replacement.nonce = link.nonce; // Relative font/image URLs retain their sibling media directory. The route // serves only public hashed bytes from this exact application version. replacement.href = `${location.origin}/api/public/build-assets/${target.version}/css/${target.filename}?hub_style_retry=1`; record.replacement = replacement; diagnostic.attempts = 2; replacement.onload = () => finish(record, true); replacement.onerror = () => finish(record, false); record.timer = setTimeout(() => finish(record, false), 15000); const parent = link.parentNode; try { // Keep the original cascade position: appending at the end could let an // earlier stylesheet override rules from a later stylesheet after recovery. if (parent) parent.insertBefore(replacement, link); else document.head.appendChild(replacement); } catch { finish(record, false); } } document.addEventListener('securitypolicyviolation', event => { const target = asset(event.blockedURI); if (target && policies.size < 20) policies.set(target.url, String(event.effectiveDirective || '').replace(/[^a-z-]/g, '').slice(0, 60)); }); document.addEventListener('error', event => { if (event.target?.tagName === 'LINK') void recover(event.target, event); }, true); window.addEventListener('load', () => { if (document.readyState !== 'complete') return; for (const link of document.querySelectorAll('link[rel="stylesheet"]')) { if (initialLinks.has(link) && !link.sheet) void recover(link, { type: 'missing-sheet' }); } }, { once: true }); const eligible = link => { const target = link?.tagName === 'LINK' && link.rel === 'stylesheet' && !link.disabled && asset(link.href); return Boolean(reader() && target && (records.has(target.url) || records.size < 20)); }; window.__hubPublicStyles = { eligible, claimMissing: link => { if (!eligible(link)) return false; const target = asset(link.href); if (records.has(target.url)) return true; // A still-loading sheet is not a proven failure. The existing watchdog // delegates missed initial failures only after the document finished loading. if (document.readyState !== 'complete' || !initialLinks.has(link)) return false; void recover(link, { type: 'missing-sheet' }); return records.has(target.url); }, state: value => { const target = asset(value), record = target && records.get(target.url); return record ? record.pending ? 'pending' : record.diagnostic.outcome : null; }, pending: value => { const target = asset(value); const record = target && records.get(target.url); return Boolean(record && (record.pending || record.dispatching) || Array.from(records.values()).some(record => record.pending && record.replacement?.href === value)); } }; })();(function installPublicChunkRecovery() { if (typeof window === 'undefined') return null; if (window.__hubPublicChunks) return window.__hubPublicChunks; const records = new Map(), retried = new Map(), policies = new Map(), witnesses = new Map(), issued = new Map(); const readyCallbacks = []; // Next hoists initial async scripts before user head content. Their error can // precede this handler, particularly on WebKit. Retain only these existing // allowlisted tags; document load later proves their execution has finished. const initialScripts = new Map(); for (const script of document.querySelectorAll('script[src]')) { const entry = asset(script.src); if (entry && initialScripts.size < 30) initialScripts.set(entry.url, script); } let initialLoadFinished = document.readyState === 'complete'; let registeredRuntime = null, observedPush = null; const publicReader = () => /^\/(?:visuals\/[^/]+(?:\/embed|\/videos\/[^/]+)?|live\/(?:[^/]+|file\/[^/]+))\/?$/.test(location.pathname); function asset(value) { try { const url = new URL(value, location.href); if (url.hash || url.username || url.password) return null; // Only exact retry URLs issued by this document can alias another host. // Keep registration witnesses and the two-attempt budget on the original. const original = issued.get(url.href); if (original) return original; if (url.search) return null; const rawSegments = String(value).split(/[?#]/)[0].split('/'); if (rawSegments.some(segment => { const decoded = decodeURIComponent(segment); return decoded === '.' || decoded === '..' || /[%\\]/.test(decoded) || decoded.includes('/'); })) return null; const local = url.origin === location.origin && /^\/_next\/static\/chunks\/.+\.js$/.test(url.pathname); const published = url.origin === 'https://storage.googleapis.com' && /^\/moose-reports-images\/hub-assets\/[a-f0-9]{40}\/_next\/static\/chunks\/.+\.js$/.test(url.pathname); return local || published ? { url: url.href, path: url.pathname.slice(0, 700), origin: local ? 'same-origin' : 'gcs' } : null; } catch { return null; } } document.addEventListener('securitypolicyviolation', event => { const entry = asset(event.blockedURI); if (entry && policies.size < 20) policies.set(entry.url, String(event.effectiveDirective || '').replace(/[^a-z-]/g, '').slice(0, 60)); }); function claim(message) { for (const record of records.values()) { if ((message.includes(record.asset.url) || (retried.has(record.asset.url) && message.includes(retried.get(record.asset.url)))) && record.route === location.pathname && record.diagnostic) { if (record.reported) return false; record.reported = true; return record.diagnostic; } } return undefined; } function report(record) { if (record.reported) return; record.reported = true; const recovered = record.diagnostic.outcome === 'recovered'; try { void fetch('/api/internal/log-error', { method: 'POST', headers: { 'content-type': 'application/json' }, keepalive: true, body: JSON.stringify({ message: `ChunkLoadError ${recovered ? 'recovered after one retry' : 'could not recover'}: ${record.asset.url}`, source: 'resource', feature: 'public-reader-chunk', severity: recovered ? 'warning' : 'error', url: location.origin + record.route, chunkDiagnostics: record.diagnostic }) }).catch(() => {}); } catch { /* Reporting must never change the loader result. */ } } async function diagnose(record, event) { const started = Date.now(); const diagnostic = { version: 1, assetPath: record.asset.path, assetOrigin: record.asset.origin, firstEvent: event.type === 'timeout' ? 'timeout' : event.type === 'missing-registration' ? 'missing-registration' : 'error', attempts: 1, outcome: 'failed', online: navigator.onLine !== false, visibility: document.visibilityState === 'visible' ? 'visible' : 'hidden', retryOrigin: null, probeStatus: null, probeError: null, probeContentType: 'unavailable', probeMs: 0, cspDirective: policies.get(record.asset.url) || null, elapsedMs: 0, timing: null }; try { const timing = performance.getEntriesByName(record.asset.url).filter(entry => entry.entryType === 'resource').at(-1); if (timing) diagnostic.timing = { durationMs: Math.min(300000, Math.max(0, Math.round(timing.duration))), transferBytes: Math.min(20000000, Math.max(0, timing.transferSize || 0)) }; } catch { /* Cross-origin timing can be unavailable or privacy limited. */ } if (diagnostic.online && !diagnostic.cspDirective) { const controller = new AbortController(), timer = setTimeout(() => controller.abort(), 2500); try { // Separate diagnostic HEAD: never claim this was the original HTTP result. const response = await fetch(record.asset.url, { method: 'HEAD', credentials: 'omit', cache: 'no-store', redirect: 'error', signal: controller.signal }); diagnostic.probeStatus = response.status; diagnostic.probeContentType = /javascript|ecmascript/i.test(response.headers.get('content-type') || '') ? 'javascript' : 'other'; } catch { diagnostic.probeError = controller.signal.aborted ? 'timeout' : 'network'; } finally { clearTimeout(timer); } } diagnostic.probeMs = Math.min(10000, Math.max(0, Date.now() - started)); diagnostic.cspDirective = policies.get(record.asset.url) || diagnostic.cspDirective; return diagnostic; } function observeRegistration() { const queue = window.webpackChunk_N_E = window.webpackChunk_N_E || []; if (queue.push === observedPush) return; const previous = queue.push; observedPush = function (...args) { const result = previous.apply(this, args); const current = publicReader() && asset(document.currentScript?.src); const ids = args[0]?.[0]; if (current && Array.isArray(ids) && ids.length && ids.length <= 50 && witnesses.size < 20) { witnesses.set(current.url, ids.filter(id => typeof id === 'number' || typeof id === 'string')); } return result; }; queue.push = observedPush; } function parserRegistered(record) { if (!registeredRuntime) return false; // The runtime itself has no JSONP push. Its recovery witness is execution // of this source-owned runtime hook, after Webpack's registration machinery. if (/\/webpack-[a-f0-9]+\.js$/.test(record.asset.path)) return true; const ids = witnesses.get(record.asset.url); return Boolean(ids?.length && ids.every(id => registeredRuntime(id))); } function finish(record, event) { if (!record.pending) return; record.pending = false; record.terminalEvent = event; clearTimeout(record.timer); record.retryScript?.remove(); if (record.diagnostic) { record.diagnostic.elapsedMs = Math.min(300000, Math.max(0, Date.now() - record.started)); record.diagnostic.cspDirective = policies.get(record.asset.url) || record.diagnostic.cspDirective; record.diagnostic.outcome = event?.type === 'load' && record.success() ? 'recovered' : 'failed'; if (record.parser && record.route === location.pathname && publicReader() && record.diagnostic.outcome === 'failed') document.documentElement.setAttribute('data-hub-script-failed', '1'); // Let an existing boundary retain its original stack before fallback reporting. setTimeout(() => report(record), record.diagnostic.outcome === 'failed' ? 1000 : 0); } else records.delete(record.asset.url); for (const callback of record.callbacks) callback(event); } function recover(record, event, retry, diagnosticEvent = event) { void diagnose(record, diagnosticEvent || {}).then(diagnostic => { record.diagnostic = diagnostic; const rateLimited = diagnostic.probeStatus === 429; const permanent = !rateLimited && diagnostic.probeStatus !== null && (diagnostic.probeStatus < 200 || diagnostic.probeStatus >= 400); const invalidType = diagnostic.probeStatus !== null && diagnostic.probeStatus >= 200 && diagnostic.probeStatus < 300 && diagnostic.probeContentType !== 'javascript'; if (record.route !== location.pathname || !publicReader() || !diagnostic.online || diagnostic.cspDirective || permanent || invalidType || retried.has(record.asset.url)) return finish(record, event); // WebKit can retain a failed preload even with no-store and immediately // reject a same-URL script without another network request. A fresh URL // fetches the same immutable file; the shared budget still permits only // one retry. Keep this marker out of diagnostics and registration keys. let retryUrl = new URL(record.asset.url); if (record.asset.origin === 'gcs' && (rateLimited || diagnostic.probeError === 'network' || diagnostic.probeError === 'timeout')) { // The Hub already serves this exact immutable, hashed static path. If // that build is no longer present it must fail, never select a newer file. const path = retryUrl.pathname.match(/\/_next\/static\/chunks\/(.+\.js)$/)?.[1]; if (path && path.split('/').every(segment => /^[a-zA-Z0-9_.@()[\]-]+$/.test(decodeURIComponent(segment)))) { retryUrl = new URL('/_next/static/chunks/' + path, location.origin); } } retryUrl.searchParams.set('hub_chunk_retry', Date.now().toString(36) + '-' + retried.size); retried.set(record.asset.url, retryUrl.href); issued.set(retryUrl.href, record.asset); diagnostic.retryOrigin = retryUrl.origin === location.origin ? 'same-origin' : 'gcs'; diagnostic.attempts = 2; try { retry(retryUrl.href); } catch { finish(record, event); } }).catch(() => finish(record, event)); } function settleMissedInitialFailure(record) { const script = initialScripts.get(record.asset.url); if (!initialLoadFinished || !record.pending || record.diagnostic || !script || record.success() || typeof script.onerror !== 'function') return; // All initial async scripts have finished by window.load. An unregistered // required chunk is a proven failure, even if its original error was missed. // Invoke Webpack's existing completion handler so it clears its timer and // in-progress entry before the shared bounded recovery path starts. script.onerror({ type: 'missing-registration', target: script }); } window.addEventListener('load', () => { initialLoadFinished = true; for (const record of records.values()) if (!record.parser) settleMissedInitialFailure(record); }, { once: true }); function wrap(load, registered) { registeredRuntime = registered; // Webpack replaces the pre-runtime queue push during its own initialization. observeRegistration(); for (const callback of readyCallbacks.splice(0)) callback(); return function (url, done, key, chunkId) { const target = asset(url); if (!publicReader() || !target) return load(url, done, key, chunkId); const previous = records.get(target.url); if (previous?.pending) { previous.callbacks.push(done); return; } // React can request the same initial chunk after its parser recovery has // already failed. Share that terminal result instead of starting a third // download or replacing the original two-attempt diagnostic receipt. if (previous?.diagnostic?.outcome === 'failed') { done(previous.terminalEvent); return; } if (records.size >= 20) return load(url, done, key, chunkId); const record = { asset: target, route: location.pathname, started: Date.now(), pending: true, callbacks: [done], reported: false, diagnostic: null, success: () => registered(chunkId) }; records.set(target.url, record); const result = load(url, event => { if (event?.type === 'load' && record.success()) return finish(record, event); // Preserve Webpack's original loader timeout, nonce, crossOrigin and cleanup. // A downloaded script need not have registered the requested chunk. // Diagnose that gap while retaining the original native load event for // Webpack's own "missing" failure if the bounded recovery cannot help. recover(record, event, retryUrl => load(retryUrl, event => finish(record, event), key, chunkId), event?.type === 'load' ? { type: 'missing-registration' } : event); }, key, chunkId); settleMissedInitialFailure(record); return result; }; } document.addEventListener('error', event => { const script = event.target; if (!publicReader() || script?.tagName !== 'SCRIPT') return; const target = asset(script.src); // Managed Webpack failures are handled by their existing completion callback. if (!target || records.has(target.url) || records.size >= 20) return; const parent = script.parentNode || document.head; const record = { asset: target, route: location.pathname, started: Date.now(), pending: true, callbacks: [], reported: false, diagnostic: null, parser: true }; record.success = () => parserRegistered(record); record.callbacks.push(() => { // Settle existing target listeners only after registration has been checked. // The detached original does not re-enter this document capture handler. if (typeof script.dispatchEvent === 'function') script.dispatchEvent(new Event(record.diagnostic?.outcome === 'recovered' ? 'load' : 'error')); }); records.set(target.url, record); event.stopImmediatePropagation?.(); // A dead parser-inserted tag must not trap a later Webpack loader waiting on // an error event that has already fired. Its waiters join the same one retry. script.remove(); recover(record, event, retryUrl => { // cloneNode can copy a script's already-started flag. Create a fresh // element while preserving nonce, integrity, type and loading attributes. const next = document.createElement('script'); for (const attribute of Array.from(script.attributes || [])) next.setAttribute(attribute.name, attribute.value); next.src = retryUrl; next.async = script.async; next.nonce = script.nonce; record.retryScript = next; next.onload = event => { if (!registeredRuntime && readyCallbacks.length < 20) readyCallbacks.push(() => finish(record, event)); else finish(record, event); }; next.onerror = event => finish(record, event); // Same 120-second script deadline as the existing Webpack loader. No reload. record.timer = setTimeout(() => finish(record, { type: 'timeout', target: next }), 120000); parent.appendChild(next); }); }, true); document.addEventListener('click', event => { if (publicReader() && event.target?.id === 'hub-script-retry') location.reload(); }, true); window.__hubPublicChunks = { wrap, claim, pending: value => { const entry = asset(value); return Boolean(entry && records.get(entry.url)?.pending); } }; observeRegistration(); return window.__hubPublicChunks; })();

Loading the Hub

The page layout could not load

Part of the page could not load

24th Annual Light a Moose