第三方聊天、推薦或統計腳本載入失敗，不應讓整篇文章只剩轉圈圈。訪客來讀內容，至少要能看到正文、用普通連結前往下一頁，並知道附加功能現在能不能用。
先分清哪些功能是核心，哪些只是加強。網站需要登入或付款才能完成的動作，不能用假成功提示替代；但文章閱讀、聯絡方法與基本導覽，通常可以先保留在原始HTML裡。
先看停用附加腳本後，還剩什麼
挑一個自有測試頁，記下訪客最常做的動作，例如閱讀教學、打開分類或找到聯絡方法。只阻擋準備檢查的附加腳本，再重新整理。若正文消失，或普通連結也必須等那支腳本建立，核心入口就過度依賴它。
本文的文章頁案例，正文與連結先在HTML裡，附加導覽再透過一個獨立腳本啟用。阻擋該腳本後，文章仍在、原生details仍能展開、普通連結仍能移到說明；側邊只改成「暫時無法使用」與替代入口。
這是可操作的文章頁範例，不是第三方產品後台。正式網站要按自己的工具和主題檢查，不能因範例保留了連結，就推成所有付款、搜尋或會員功能都有替代路徑。
把基本內容先寫在HTML
連結要有真正的href，不要只留一個onclick。按鈕用於展開或觸發動作；前往另一頁的入口則使用連結。即使附加程式沒有執行，訪客仍能辨識下一步。
<article>
<h2>網站導覽說明</h2>
<p>先整理主要分類與聯絡入口。</p>
<a href="/guides/navigation/">閱讀完整說明</a>
</article>
<aside>
<p id="extra-status" role="status">
附加服務載入中，可先使用文章連結。
</p>
<div id="extra-widget"></div>
</aside>範例網址要換成自己存在的頁面。不要先用CSS把所有正文隱藏，等第三方成功才移除class；這樣即使HTML已經有內容，腳本失敗仍會把文章藏住。先讓正文可讀，再逐步增加附加互動。
載入失敗與執行失敗，要各有出口
外部script資源載不回來，可以由error事件處理；載回來後初始化函式拋錯，則需要對初始化另做處理。兩者不是同一件事。script的load事件發生，不能單憑它就顯示整個服務已正常運作。
const status = document.querySelector('#extra-status');
const script = document.createElement('script');
const showFallback = () => {
status.textContent = '附加服務暫時無法使用，請用文章連結。';
};
script.src = '/assets/optional-widget.js';
script.onload = () => {
try {
if (!window.OptionalWidget) throw new Error('missing widget');
window.OptionalWidget.mount(document.querySelector('#extra-widget'));
status.textContent = '附加服務已就緒。';
} catch (error) {
showFallback();
}
};
script.onerror = showFallback;
document.head.append(script);這段用示例物件說明邊界，並非所有工具都叫OptionalWidget。使用真實服務時，依它的正式初始化方法和錯誤回傳調整。若初始化本身是非同步，還要處理它的Promise拒絕；同步try/catch不會自動接住稍後才發生的非同步錯誤。
回饋區寫的是附加服務狀態，不要擋住整篇文章，也不要讓每次重試都彈出全頁視窗。失敗原因留在維護紀錄；訪客需要知道的是目前可用入口與下一步，不必看到一串程式堆疊。
defer與async不是失敗備援
調整script載入方式可以影響解析與執行時機，但不會自動建立替代內容。即使加了defer，腳本404、被阻擋或初始化失敗，原本依賴它的功能仍可能不能用。
async也不保證依你寫在HTML裡的順序執行。若兩支腳本有依賴關係，先查工具要求的載入順序與初始化入口；不要只為了看起來比較快，就把每個script都加async。
這篇範例只用一個可選的資源，沒有處理跨來源驗證、登入或付款。若服務有完整性或安全政策要求，照既有規則核對，不要為了讓它載入而停用正式安全限制。
替代入口也要真的能用
聊天服務失敗時，若提供聯絡頁，那一頁就必須存在，且內容能說清楚其他聯絡方法。推薦功能失敗時，可以保留分類或文章列表；不能放一個看起來能點、卻只會再呼叫同一支失效腳本的按鈕。
只處理可替代的任務。涉及帳號權限、付款或資料寫入時，讓失敗保持失敗，保留可恢復資訊並提供正確支援入口。不要用前端回饋偽裝已付款、已送信或已提交資料。
等待很久也要能先做別的事。可讓服務區說明仍在等待，同時保持正文可用；超時策略則按實際工具安排。移除script元素或停止畫面轉圈，不一定能取消已經開始的下載與執行，別把它當成通用取消機制。
修正後，分開試三種情況
先試正常載入，確認加強功能仍能初始化；再阻擋那一支資源，確認fallback文字與連結；最後讓初始化拋錯，確認載入成功但功能失敗時也有出口。不要只把整個瀏覽器的JavaScript關掉，就當作已測過單一資源失敗。
檢查過程只用自有測試資源，不需要干擾真正的第三方服務。保留頁面HTML、資源URL、阻擋條件與看到的結果，交給維護者時才能指明是哪一段依賴。
用Tab走過基本連結和替代入口，也試連結目的地。修改只限自己的附加區塊，保留原始設定；若核心功能被影響，先回復這次改動，再重新畫出依賴關係。
統計腳本失敗與文章不能讀，是不同結果。頁面仍可用，不代表統計已收到事件；服務區顯示就緒，也不代表收件、搜尋或其他後端功能已完成。按具體任務核對，才知道備援真正保住了什麼。
評論0