React 錯誤邊界捕捉Component錯誤 Error Boundaries catch components error

React使用錯誤邊界(Error Boundaries)捕捉Components錯誤範例。

簡介

React對於Components的錯誤可使用「錯誤邊界」來捕捉。錯誤邊界是一個Component並有定義生命週期方法中的static getDerivedStateFromError()或componentDidCatch()。當component在render時其child components發生錯誤時會呼叫這些方法。

注意錯誤邊界僅用來處理Component的錯誤，至於事件處理(Event handler)、非同步程式碼、server side rendering及錯誤邊界Component本身的錯誤無法用錯誤邊界捕捉及處理。

下面把App component中實作static getDerivedStateFromError()及componentDidCatch()成為錯誤邊界。當chile component Hellorender錯誤時會被呼叫並透過更新status.hasError返回自訂的錯誤結果。

App.js

import React from 'react'

import './App.css';

const names = ["John", "Mary"]

const Hello = props => {
  return <h1>Hello, {names[3].toLowerCase()}!</h1> // TypeError: Cannot read property 'toLowerCase' of undefined
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {hasError: false}
  }
  static getDerivedStateFromError(error) {
    return { hasError: true }; // return a value to update state
  }

  componentDidCatch(error, info) {
    console.log(`Cause:${error}\nStacktace:${info.componentStack}`)
  }

  render() {
    if (this.state.hasError) {
      return <h1>Error!!</h1>
    }

    return <Hello/>
  }
}

export default App;

當chile component Hello錯誤發生時顯示如下（在dev模式會被React的錯誤訊息頁面蓋過去，可以按Esc關閉）。

console顯示訊息。

參考github。

• React - 錯誤邊界
• React - React.Component - 錯誤邊界