第二章：Terminal 報錯不要慌：如何精準複製錯誤訊息給 AI 讓他一秒認錯

很多人在遇到程式噴紅字的時候，第一反應是「崩潰」，第二反應是「把整個螢幕截圖丟給 AI」。但這其實是非常低效的做法。本章將教你如何像個資深工程師一樣，看懂錯誤訊息，並精準地餵給 AI。

為什麼不要只丟截圖？

雖然現在的 AI（如 GPT-4o, Claude 3.5 Sonnet）視力很好，可以看懂截圖，但截圖有幾個致命缺點：

字數限制：截圖往往只能拍到最後幾行錯誤，真正的「根源（Root Cause）」可能在上面被卡掉了。
無法搜尋：AI 無法直接從截圖中複製特定的變數名稱或檔案路徑，這會增加它猜錯的機率。
缺少堆疊追蹤（Stack Trace）：最關鍵的行號資訊往往在截圖的邊緣。

看懂 Terminal 報錯的三大核心

每次看到 Terminal 噴出一大串紅字，不要害怕，它們其實非常有規律。你只需要尋找三個關鍵字：

1. Error Type（錯誤類型）

通常在最上面或最下面，例如：

TypeError: 型別錯誤（例如試圖讀取 undefined 的屬性）。
ReferenceError: 參考錯誤（變數沒定義就使用）。
SyntaxError: 語法錯誤（少打括號或分號）。
ModuleNotFoundError: 找不到套件（忘記 npm install）。

2. File Path & Line Number（檔案路徑與行號）

這非常重要！錯誤訊息一定會告訴你是哪個檔案的第幾行出錯。例如：at Object.<anonymous> (/src/components/Header.tsx:42:15) 這代表錯誤發生在 Header.tsx 的第 42 行。

3. The Message（錯誤具體訊息）

通常緊接在 Error Type 後面。例如：Cannot read properties of undefined (reading 'map')

實戰：如何精準複製給 AI？

遇到錯誤時，請停止恐慌，按照以下步驟操作：

步驟一：滑動到錯誤的最開頭

很多時候，你看到的最後一行只是一堆連鎖反應的結果。往上滾動 Terminal，找到第一行噴出 Error: 的地方。

步驟二：複製完整的 Stack Trace

把從錯誤發生，到最後一行的堆疊資訊「完整複製」下來。

步驟三：加上下文 Prompt

單純丟錯誤訊息給 AI 常常會得到瞎猜的答案。最完美的 Prompt 應該長這樣：

[我剛剛做了什麼] 我剛剛在 src/app/page.tsx 裡面引入了 Supabase 的 vt_profiles 資料，想要用 map 渲染出列表。

[出現的錯誤訊息]
TypeError: Cannot read properties of undefined (reading 'map')
    at Page (src/app/page.tsx:25:20)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
[相關的程式碼 (src/app/page.tsx)]
export default function Page() {
  const { data: profiles } = useSupabaseProfiles();
  return (
    <div>
      {profiles.map(p => <div key={p.id}>{p.name}</div>)}
    </div>
  )
}
請問為什麼會出現這個錯誤？我該如何加上保護機制？

AI 一秒認錯並修復

當你提供這樣精準的 Context 時，AI 會立刻告訴你：「啊！因為 profiles 在資料還沒載入完成時是 undefined，所以你不能直接呼叫 .map()。你需要加上可選串連（Optional Chaining） profiles?.map(...) 或者是加上 Loading 狀態檢查。」

常見的新手地雷

以為 Warning 是 Error：黃色的 Warning 不會讓程式崩潰，紅色的 Error 才會。不要把 Warning 丟給 AI 叫它「修復網頁白屏」，這會誤導它。
只給報錯不給程式碼：AI 不是通靈王，如果你不貼上對應的程式碼，它只能給你「教科書式」的模糊建議。
環境變數沒抓到：如果你看到 NEXT_PUBLIC_API_KEY is undefined，通常是因為你忘了重啟開發伺服器（npm run dev），AI 再怎麼改程式碼都沒用。這時候重啟才是解藥！

學會看懂並精準投餵 Terminal 錯誤訊息，是你從 Vibe Coding 新手邁向高手的必經之路！