案例：讀不到資料時，畫面一直停在「載入中」

原本的問題

TrueNodes 首頁新增了「近期公開討論」區，會讀取最新三篇公開貼文。讀取前先顯示「載入中…」，讀到之後換成貼文；讀取出錯時，換成「暫時無法載入討論」並提供動態牆連結。

但這段程式要等資料服務先完成初始化才會開始讀取。如果資料服務的程式庫本身就沒載入（例如被網路環境或瀏覽器擴充功能擋住），初始化完成的訊號永遠不會出現，讀取永遠不會開始，畫面就一直停在「載入中…」。原本寫好的錯誤訊息完全沒有機會顯示。

我們怎麼發現

1. 不只測正常情況：用自動化的真實瀏覽器打開首頁，在手機、平板、桌機寬度各檢查一次，同時記錄主控台錯誤與畫面文字。

2. 測試環境剛好擋住了資料服務：程式庫無法下載。所有寬度的結果都一樣：近期討論區停在「載入中…」，等多久都沒變。

3. 追原因：錯誤處理只包住「讀取資料」這一步，沒有包住「等待開始讀取」這一步。

修改前後

• 修改前：只在收到初始化完成訊號後才讀取；訊號沒來，畫面永遠是「載入中…」。
• 修改後：設定兩個上限。等待開始讀取超過 10 秒，或已經送出讀取但 8 秒內沒有回應，都改顯示「暫時無法載入討論，請直接進入社群動態」，並保留前往動態牆的連結；讀取之後真的回來，結果仍會蓋過這段訊息。

可以核對的結果

• 修改後在同樣擋住資料服務的情況下重測：手機（360、375 寬）、平板、桌機與 200% 縮放共 5 種寬度，10 秒後都顯示了替代訊息，沒有一個停在「載入中」。
• 另外用模擬資料各測一次三種情況：有貼文、沒有貼文、讀取被拒絕，三種都顯示對應的文字；貼文標題裡的 HTML 會被當成純文字顯示，不會被執行。
• 你可以自己重現：在桌機瀏覽器打開開發者工具，用「封鎖要求網址」（Request blocking）擋下 www.gstatic.com，重新整理 TrueNodes 首頁，觀察近期討論區 10 秒後的變化。

如果你的網站也有「載入中」

1. 列出所有等待狀態：把頁面上每一個「載入中」「處理中」「請稍候」找出來，各自寫下它在等什麼。

2. 問三個問題：等到資料會怎樣？等到錯誤會怎樣？如果什麼都沒等到呢？第三種最常被忘記。

3. 故意製造失敗：用開發者工具擋掉外部程式庫或 API、把網路調成很慢，或直接離線，再看畫面。

4. 讓失敗狀態有下一步：替代訊息不要只寫「發生錯誤」，要告訴使用者可以去哪裡、做什麼。

5. 記錄你選的時間上限：寫下為什麼是這個秒數，之後網路環境或資料量改變時才知道要不要調整。

限制與還沒做的事

• 模擬資料只能證明畫面處理正確，不能證明正式環境的資料讀取一定成功；正式環境要在部署後另外核對。
• 10 秒是我們選的上限，網路很慢的訪客可能在資料其實快到的時候先看到替代訊息。
• 這次只修了首頁這個區塊，網站上其他等待初始化的地方需要各自檢查。

可以帶走的做法：每一個「載入中」都要問一句：如果它永遠不結束，使用者會看到什麼？測試時故意擋掉外部程式庫，是最便宜的找法。