Error Boundary
錯誤邊界
01你是不是遇到這個 / THE SYMPTOM
我的 React 網頁只要有一個小元件出錯（比如某筆資料是 null 害它爆掉），整個頁面就變一片白屏、什麼都不見了。我想讓出錯的那一塊改顯示「這裡載入失敗」之類的提示，其他正常部分繼續顯示，不要整頁掛掉。
↑ 如果你點頭了，你要的關鍵字就是 Error Boundary。
02這是什麼 / DEFINITION
React 的一種元件機制：用一個特殊元件包住子樹，當子樹在渲染時丟出錯誤，它會「攔截」住、改顯示備援畫面（fallback UI），而不是讓整個 App 崩潰白屏。
03什麼時候用 / WHEN TO USE
想把渲染期的崩潰隔離在局部、避免整頁白屏時；想在某區塊出錯時顯示友善提示或重試按鈕、並把錯誤回報到監控時。常包在路由、儀表板小工具、第三方元件外層。
04怎麼跟 AI 說 / HOW TO ASK
直接複製這句、貼進 Claude Code / Cursor / Copilot / ChatGPT：
幫我加一個 React error boundary 包住這個元件，出錯時顯示一個 fallback 畫面（含重試按鈕），不要讓整頁白屏，並把錯誤 log 出來。
05常見坑 / WATCH OUT
⚠ error boundary 只攔「渲染期」的錯誤；事件處理函式（onClick 裡）、非同步 await、setTimeout 裡的錯誤它抓不到，那些要用 try/catch。實務上多直接用 react-error-boundary 套件，比自己手寫 class 元件方便。
06相關的詞 / RELATED