前言
近年前端技術層出不窮，React 也是程序員間討論最多的 Javascript 框架之一。借這個機會開始學習 React，並把筆記作為 React 基礎教程系列（參考 React 官網）。
因為屬於入門，不太適合對 React 有經驗的同學，但希望到此的同學多少都有所收穫。
概要
官網說明：
部分 UI 的 JavaScript 錯誤不應該導致整個應用崩潰，為了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界。
錯誤邊界也是 React 組件，並且有兩個作用：
- 捕獲子組件中的錯誤
- 當發生問題時，渲染備用 UI
示例
下面示範"錯誤邊界"的用法：
模擬一個組件出現錯誤，強制 throw 拋出 Error 對象：
父組件 Clock 的 JSX 中，引用子組件 Error ：
實現 getDerivedStateFromError 方法，將 error 交給 state 狀態對象：
當 state 更新後，將重新觸發 render 方法，從而執行到 if 邏輯，渲染出降級的 UI 內容：
當然也可以通過 componentDidCatch 方法顯示更多的錯誤信息：
頁面 HTML 效果圖：
父組件 Clock 是個定時器組件，而子組件 Error 指定時間後會拋出錯誤，最後被 Clock 組件接收到，渲染降級 UI。
相關 API
getDerivedStateFromError() 會處理有關 error 信息，然後 return 的結果交給組件的狀態對象 state 。
錯誤信息示意：
componentDidCatch() 具備更多錯誤的信息，就如官方建議，可以把錯誤日誌上報給服務器，以便排查問題。
錯誤信息示意：
總結
以上就是關於 React 錯誤邊界中，getDerivedStateFromError 以及 componentDidCatch 用法示例。
反問 Vue 是否有類似的方法呢？
答案也是有的，你也可以在 Vue 對應的 API 章節中找到：
errorHandler 和 errorCaptured 分別可以在全局範圍和組件內使用，用於異常的捕獲。（我居然一次都沒用過，幸好 React 把這塊概念單獨領了出來，讓我再次溫習了下）
為了更好的閱讀體驗，可以在文章底下的“瞭解更多”中查看原文。
閱讀更多 前端雨爸 的文章
