React之錯誤邊界 Error Boundaries示例詳解

更新時間：2022年10月24日 14:44:42 作者：三年沒洗澡

這篇文章主要為大家介紹了React之錯誤邊界Error Boundaries示例教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

過去，組件內的代碼異常會導致 React 的內部狀態(tài)被破壞，產生可能無法追蹤的錯誤。但 React 并沒有提供一種優(yōu)雅處理這些錯誤的方式，也無法從錯誤中恢復。

默認情況下，若一個組件在渲染期間（render）發(fā)生錯誤，會導致整個組件樹全部被卸載，這當然不是我們期望的結果。

部分組件的錯誤不應該導致整個應用崩潰。為了解決這個問題，React 16 引入了一個新的概念 —— 錯誤邊界

錯誤邊界是一種 React 組件，這種組件可以捕獲發(fā)生在其子組件樹任何位置的異常，并打印這些錯誤，同時展示降級 UI，而并不會渲染那些發(fā)生崩潰的子組件樹。

注意

錯誤邊界目前只在 Class Component 中實現了，沒有在 hooks 中實現（因為Error Boundaries的實現借助了this.setState可以傳遞callback的特性，useState無法傳入回調，所以無法完全對標）;
錯誤邊界 無法捕獲 以下四種場景中產生的錯誤：
- 事件處理函數（因為 Error Boundaries 實現的本質是觸發(fā)更新，但是事件處理函數不在render或者commit階段，所以無法進行捕獲，如果你需要在事件處理器內部捕獲錯誤，可以使用原生的 try / catch 語句了解更多）
- 異步代碼（例如 setTimeout 或 requestAnimationFrame 回調函數）
- 服務端渲染（因為觸發(fā)更新只能在客戶端進行，不能在serve端進行）
- 它自身拋出來的錯誤（因為錯誤拋出要向父節(jié)點冒泡尋找 Error Boundaries 處理，無法處理自身產生的錯誤）

實現

React中提供了兩個與錯誤處理相關的api：

getderivedstatefromerror：靜態(tài)方法，當錯誤發(fā)生后，提供一個機會渲染 Fallback UI
componentDidCatch：組件實例方法，當錯誤發(fā)生后，提供一個機會記錄錯誤信息

如果一個 class 組件中定義了 getDerivedStateFromError() 或 componentDidCatch() 這兩個生命周期方法中的任意一個（或兩個）時，那么它就變成一個錯誤邊界。當拋出錯誤后，請使用 getDerivedStateFromError() 渲染備用 UI ，使用 componentDidCatch() 打印錯誤信息。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }
  getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能夠顯示降級后的 UI
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    // 你同樣可以將錯誤日志上報給服務器
    logErrorToService(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // 你可以自定義降級后的 UI 并渲染
      return <h1>wrong message</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

然后你可以將它作為一個常規(guī)組件去使用：

<ErrorBoundary>
  <A />
  <B />
  <C />
</ErrorBoundary>

錯誤邊界的工作方式類似于原生的 catch {}，不同的地方在于，錯誤邊界只針對 React 組件。并且只有 class 組件才可以成為錯誤邊界組件。大多數情況下, 你只需要聲明一次錯誤邊界組件, 并在整個應用中使用它。

錯誤邊界應該放置在哪？

錯誤邊界的粒度由你來決定，可以將其包裝在最頂層的路由組件中，并為用戶展示一個 “xxx” 的錯誤信息，就像服務端框架經常處理崩潰一樣。也可以將單獨的組件包裝在錯誤邊界，從而保護其它組件不會崩潰。（例如，Facebook Messenger 將側邊欄、信息面板、聊天記錄以及信息輸入框包裝在單獨的錯誤邊界中。如果其中的某些 UI 組件崩潰，其余部分仍然能夠交互。）