該文章翻譯自官網(wǎng) https://reactjs.org/docs/error-boundaries.html 該文章包含以下內(nèi)容：

1.Error Boundaries介紹

2.ComponentDidCatch 函數(shù)的參數(shù)

3.觸發(fā)error boundaries后程序要走向哪里？

4.對于不能捕獲的錯(cuò)誤的新處理方式

5.在堆中跟蹤component

6.try/catch 如何?

7.Event Handlers怎么樣？

8.React 15后的函數(shù)命名改變

在過去，React組件中的js錯(cuò)誤通常會(huì)污染React的內(nèi)部state并且造成它發(fā)出一個(gè)讓人難以理解的錯(cuò)誤給下一個(gè)Render，我們在控制臺看到的異常往往是由更內(nèi)層的程序代碼引起的，但是React并沒有提供一個(gè)方式讓我們在組件中優(yōu)雅的解決他們并恢復(fù)業(yè)務(wù)邏輯。

Error Boundaries介紹

UI的某部分引起的JS錯(cuò)誤不應(yīng)該破壞整個(gè)程序，為了幫React的使用者解決這個(gè)問題，React 16介紹了一種關(guān)于錯(cuò)誤邊界（error boundary)的新觀念。

error boundaries 讓react組件可以捕獲在他們子級組件樹任何地方的錯(cuò)誤,并且打印出這些錯(cuò)誤和演示一個(gè)預(yù)備UI（fallback UI），從而替換那些出現(xiàn)異常的組件樹。Error boundaries在rendering，lifeCyclemethod或處于他們樹層級之下的構(gòu)造函數(shù)中捕獲錯(cuò)誤。

（注釋：lifecycle method是react固有名詞，包括componentWillUpdate，componentWillReceiveProps,render等方法，這些方法會(huì)自動(dòng)調(diào)用）

注意： error boundaries并不會(huì)捕捉這些錯(cuò)誤：

1.事件處理器

2.異步代碼

3.服務(wù)端的渲染代碼

4.在error boundaries區(qū)域內(nèi)的錯(cuò)誤

在這個(gè)lifecycle method： componentDIdCatch(error,info) 里的類會(huì)變成一個(gè) error boundary

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }
 
  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

然后你就可以像一個(gè)普通組件一樣使用它

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

componentDidCatch()方法像JS的catch{}模塊一樣工作，但是對于組件，只有class類型的組件(class component)可以成為一個(gè)error boundaries，在實(shí)際上，大多數(shù)情況下你可能只需要在整個(gè)程序中定義一個(gè)error boundary組件，然后你就可以一直使用它了！

請注意error boundaries僅僅可以捕獲到在他們樹的層級下面的錯(cuò)誤，而不能捕獲到本層級的錯(cuò)誤，如果一個(gè)error boundaries渲染錯(cuò)誤信息失敗了，那么這個(gè)錯(cuò)誤將會(huì)傳播到一個(gè)在它層級上面，并且離它最近的error boundary 。這就像js的{}模塊的工作機(jī)制一樣。

ComponentDidCatch 參數(shù)

• error: 這是一個(gè)已經(jīng)被拋出的錯(cuò)誤
• info:這是一個(gè)componentStack key。這個(gè)屬性有關(guān)于拋出錯(cuò)誤的組件堆的信息

