---

前言

在 React 中，ErrorBoundary（錯誤邊界）用于捕獲子組件在 渲染期間、生命周期方法中 或 構造函數中 發生的錯誤，防止整個應用崩潰。

React 目前官方只支持使用 類組件 實現 ErrorBoundary，但你也可以使用 第三方庫 或自定義 Hook 來用函數組件實現類似功能。

---

? 一、使用類組件實現 ErrorBoundary（官方推薦方式）

import React from 'react'type Props = {fallback: React.ReactNodechildren: React.ReactNode
}type State = {hasError: boolean
}class ErrorBoundary extends React.Component<Props, State> {state: State = { hasError: false }static getDerivedStateFromError(_: Error): State {return { hasError: true }}componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {console.error('Error caught by ErrorBoundary:', error, errorInfo)}render() {if (this.state.hasError) {return this.props.fallback}return this.props.children}
}export default ErrorBoundary

用法示例：

<ErrorBoundary fallback={<h2>Something went wrong.</h2>}><MyComponent />
</ErrorBoundary>

---

? 二、用函數組件實現 ErrorBoundary（借助 Hook + react-error-boundary 庫）

React 本身不支持函數組件方式的 Error Boundary（因為沒有生命周期 componentDidCatch），但我們可以借助 第三方庫。

1. 安裝 react-error-boundary

npm install react-error-boundary

2. 使用 ErrorBoundary 組件（函數方式）

import { ErrorBoundary } from 'react-error-boundary'function ErrorFallback({ error }: { error: Error }) {return (<div role="alert"><p>Something went wrong:</p><pre>{error.message}</pre></div>)
}function App() {return (<ErrorBoundary FallbackComponent={ErrorFallback}><DangerousComponent /></ErrorBoundary>)
}

---

? 三、手寫 Hook 模擬捕獲運行時異常（局限性較大）

只能用于捕獲異步或事件中的異常，不能替代 ErrorBoundary 對渲染錯誤的捕獲能力：

function useSafeExecute(callback: () => void) {try {callback()} catch (e) {console.error('Caught error in hook:', e)}
}

---

? 總結對比

方法	支持渲染錯誤	類型	是否推薦
類組件 ErrorBoundary	?	官方支持	? 推薦
函數組件 + react-error-boundary	?	第三方支持	? 推薦
自己寫 hook try/catch 包裝	?	非正式	?? 僅限邏輯錯誤

---