[[414977]]

本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了大邑縣免費(fèi)建站歡迎大家使用！

一、是什么

錯誤在我們?nèi)粘＞帉懘a是非常常見的

舉個例子，在react項目中去編寫組件內(nèi)JavaScript代碼錯誤會導(dǎo)致 React 的內(nèi)部狀態(tài)被破壞，導(dǎo)致整個應(yīng)用崩潰，這是不應(yīng)該出現(xiàn)的現(xiàn)象

作為一個框架，react也有自身對于錯誤的處理的解決方案

二、如何做

為了解決出現(xiàn)的錯誤導(dǎo)致整個應(yīng)用崩潰的問題，react16引用了「錯誤邊界」新的概念

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

錯誤邊界在渲染期間、生命周期方法和整個組件樹的構(gòu)造函數(shù)中捕獲錯誤

形成錯誤邊界組件的兩個條件：

• 使用了 static getDerivedStateFromError()
• 使用了 componentDidCatch()

拋出錯誤后，請使用 static getDerivedStateFromError() 渲染備用 UI ，使用 componentDidCatch() 打印錯誤信息，如下：

 
 
 
 

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

然后就可以把自身組件的作為錯誤邊界的子組件，如下：

下面這些情況無法捕獲到異常：

• 事件處理
• 異步代碼
• 服務(wù)端渲染
• 自身拋出來的錯誤

在react 16版本之后，會把渲染期間發(fā)生的所有錯誤打印到控制臺

除了錯誤信息和 JavaScript 棧外，React 16 還提供了組件棧追蹤?，F(xiàn)在你可以準(zhǔn)確地查看發(fā)生在組件樹內(nèi)的錯誤信息：

可以看到在錯誤信息下方文字中存在一個組件棧，便于我們追蹤錯誤

對于錯誤邊界無法捕獲的異常，如事件處理過程中發(fā)生問題并不會捕獲到，是因為其不會在渲染期間觸發(fā)，并不會導(dǎo)致渲染時候問題

這種情況可以使用js的try...catch...語法，如下：

 
 
 
 

  
  
  
  
class MyComponent extends React.Component { 
  
  
  
  
  constructor(props) { 
  
  
  
  
    super(props); 
  
  
  
  
    this.state = { error: null }; 
  
  
  
  
    this.handleClick = this.handleClick.bind(this); 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  handleClick() { 
  
  
  
  
    try { 
  
  
  
  
      // 執(zhí)行操作，如有錯誤則會拋出 
  
  
  
  
    } catch (error) { 
  
  
  
  
      this.setState({ error }); 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
 
  
  
  
  
  render() { 
  
  
  
  
    if (this.state.error) { 
  
  
  
  
      return 
Caught an error.
 
  
  
  
  
    } 
  
  
  
  
    return Click Me 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

除此之外還可以通過監(jiān)聽onerror事件

 
 
 
 

  
  
  
  
window.addEventListener('error', function(event) { ... }) 
 
 
 
 

參考文獻(xiàn)

https://zh-hans.reactjs.org/docs/error-boundaries.html

新聞名稱：面試官：說說你在React項目是如何捕獲錯誤的？
標(biāo)題URL：http://www.dlmjj.cn/article/dpdeddo.html