Blazor Error Boundary中获取当前异常并处理的解决方案咨询

核心思路 #

无需直接访问CurrentException这个受保护属性，利用Error Boundary的生命周期钩子即可捕获异常，同时实现状态恢复逻辑。

具体实现步骤 #

1. 自定义Error Boundary组件 #

继承React.Component实现自己的Error Boundary，重写两个关键钩子：componentDidCatch（捕获异常并上报日志）和getDerivedStateFromError（更新状态触发降级UI），同时添加状态恢复方法。

示例代码：

class CustomErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
    this.resetErrorState = this.resetErrorState.bind(this);
  }

  static getDerivedStateFromError(error) {
    // 更新状态，触发降级UI渲染
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 捕获异常，直接发送到日志记录器
    console.error("Error captured:", error, errorInfo);
    // 替换为实际日志上报逻辑，比如调用后端接口
    // logToRemoteService(error.message, errorInfo.componentStack);
  }

  resetErrorState() {
    // 恢复应用先前状态
    this.setState({ hasError: false });
  }

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h3>应用出现异常</h3>
          <button onClick={this.resetErrorState}>恢复应用</button>
        </div>
      );
    }

    return this.props.children;
  }
}

2. 用自定义Error Boundary包裹目标组件 #

将可能抛出异常的业务组件用这个Error Boundary包裹：

function App() {
  return (
    <CustomErrorBoundary>
      {/* 你的业务组件 */}
      <BusinessComponent />
    </CustomErrorBoundary>
  );
}

3. 关键说明 #

• componentDidCatch会在子组件抛出异常后自动触发，参数error就是捕获到的异常对象，errorInfo包含异常栈信息，完全满足日志收集需求。
• getDerivedStateFromError用于更新组件状态，配合resetErrorState方法可以快速恢复应用到异常前的状态。
• 全程无需触碰受保护的CurrentException，React已通过生命周期钩子把异常主动传递给我们。

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