點擊展開

', '', String.fromCharCode(96, 96, 96) + 'json', errsJson, String.fromCharCode(96, 96, 96), '', '

', ]; var body = bodyLines.join(String.fromCharCode(10)); var title = '[K840 ' + (isFatal ? 'fatal' : 'warning') + '] ' + (errs[0] ? formatErr(errs[0]).slice(0, 60) : 'unknown'); var url = location.origin + '/trpc/feedback.submitPublic'; // K840: 用正規 hash(只 a-zA-Z0-9_-)包進 clientHash,zod server 端 regex 對齊 var safeHash = String(clientHash || '').replace(/[^a-zA-Z0-9_-]/g, '').slice(0, 64); fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ json: { type: 'BUG', title: title, body: body, currentUrl: location.href, userAgent: navigator.userAgent, clientHash: safeHash || undefined, } }), }).then(function(res) { return res.json().then(function(data) { return { ok: res.ok, status: res.status, data: data }; }); }) .then(function(r) { if (r.ok && r.data && r.data.result && r.data.result.data && r.data.result.data.json) { var issue = r.data.result.data.json; try { onSuccess && onSuccess(issue); } catch (_) {} } else { var errMsg = (r.data && r.data.error && r.data.error.json && r.data.error.json.message) || ('送出失敗 HTTP ' + r.status); try { onError && onError(errMsg); } catch (_) {} } }) .catch(function(err) { try { onError && onError('網路錯誤: ' + (err && err.message ? err.message : 'unknown')); } catch (_) {} }); } // K840: 自動送出 — 只在 severity === 'fatal' 觸發 // cooldown 24h per hash,sessionStorage 落盤防 reload 重送 function __k216MaybeAutoSend() { if (!isFatal) return false; var topErr = errs[0]; if (!topErr || !topErr.hash) return false; var hash = topErr.hash; var key = '__k840_autoSent_' + hash; try { var sent = sessionStorage.getItem(key); if (sent) { var last = parseInt(sent, 10) || 0; if (Date.now() - last < window.__k840AUTO_COOLDOWN_MS) return true; // 已送過,跳過實際 fetch } } catch (_) {} // 寫一個 pending state 防止同 page 多個 fatal 觸發重複 fetch if (window.__k840InFlight && window.__k840InFlight[hash]) return true; window.__k840InFlight = window.__k840InFlight || {}; window.__k840InFlight[hash] = true; __k216SendIssue(hash, function(issue) { // onSuccess: 顯示「✓ 已自動送出 #N」+ 5s slide-out try { sessionStorage.setItem(key, String(Date.now())); } catch (_) {} window.__k216AutoSent[hash] = { ts: Date.now(), issueNumber: issue.issueNumber, issueUrl: issue.issueUrl }; var banner = document.getElementById('__k216_banner'); if (!banner) return; var titleEl = banner.querySelector('strong'); if (titleEl) { titleEl.style.color = '#2b8a3e'; titleEl.textContent = '✓ 已自動回報 Issue #' + issue.issueNumber; } var bodyWrap = banner.querySelector('div'); if (bodyWrap) { var link = document.createElement('a'); link.href = issue.issueUrl; link.target = '_blank'; link.rel = 'noopener'; link.style.cssText = 'display:inline-block;margin-top:6px;padding:4px 8px;background:#d3f9d8;color:#2b8a3e;border-radius:4px;text-decoration:none;font-size:11px'; link.textContent = '→ 查看 Issue #' + issue.issueNumber; // 加在錯訊息後、按鈕前 var btns = banner.querySelector('#__k216_report_issue_banner'); if (btns && btns.parentNode) btns.parentNode.insertBefore(link, btns.parentNode); } // 隱藏手動按鈕區(自動成功不再需一鍵送) var manualWrap = banner.querySelector('#__k216_report_issue_banner'); if (manualWrap) manualWrap.style.display = 'none'; // 5s slide-out setTimeout(function() { if (!banner || !banner.parentNode) return; banner.style.transition = 'transform .5s ease, opacity .5s ease'; banner.style.transform = 'translateY(20px)'; banner.style.opacity = '0'; setTimeout(function() { if (banner && banner.parentNode) banner.remove(); }, 600); }, 5000); }, function(errMsg) { // onError: 不隱藏 banner,降級顯示「一鍵送出」按鈕(等同 K839) // K840-3: rate limit 訊息特別處理 try { delete window.__k840InFlight[hash]; } catch (_) {} var status = document.getElementById('__k216_report_status'); if (status) { status.style.display = 'block'; status.style.color = '#c92a2a'; status.textContent = '⚠️ 自動送出失敗: ' + errMsg + ' (請手動按送出)'; } } ); return true; } // K840: 立即檢查是否要 auto-send (fatal 才觸發) var autoSending = __k216MaybeAutoSend(); var html = '

' + '

