当前位置：首页 > React

react如何监控代码错误

2026-03-11 06:45:43React

使用 Error Boundaries 捕获组件错误

React 16 引入了 Error Boundaries 概念，专门用于捕获子组件树中的 JavaScript 错误。通过定义一个类组件并实现 componentDidCatch 方法，可以将错误限制在当前组件范围内，避免整个应用崩溃。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });
    // 将错误信息发送到监控服务
    logErrorToService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      return <FallbackUI />;
    }
    return this.props.children;
  }
}

// 使用方式
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

全局错误监听

对于非组件代码错误（如事件处理器、异步代码），可以通过 window.onerror 或 window.addEventListener('error') 进行全局捕获。这种方式可以捕获未被 Error Boundaries 处理的运行时错误。

window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  // 发送错误到监控平台
  trackError(event.error);
});

未捕获 Promise 异常处理

异步代码中的未捕获异常需要通过 unhandledrejection 事件监听：

window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
  // 处理 Promise 错误
  handleAsyncError(event.reason);
});

开发环境集成 React 开发者工具

在开发阶段，React Developer Tools 可以检测潜在问题。结合 Chrome DevTools 的 "Pause on exceptions" 功能，能快速定位错误源。

生产环境错误上报

集成第三方错误监控服务（如 Sentry、Bugsnag）可自动收集错误堆栈、用户操作路径等信息。这些服务通常提供 React 专用 SDK：

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'YOUR_DSN',
  integrations: [new Sentry.BrowserTracing()],
});

// 包裹根组件
<Sentry.ErrorBoundary fallback={Fallback}>
  <App />
</Sentry.ErrorBoundary>

TypeScript 静态类型检查

使用 TypeScript 可以在编译阶段发现类型错误，减少运行时错误。配置 tsconfig.json 开启严格模式：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true
  }
}

ESLint 代码质量检测

配置 React 专用的 ESLint 规则集（如 eslint-plugin-react）可捕获常见代码模式问题：

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:react/recommended'
  ],
  rules: {
    'react/prop-types': 'error'
  }
};

单元测试与集成测试

使用 Jest + React Testing Library 编写测试用例，捕获逻辑错误：

react如何监控代码错误

test('should handle error state', () => {
  jest.spyOn(console, 'error').mockImplementation(() => {});
  render(<BuggyComponent />);
  expect(screen.getByText(/error message/i)).toBeInTheDocument();
});