React单页应用错误捕获上报：Error Boundary替代方案咨询（CloudWatch RUM）

1. 使用React官方推荐的useErrorBoundary Hook（React 18+） #

React 18推出的useErrorBoundary是类组件Error Boundary的官方替代方案，完全适配函数式组件生态，能捕获组件渲染期间的错误，同时支持错误回调、重置错误状态等功能。结合CloudWatch RUM的上报逻辑示例如下：

import { useErrorBoundary } from 'react-error-boundary';
import { AwsRum } from 'aws-rum-web';

// 全局初始化CloudWatch RUM客户端
const rumClient = new AwsRum({
  appMonitorId: '你的应用监控ID',
  identityPoolId: '你的身份池ID',
  region: '你的AWS区域',
  telemetries: ['errors'],
  sessionSampleRate: 1
});

function ErrorBoundaryWrapper({ children }) {
  const { ErrorBoundary } = useErrorBoundary({
    onError: (error, errorInfo) => {
      // 上报React组件渲染错误到CloudWatch RUM
      rumClient.recordError(error, {
        componentStack: errorInfo.componentStack,
        errorType: 'react-render-error'
      });
    },
  });

  return <ErrorBoundary>{children}</ErrorBoundary>;
}

// 在App中使用包裹组件树
function App() {
  return (
    <ErrorBoundaryWrapper>
      {/* 你的应用组件内容 */}
    </ErrorBoundaryWrapper>
  );
}

2. 全局错误监听（覆盖React边界捕获不到的场景） #

React错误边界（包括useErrorBoundary）只能捕获组件渲染和生命周期中的同步错误，对于异步代码、事件回调、全局脚本错误等场景需要补充全局监听：

// 在应用入口文件添加全局监听逻辑
import { AwsRum } from 'aws-rum-web';

const rumClient = new AwsRum({ /* 初始化配置 */ });

// 捕获全局同步脚本错误
window.onerror = (message, source, lineno, colno, error) => {
  rumClient.recordError(error || new Error(message), {
    source,
    line: lineno,
    column: colno,
    errorType: 'global-sync-error'
  });
  return true;
};

// 捕获未处理的Promise拒绝
window.addEventListener('unhandledrejection', (event) => {
  rumClient.recordError(event.reason, {
    errorType: 'unhandled-promise-rejection'
  });
  event.preventDefault();
});

3. 启用CloudWatch RUM原生自动错误捕获 #

CloudWatch RUM的Web客户端本身支持自动捕获多种前端错误，无需手动编写大量捕获逻辑，开启后可自动捕获：

• React组件渲染错误
• 资源加载错误（如JS/CSS/图片加载失败）
• 网络请求错误（Fetch/XHR失败）
• 全局脚本错误

初始化时开启错误遥测即可：

import { AwsRum } from 'aws-rum-web';

new AwsRum({
  appMonitorId: '你的应用监控ID',
  identityPoolId: '你的身份池ID',
  region: '你的AWS区域',
  telemetries: ['errors', 'performance', 'http'], // 明确开启错误遥测
  sessionSampleRate: 1,
  allowCookies: true
});

方案组合建议 #

将以上三种方案结合使用：

• 用useErrorBoundary处理React组件树内的渲染错误，保留组件级别的错误隔离能力
• 全局监听补全异步和非React上下文的错误
• CloudWatch RUM原生捕获作为兜底，确保不遗漏任何未被手动捕获的错误

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