' + '' + (autoSending ? '⏳ 自動送出中…' : (isFatal ? '⚠️ 頁面可能跑版' : '🟡 偵測到 ')) + (isFatal && !autoSending ? countLabel + ' 個早期錯誤' : (autoSending ? '' : (countLabel + ' 個非致命警告'))) + '' + '

' + (errs[0].msg || '').slice(0, 120) + '

' // K839: 「一鍵送出 Issue」按鈕 — fatal 預設隱藏(auto 失敗時 K840 onError 重新顯示) + '

' + '' + '' + '

' + '' + '

'; document.body.insertAdjacentHTML('beforeend', html); // K839: bind 事件 — 關閉 + 一鍵送出 Issue var closeX = document.getElementById('__k216_close_x'); if (closeX) closeX.onclick = function() { var b = document.getElementById('__k216_banner'); if (b) b.remove(); }; var dismissBtn = document.getElementById('__k216_dismiss_banner'); if (dismissBtn) dismissBtn.onclick = function() { var b = document.getElementById('__k216_banner'); if (b) b.remove(); }; var reportBtn = document.getElementById('__k216_report_issue_banner'); if (reportBtn) reportBtn.onclick = function() { reportBtn.disabled = true; var status = document.getElementById('__k216_report_status'); var topErr = errs[0] || {}; var sentKey = '__k216_issueSent_' + (topErr.hash || 'nohash'); try { if (sessionStorage.getItem(sentKey)) { status.style.display = 'block'; status.style.color = '#2b8a3e'; status.textContent = '✓ 已送過,30 分鐘內不重複 (降低 spam)'; reportBtn.textContent = '✓ 已送出'; return; } } catch (_) {} reportBtn.textContent = '送出中…'; status.style.display = 'block'; status.style.color = '#666'; status.textContent = '建立 GitHub Issue 中…'; __k216SendIssue(topErr.hash || '', function(issue) { try { sessionStorage.setItem(sentKey, String(Date.now())); } catch (_) {} status.style.color = '#2b8a3e'; reportBtn.textContent = '✓ 已送出 #' + issue.issueNumber; status.textContent = ''; var link = document.createElement('a'); link.href = issue.issueUrl; link.target = '_blank'; link.rel = 'noopener'; link.style.cssText = 'display:inline-block;margin-top:6px;padding:4px 8px;background:#d3f9d8;color:#2b8a3e;border-radius:4px;text-decoration:none;font-size:11px'; link.textContent = '→ 查看 Issue #' + issue.issueNumber; status.appendChild(link); try { window.open(issue.issueUrl, '_blank', 'noopener'); } catch (_) {} }, function(errMsg) { status.style.color = '#c92a2a'; status.textContent = errMsg; reportBtn.disabled = false; reportBtn.textContent = '🐛 一鍵送出 Issue'; } ); }; return; } if (tries < 50) setTimeout(tryShow, 100); else { // React 沒接管, 完全接管 __k216_root 顯示錯誤 + 自動修復 var root = document.getElementById('__k216_root'); if (!root) return; var errsJson = JSON.stringify(errs, null, 2).slice(0, 2000); var errsList = errs.slice(0,3).map(function(e) { return '

' + (e.msg || '').slice(0, 200) + (e.src ? '

' + e.src + ':' + e.line + ':' + e.col + '

' : '') + '

'; }).join(''); var refreshBtn = ''; root.innerHTML = '

' + '

⚠️

頁面載入失敗

' + '

JavaScript 在頁面初始化時發生錯誤, 應用程式無法啟動。這通常是 Service Worker 或快取損壞造成。

' + '

錯誤訊息 (前 3 個):' + '

' + errsList + '

' + '

' + refreshBtn // K-D2 v2 commit 8: 中間按鈕改為「回報工程團隊」, 自動建 GitHub issue // (K216 SOP 失敗頁 SW/cache 損壞場景, user 可能還沒登入, 用 publicProcedure) + '' + '前往登入頁' + '

' + '

技術細節

' + errsJson + '

' + '

