react-error-boundary捕获错误后React应用仍崩溃的问题

问题根源 #

你将ErrorFallback组件和myErrorHandler函数封装在类实例中导出，这种写法不符合React组件的使用规范，会导致错误边界无法正确维护状态，甚至回退组件的事件绑定失效，最终引发应用崩溃无法交互。另外，未配置onReset回调会让“Try again”按钮缺少必要的状态重置逻辑，影响重置功能的完整性。

修复步骤 #

1. 重构ErrorHandling.js，移除类封装 #

将错误处理函数和回退组件改为独立导出，避免类实例带来的上下文问题：

// ErrorHandling.js
export const myErrorHandler = (error, info) => {
  console.log(`Error: ${error}. Info:`)
  console.log(info)
}

export const ErrorFallback = ({ error, resetErrorBoundary }) => {
  return (
    <>
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </>
  )
}

2. 修改TestView，正确配置ErrorBoundary #

// TestView.js
import { Fragment } from 'react'
import { Row, Col } from 'reactstrap'
import BuggyComponent from '../componentes/auxiliares/BuggyComponent'
import { ErrorBoundary } from 'react-error-boundary'
import { ErrorFallback, myErrorHandler } from '../componentes/auxiliares/ErrorHandling'

const TestView = () => {
  // 重置逻辑：若BuggyComponent依赖外部状态，在此重置
  const handleReset = () => {
    // 示例：setSomeState(initialValue)
  }

  return (
    <Fragment>
      <Row className='match-height'>
        <Col sm='12'>
          <ErrorBoundary 
            FallbackComponent={ErrorFallback} 
            onError={myErrorHandler}
            onReset={handleReset}
          >
            <BuggyComponent />
          </ErrorBoundary>
        </Col>
      </Row>
    </Fragment>
  )
}
export default TestView

3. （可选）调整BuggyComponent用于测试重置功能 #

如果希望点击“Try again”后能正常渲染，修改组件让它仅在特定条件下抛出错误：

// BuggyComponent.js
import { Card, CardBody } from 'reactstrap'
import { useState, useEffect } from 'react'

const BuggyComponent = () => {
  const [shouldThrowError, setShouldThrowError] = useState(true)

  useEffect(() => {
    if (shouldThrowError) {
      throw new Error('This is an error')
    }
  }, [shouldThrowError])

  return (
    <Card className='text-center'>
      <CardBody>
        <p>This should show after reset</p>
        <button onClick={() => setShouldThrowError(true)}>Trigger error again</button>
      </CardBody>
    </Card>
  )
}
export default BuggyComponent

修复原理 #

• React组件需要稳定的函数引用，类实例封装会破坏这种稳定性，导致错误边界无法正确处理组件生命周期和状态。
• 独立导出的组件和函数能确保React正确识别和处理，保证错误边界的捕获、回退渲染和重置功能正常运行。

内容的提问来源于stack exchange，提问作者Haniver