React 高階應用 -- 錯誤邊界 Error Boundaries

garynan發表於2019-03-31
ReactError

GitHub 學習 Demo。

部分 UI 的異常不應該破壞了整個應用。為了解決 React 使用者的這一問題，React 16 引入了一種稱為 “錯誤邊界” 的新概念。

錯誤邊界的作用在於捕獲其子元件樹 JavaScript 異常，記錄錯誤並展示替補的自定義 React 元件。

錯誤邊界元件的實現

讓一個類元件變成一個錯誤邊界，只需實現生命週期方法 static getDerivedStateFromError()或者componentDidCatch()中的任意一個或兩個。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  /**
   * 當捕捉到錯誤時，使得在更新檢視之前有機會更新 state
   * @param error 具體的 JavaScript 異常
   **
  static getDerivedStateFromError(error) {
    // 當捕捉到錯誤的時候，返回跟新 this.state
    return { hasError: true };
  }

  /**
   * 錯誤被捕捉完成。
   * @param error 具體的 JavaScript 異常
   * @param info 一個記錄著錯誤資訊是從哪個元件裡丟擲來的物件。裡面包含一些關鍵的資訊。
   **
  componentDidCatch(error, info) {
    // 可以在這裡記錄元件的錯誤資訊
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // 當錯誤發生時 顯示這部分內容
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

# 而後你可以像一個普通的元件一樣使用：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
複製程式碼

錯誤邊界無法捕獲如下錯誤:

  • 事件處理
  • 非同步程式碼 （例如 setTimeout 或 requestAnimationFrame 回撥函式）
  • 服務端渲染
  • 錯誤邊界自身丟擲來的錯誤 （而不是其子元件）

錯誤邊界的最小單位是元件

這裡的錯誤邊界內的內容不會別替換。錯誤會冒泡至黎其最近的父元件。

<header>
  <h2>Header</h2>
  <ErrorBoundary>
  <nav>
    { a[0].asd.dawd }
    <a>Home</a>
    <a>Part1</a>
    <a>Part2</a>
    <a>Part3</a>
  </nav>
  </ErrorBoundary>
  <hr/>
</header>
複製程式碼

相關文章