'; // 自動修復按鈕 handler — 清空所有 SW + cache + localStorage + reload var btn = document.getElementById('__k216_auto_refresh'); if (btn) btn.onclick = function() { btn.disabled = true; btn.textContent = '清除中…'; try { localStorage.clear(); sessionStorage.clear(); } catch(_){} var p = Promise.resolve(); if ('serviceWorker' in navigator) { p = navigator.serviceWorker.getRegistrations().then(function(regs) { return Promise.all(regs.map(function(r){ return r.unregister(); })); }); } p = p.then(function() { if ('caches' in self) { return caches.keys().then(function(names) { return Promise.all(names.map(function(n){ return caches.delete(n); })); }); } return Promise.resolve(); }); p.then(function() { btn.textContent = '✓ 已清空, 重新載入中…'; setTimeout(function() { location.reload(true); }, 800); }); }; // K-D2 v2 commit 8: 「回報工程團隊」按鈕 handler // 收集早期錯誤 → 用 fetch 直接打 tRPC feedback.submitPublic (匿名, publicProcedure) // 不用 React trpcCall, 因為此時 React 沒接管 (K216 SOP 失敗頁) // 顯示結果在原按鈕下方 (loading → success/error) var reportBtn = document.getElementById('__k216_report_issue'); if (reportBtn) reportBtn.onclick = function() { reportBtn.disabled = true; var oldText = reportBtn.textContent; reportBtn.textContent = '送出中…'; // 組 issue body: 早期錯誤 (前 3 個) + 環境資訊 // K-XX EDU-145 補: formatErr 將 string/Error 物件轉成有意義字串 (button 觸發階段) // 86be06c 已在 error listener 階段修 __serializeErr (ErrorEvent) // 這裡加 button click 階段的多層 fallback, 涵蓋 String/Error/plain 物件 // K1103-B4: 第二次 formatErr 定義已提升到第一個 var __k216_formatErr var formatErr = __k216_formatErr; var errSummary = errs.slice(0, 3).map(function(e, i) { var src = e.src ? ' (' + e.src + ':' + e.line + ':' + e.col + ')' : ''; return (i+1) + '. ' + formatErr(e) + src; }).join(String.fromCharCode(10)); var bodyLines = [ '## 頁面載入失敗 (K216 SOP 自動回報)', '', '使用者於「頁面載入失敗」畫面點擊「回報工程團隊」自動送出。', '', '### 早期錯誤 (前 3 個)', '', // markdown code fence 用 chr(96) 拼, 避免跟外層 template literal 衝突 String.fromCharCode(96, 96, 96), errSummary, String.fromCharCode(96, 96, 96), '', '### 完整錯誤 JSON', '', '

點擊展開 (前 2000 字)

', '', String.fromCharCode(96, 96, 96) + 'json', errsJson, String.fromCharCode(96, 96, 96), '', '

', ]; // K548: 用 String.fromCharCode(10) 取代 escape n — 避免 RSC flight 拆 chunk // 把 string literal 內的 escape 拆到下一個 chunk 造成單引號 string // 跨行 SyntaxError (Invalid or unexpected token) 在所有 page 都觸發 var body = bodyLines.join(String.fromCharCode(10)); var title = '頁面載入失敗: ' + (errs[0] ? formatErr(errs[0]).slice(0, 80) : 'unknown error'); // tRPC fetch (POST /trpc/feedback.submitPublic) // 走 Next.js rewrite /trpc/* → 127.0.0.1:4000/trpc/* (跟 React trpcCall 一致) // superjson 不需要 (input 都是純字串) var url = location.origin + '/trpc/feedback.submitPublic'; fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ json: { type: 'BUG', title: title, body: body, currentUrl: location.href, userAgent: navigator.userAgent } }), }).then(function(res) { return res.json().then(function(data) { return { ok: res.ok, status: res.status, data: data }; }); }) .then(function(r) { if (r.ok && r.data && r.data.result && r.data.result.data && r.data.result.data.json) { var issue = r.data.result.data.json; reportBtn.style.background = '#d3f9d8'; reportBtn.style.borderColor = '#40c057'; reportBtn.style.color = '#2b8a3e'; reportBtn.textContent = '✓ 已建立 Issue #' + issue.issueNumber; // 開新 tab 顯示 issue try { window.open(issue.issueUrl, '_blank', 'noopener'); } catch(_){} // 同時在按鈕下方加連結 (mobile 不能 window.open) var link = document.createElement('a'); link.href = issue.issueUrl; link.target = '_blank'; link.rel = 'noopener'; link.style.cssText = 'display:block;margin-top:8px;padding:8px 12px;background:#d3f9d8;color:#2b8a3e;border-radius:6px;text-decoration:none;font-size:13px;text-align:center;font-weight:600'; link.textContent = '→ 查看 Issue #' + issue.issueNumber; reportBtn.parentNode.insertBefore(link, reportBtn.nextSibling); } else { var errMsg = (r.data && r.data.error && r.data.error.json && r.data.error.json.message) || ('送出失敗 HTTP ' + r.status); reportBtn.style.background = '#ffe3e3'; reportBtn.style.borderColor = '#fa5252'; reportBtn.style.color = '#c92a2a'; reportBtn.textContent = '送出失敗: ' + errMsg; // 3 秒後讓 user 重試 setTimeout(function() { reportBtn.disabled = false; reportBtn.textContent = oldText; reportBtn.style.cssText = ''; }, 3000); } }) .catch(function(err) { reportBtn.style.background = '#ffe3e3'; reportBtn.style.borderColor = '#fa5252'; reportBtn.style.color = '#c92a2a'; reportBtn.textContent = '網路錯誤: ' + (err && err.message ? err.message : 'unknown'); setTimeout(function() { reportBtn.disabled = false; reportBtn.textContent = oldText; reportBtn.style.cssText = ''; }, 3000); }); }; } } setTimeout(tryShow, 500); }; // 立即跑一次 (處理同步錯誤已收集完的情況) setTimeout(window.__k216ShowErrors, 100); })();