快捷導(dǎo)航

React之錯(cuò)誤邊界 Error Boundaries示例詳解

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

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

引言

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

默認(rèn)情況下，若一個(gè)組件在渲染期間（render）發(fā)生錯(cuò)誤，會(huì)導(dǎo)致整個(gè)組件樹全部被卸載，這當(dāng)然不是我們期望的結(jié)果。

部分組件的錯(cuò)誤不應(yīng)該導(dǎo)致整個(gè)應(yīng)用崩潰。為了解決這個(gè)問題，React 16 引入了一個(gè)新的概念 —— 錯(cuò)誤邊界

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

注意

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

實(shí)現(xiàn)

React中提供了兩個(gè)與錯(cuò)誤處理相關(guān)的api：

getderivedstatefromerror：靜態(tài)方法，當(dāng)錯(cuò)誤發(fā)生后，提供一個(gè)機(jī)會(huì)渲染 Fallback UI
componentDidCatch：組件實(shí)例方法，當(dāng)錯(cuò)誤發(fā)生后，提供一個(gè)機(jī)會(huì)記錄錯(cuò)誤信息

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

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

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

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

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

錯(cuò)誤邊界應(yīng)該放置在哪？

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

未捕獲錯(cuò)誤（Uncaught Errors）該如何處理？

自 React 16 起，任何未被錯(cuò)誤邊界捕獲的錯(cuò)誤將會(huì)導(dǎo)致整個(gè) React 組件樹被卸載。

在某些場景下，把一個(gè)錯(cuò)誤的 UI 留在那，比完全移除它要更糟糕。比如在類似 Messenger 的產(chǎn)品中，把一個(gè)異常的 UI 展示給用戶，可能會(huì)導(dǎo)致用戶把錯(cuò)誤信息發(fā)給別人。同樣，對于支付類場景而言，與其顯示錯(cuò)誤的支付金額，不如直接讓頁面白屏。

（所以，錯(cuò)誤邊界的使用難點(diǎn)在于尋找合適的時(shí)機(jī)，知道在什么時(shí)候該用，什么時(shí)候不該用，這是一個(gè)充滿哲學(xué)的問題）