使用react-error-boundary捕获错误

发布于：2025年12月07日

#ErrorBoundary

使用 react-error-boundary 捕获错误，避免整个应用白屏

tsx
import { useEffect } from 'react'
import { ErrorBoundary, type FallbackProps } from 'react-error-boundary'
 
function ExampleApplication() {
  return (
    <>
      {/* expect an error */}
      <input type="date" value={new Date('xxxx').toISOString()} />
    </>
  )
}
 
function ErrorFallback(fallbackProps: FallbackProps) {
  useEffect(() => {
    console.log('错误上报', fallbackProps.error)
  }, [fallbackProps.error])
 
  return (
    <>
      <div style={{ border: '1px solid #000' }}>
        <div>Something went wrong</div>
        <div style={{ color: 'red' }}>{fallbackProps.error?.message}</div>
      </div>
    </>
  )
}
 
function App() {
  return (
    <>
      <div>Hello World</div>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <ExampleApplication />
      </ErrorBoundary>
    </>
  )
}
 
export default App

#异步错误捕获

异步错误不会被捕获，需要通过 showBoundary 主动打开错误边界组件

tsx
function ExampleApplication() {
  const { showBoundary } = useErrorBoundary()
 
  function throwError() {
    new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error('TEST_ERROR'))
      }, 1000)
    }).catch(error => {
      showBoundary(error)
    })
  }
 
  return (
    <>
      {/* expect an error */}
      <input type="date" defaultValue={new Date().toISOString()} />
 
      <button onClick={() => throwError()}>throw async error</button>
    </>
  )
}

#错误边界重置

ErrorBoundary 提供了一个 resetErrorBoundary 方法，可以重置错误的组件

tsx
function ErrorFallback(fallbackProps: FallbackProps) {
  useEffect(() => {
    console.log('错误上报', fallbackProps.error)
  }, [fallbackProps.error])
 
  return (
    <>
      <div style={{ border: '1px solid #000' }}>
        <div>Something went wrong</div>
        <div style={{ color: 'red' }}>{fallbackProps.error?.message}</div>
        <button onClick={() => fallbackProps.resetErrorBoundary()}>reset</button>
      </div>
    </>
  )
}

#状态保存

把重要状态放在 ErrorBoundary 外层，组件重置后重要的变量还在

tsx
function Page() {
  const [count, setCount] = useState(0)
 
  return (
    <ErrorBoundary FallbackComponent={Fallback}>
      <BuggyComponent count={count} setCount={setCount} />
    </ErrorBoundary>
  )
}