如何處理React中的錯誤

使用錯誤邊界處理React中錯誤的最佳實踐

當使用一個組件時,如果該組件代碼內部發生任何錯誤,React將卸載整個React組件樹,渲染沒有。這是處理崩潰的React方法。

您不希望錯誤顯示給您的用戶。 React決定顯示一個空白頁。

但是,這只是默認設置。顯示空白頁僅比向用戶顯示神秘消息更好,但是您應該有更好的方法。

如果您處於開發模式,則任何錯誤都將觸發詳細的堆棧跟踪信息,打印到瀏覽器DevTools安慰。但是,當然,在生產環境中,您並不是真正想要將錯誤輸出給用戶的地方。

在生產中,您應該攔截錯誤,並向使用該應用的人員顯示某種有用的信息。

這是哪裡錯誤邊界參加進來。

通過錯誤邊界,您可以隔離應用程序的各個部分並在本地處理錯誤。

錯誤邊界是一個React組件,它實現了componentDidCatch()生命週期事件,並包裝其他組件:

class ErrorHandler extends React.Component {
  constructor(props) {
    super(props)
    this.state = { errorOccurred: false }
  }

componentDidCatch(error, info) { this.setState({ errorOccurred: true }) logErrorToMyService(error, info) }

render() { return this.state.errorOccurred ? <h1>Something went wrong!</h1> : this.props.children } }

在組件JSX中,您可以像這樣使用它:

<ErrorHandler>
  <SomeOtherComponent />
</ErrorHandler>

內部發生錯誤時SomeOtherComponent或其他子組件,以及它們所擁有的整個組件子樹中,ErrorHandler將要攔截它,並且您可以優雅地處理該錯誤。

在上述情況下,受React官方文檔的啟發,我們有一個errorOccurred狀態屬性,當設置為true時,將使接口呈現錯誤處理UI,否則將呈現常規應用程序UI樹。

裡面componentDidCatch(),它接收2個描述錯誤的參數,我們也將其稱為logErrorToMyService()這只是使用Sentry,Roller,Airbrake或其他服務的某些功能的存根,可以很好地記錄錯誤,以供您查看,因此您不必依賴用戶告訴您存在錯誤注意一個問題。

免費下載我的反應手冊


更多反應教程: