react如何监控代码错误
使用 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 编写测试用例，捕获逻辑错误：
test('should handle error state', () => {
jest.spyOn(console, 'error').mockImplementation(() => {});
render(<BuggyComponent />);
expect(screen.getByText(/error message/i)).toBeInTheDocument();
});
