![[Vibe Coder #5] 如何閱讀錯誤訊息，以及 AI 修不好錯誤、反覆打轉時的脫身方法 封面圖](/assets/images/posts/7130fab4-6bf4-482f-baa3-e0f1e30625a6/error-message-confession-1.jpg)
當紅色錯誤訊息佔滿畫面時，心裡會猛然一沉。英文密密麻麻，滿是第一次見到的單字，看起來也沒告訴你到底做錯了什麼。因此，許多 vibe coder 不讀錯誤訊息就直接關掉，對 AI 說：「不能用，幫我修好。」接著 AI 開始修改不相干的地方。
陷阱就在這裡：錯誤訊息其實是犯人留下的自白書。發生了什麼事、在哪裡發生，裡面早已寫得一清二楚。只要掌握閱讀方法，就等於解決了一半；原封不動交給 AI，剩下的一半也會更快完成。本集將介紹如何閱讀錯誤訊息、如何正確傳給 AI，以及 AI 修不好同一個錯誤而反覆打轉時的脫身方法。
錯誤訊息的結構：只要找出三件事
任何錯誤的結構都一樣。只要找出三個部分即可。
- 發生了什麼事（錯誤名稱與說明）：通常位於第一行。例如
TypeError: Cannot read properties of undefined。直譯就是「試圖從空的東西中取出某個值」。就像包裹還沒送到，卻想打開箱子一樣。 - 在哪裡發生（檔案與行號）：如果看到
app/page.tsx:42這類標記，表示app/page.tsx檔案的第 42 行。這就是犯案現場。 - 透過什麼路徑發生（堆疊追蹤）：下方依序列出的清單，是直到事件發生前的呼叫路徑。不必害怕，只要知道最上面的幾行是最接近現場的紀錄即可。
不需要全部理解。只要掌握「發生了什麼事＋在哪裡」，你就已經比不讀錯誤的人有利十倍。
錯誤會出現於兩個地方
第 1 集的區分在這裡再次出現。錯誤會顯示在兩個地方，而要查看哪裡取決於症狀。
- 瀏覽器主控台（前端的哀號）：畫面全白、按鈕沒有反應，或畫面部分顯示異常時。請在瀏覽器按 F12（或按右鍵 → 檢查），查看 Console 分頁。
- 伺服器紀錄（後端的哀號）：儲存、登入、付款或 AI 呼叫失敗時。開發期間會顯示在執行開發程式的終端機視窗；部署後則會顯示在第 4 集介紹的部署服務儀表板之 Logs 選單。
畫面可能只顯示「發生問題」，但伺服器紀錄中往往寫著真正的原因。不要只看畫面就說「沒有錯誤訊息」，請養成兩邊都打開查看的習慣。
傳給 AI 的方法：完整內容加上情境
找到錯誤後，請這樣傳給 AI。
- **完整複製。**後半段通常藏著線索，因此不要只截取第一行。複製文字會比截圖更好。
- **一併寫上情境。**說明是在做什麼時發生的，例如「按下註冊按鈕後」，以及原本預期的行為，例如「應該要前往歡迎頁面」。
- **寫明在哪裡找到的。**是在「瀏覽器主控台」還是「伺服器紀錄」中？只要這一句，就能讓 AI 搜尋的範圍縮小一半。
糟糕的提問和好的提問，差距就有這麼大。「無法儲存，幫我修好」等於讓 AI 沒有地圖地搜尋。「按下儲存按鈕後畫面沒有變，但伺服器紀錄出現這個錯誤：（貼上完整錯誤）。原本應該要在清單中看到新文章」則是把犯案現場和自白書一起交給 AI。
AI 反覆打轉時：4 種脫身方法
如果 AI 連續三、四次都修不好同一個錯誤，這時候與其增加嘗試次數，不如改變局面，速度會更快。
**1. 開啟新的對話。**在累積了失敗嘗試的對話中，AI 會持續受到自己建立的錯誤假設牽引。開啟新對話，只重新清楚傳達目前的症狀和錯誤，意外地常能一次解決。
**2. 回復後重新小步嘗試。**第 3 集的存檔點會在這裡發揮作用。如果修改覆蓋修改，讓程式碼變得東拼西湊，就回到最後一次提交，讓 AI 把剛才失敗的修改拆成更小的單位，一次做一個。
**3. 先讓它調查原因。**不要說「幫我修好」，改說「先不要修，請找出這個錯誤的 3 個可能原因，並告訴我各自要如何確認」。叫 AI 修理時，它會急著修改；叫它調查時，反而會意外地冷靜。先縮小原因範圍再修正，命中率會大幅提升。
**4. 搜尋錯誤原文。**把錯誤訊息的第一行原樣貼到搜尋欄。全世界很可能已有人遇過並解決這個問題。把搜尋結果連結交給 AI，再要求「確認這個解法是否適合我的情況」，這種組合也非常有效。
總結
- 錯誤訊息就是自白書。只要找出「發生了什麼事（第一行）＋在哪裡（檔案:行號）」，就解決了一半。
- 錯誤會出現在兩個地方：瀏覽器主控台（畫面問題）和伺服器紀錄（儲存、登入、付款問題）。兩邊都打開看看。
- 傳給 AI 時，將錯誤全文＋發生前正在做什麼＋在哪裡找到的，三項一起提供。
- AI 反覆打轉時，不要增加嘗試次數，改變局面：開新對話、回復後拆小、先調查、搜尋原文。
下一集將介紹一個看似神秘的經典問題：「昨天還能用，今天卻不行了。」即使沒有動過程式碼，為什麼會突然失效？我們會依序檢視可能的犯人。