React.js中錯誤邊界如何捕獲錯誤

在React.js中，錯誤邊界（Error Boundaries）是一種特殊的組件，它可以捕獲并處理其子組件樹中的JavaScript錯誤。錯誤邊界可以捕獲在其生命周期方法或構造函數中拋出的錯誤，以及在渲染過程中發生的錯誤。但是，它們不能捕獲以下類型的錯誤：

1. 事件處理器中的錯誤
2. 異步代碼（例如setTimeout或requestAnimationFrame回調）中的錯誤
3. 服務端渲染中的錯誤
4. 錯誤邊界自身的錯誤

要在React應用中使用錯誤邊界，你需要創建一個實現了以下兩個生命周期方法的類組件：

1. static getDerivedStateFromError(error)：當子組件拋出錯誤時，此靜態方法會被調用。它接收錯誤對象作為參數，并返回一個對象來更新組件的狀態。這個方法的主要目的是記錄錯誤信息，以便稍后顯示。

2. componentDidCatch(error, info)：當子組件拋出錯誤時，此實例方法會被調用。它接收錯誤對象和包含有關錯誤的詳細信息的對象作為參數。這個方法的主要目的是記錄錯誤信息，以便稍后顯示。

下面是一個簡單的錯誤邊界組件示例：

import React, { Component } from 'react';

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

  static getDerivedStateFromError(error) {
    // 更新狀態以觸發回退UI的渲染
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 在這里記錄錯誤信息
    console.error('Error caught by ErrorBoundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 可以自定義回退UI
      return <h1>Something went wrong. Please try again later.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

要使用錯誤邊界，只需將其包裹在需要捕獲錯誤的組件樹之外：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <ErrorBoundary>
        <MyComponent />
      </ErrorBoundary>
    </div>
  );
}

export default App;

這樣，當MyComponent或其子組件發生錯誤時，錯誤邊界將捕獲并處理這些錯誤。