componentDidCatch(error, info) {
  
  /* Example stack information:
     in ComponentThatThrows (created by App)
     in ErrorBoundary (created by App)
     in div (created by App)
     in App
  */
  logComponentStackToMyService(info.componentStack);

觸發(fā)error boundaries后程序要走向哪里？

關(guān)于error boundaries的后續(xù)處理由你做主，你可能會(huì)指定一個(gè)最高等級的路由組件去給用戶標(biāo)識某些地方出了問題，就像服務(wù)端的框架處理異常一樣，你也可以指定一個(gè)在錯(cuò)誤邊界內(nèi)的個(gè)人的小頁面讓整個(gè)程序不至于發(fā)生崩潰。

對于不能捕獲的錯(cuò)誤的新處理方式

這種變化有一個(gè)重要的新含義，對于React 16，沒有被任何error boundary捕獲的錯(cuò)誤將會(huì)導(dǎo)致整個(gè)React組件樹的崩潰。

我們對這個(gè)決定有爭論，但是在我們的經(jīng)驗(yàn)里，留下一個(gè)崩潰的UI界面比完全移除它要糟糕，例如，在一個(gè)產(chǎn)品比如聊天器中，留下一個(gè)崩壞的UI界面可能會(huì)導(dǎo)致某個(gè)人發(fā)送信息給一個(gè)并非他想要發(fā)送的人。同樣的，對于一個(gè)支付類的app來說，不要顯示任何東西顯然比顯示一個(gè)錯(cuò)誤的金額數(shù)目要好。

這個(gè)改動(dòng)意味著如果你遷移到React 16，你可能會(huì)發(fā)現(xiàn)一些以前沒有注意到的，并且是確確實(shí)實(shí)存在的在你程序中的異常，增加error boundaries會(huì)讓你在某些地方出現(xiàn)問題的時(shí)候可以提供更好的用戶體驗(yàn)。

舉個(gè)例子，facebook的側(cè)邊欄，信息面板，對話記錄以及消息輸入框處于被分割開來的error boundaries中，如果在他們的UI子組件中發(fā)生了崩潰事件，那么其他的組件還可以正常運(yùn)行。

我們同樣鼓勵(lì)你使用JS 錯(cuò)誤報(bào)道服務(wù)（或者你自己建立一個(gè)），然后你就可以了解到這些未被處理的異常是如何發(fā)生的，接著解決他們。

在堆中跟蹤component

React 16 會(huì)把所有render過程中發(fā)生的錯(cuò)誤打印給開發(fā)者，即使程序意外的包含了它。它不僅僅提供了錯(cuò)誤信息和追蹤js堆，也提供了組件的堆路徑，現(xiàn)在你可以精確的看到組件樹中錯(cuò)誤發(fā)生的地方。

你同樣可以在組件的堆追蹤中看到文件名字和行數(shù)，這是creat react app項(xiàng)目的默認(rèn)配置

如果你沒有使用Create React App ，你也可以通過添加這個(gè)插件，手動(dòng)的管理你的babel配置。注意：它必須嚴(yán)格的限制在開發(fā)過程中使用，生產(chǎn)過程一定要剔除。

注意： 在堆的追蹤中看到的組件名字取決于 Function.name屬性。如果你想要支持那些現(xiàn)在還沒有原生提供這些的瀏覽器和設(shè)備，比如ie11，consider including a Function.name polyfill in your bundled application, such as function.name-polyfill. 否則，你必須明確的在你所有的組件中都設(shè)置displayName.

try/catch 如何?

try/catch是非常棒的但是它只在imperative code(命令式代碼）中起作用

try {
  showButton();
} catch (error) {
  // ...
}

然而，react組件是聲明式的并且指定應(yīng)該被渲染的內(nèi)容

<Button />

Error boundaries保留了React的聲明式性質(zhì)，并且擁有你期待的表現(xiàn)。比如，即使通過某個(gè)在樹的深層setState，在componentDidUpdate攔截中發(fā)生了錯(cuò)誤，它也仍然會(huì)被正確的傳送到最近的error boundary。

Event Handlers怎么樣？

error boundaries并不能捕獲event handles中的異常。

React并不需要error boundaries從event handles中恢復(fù)錯(cuò)誤。與render方法和lifecycle攔截不同的是，event Handles并不會(huì)在rendering期間發(fā)生。所以如果他們被拋出，React仍然知道怎么去渲染。

如果你需要捕獲event handler，使用普通的js代碼try/catch 聲明

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }
  
  handleClick = () => {
    try {
      // Do something that could throw
    } catch (error) {
      this.setState({ error });
    }
  }
 
  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <div onClick={this.handleClick}>Click Me</div>
  }
}

注意以上代碼僅僅展示通常的js習(xí)慣，而沒有使用error boundaries。

React 15后的函數(shù)命名改變

React 15通過unstable_handleError方法 包含了一些有限的error boundaries支持。這個(gè)方法現(xiàn)在已經(jīng)不能運(yùn)用，你需要使用compoentDIdCatch。

總結(jié)

到此這篇關(guān)于react進(jìn)階教程之異常處理機(jī)制error Boundaries的文章就介紹到這了,更多相關(guān)react異常處理機(jī)制error Boundaries內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論