react怎么实现监控
监控实现方法
在React中实现监控通常涉及性能监控、错误追踪和用户行为分析等方面。以下是几种常见的实现方式：
性能监控
使用React Profiler API可以测量组件渲染性能。在需要监控的组件外层包裹Profiler组件，定义onRender回调函数收集数据：
import { Profiler } from 'react';
function onRenderCallback(
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime
) {
console.log({
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime
});
}
<Profiler id="ExampleComponent" onRender={onRenderCallback}>
<ExampleComponent />
</Profiler>错误边界
通过错误边界(Error Boundaries)捕获组件树中的JavaScript错误。创建错误边界组件并实现componentDidCatch方法：
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
logErrorToService(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <FallbackUI />;
}
return this.props.children;
}
}用户行为追踪
利用useEffect钩子监听特定用户交互。在组件中设置事件监听器或直接追踪状态变化：
function TrackedComponent() {
useEffect(() => {
const startTime = performance.now();
return () => {
const duration = performance.now() - startTime;
trackUserBehavior('component_view_time', duration);
};
}, []);
const handleClick = () => {
trackUserBehavior('button_click', { buttonId: 'primary' });
};
return <button onClick={handleClick}>Click</button>;
}第三方集成
集成专业监控工具如Sentry、LogRocket或New Relic可提供更全面的监控方案。通常需要在应用入口文件初始化SDK：
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';
Sentry.init({
dsn: 'YOUR_DSN',
integrations: [new Integrations.BrowserTracing()],
tracesSampleRate: 1.0,
});
function App() {
return <YourApp />;
}
export default Sentry.withProfiler(App);自定义指标收集
创建自定义hook封装监控逻辑，便于复用。示例hook可收集组件挂载时间和交互事件：
function useMonitoring(componentName) {
useEffect(() => {
const timer = setTimeout(() => {
trackPerformance(componentName, 'mount');
}, 0);
return () => clearTimeout(timer);
}, [componentName]);
const trackEvent = (eventName, payload) => {
analytics.track(`${componentName}_${eventName}`, payload);
};
return { trackEvent };
}路由变更追踪
使用React Router的history对象监听导航变化。在路由组件中监听location变化：
import { useLocation } from 'react-router-dom';
function RouteTracker() {
const location = useLocation();
useEffect(() => {
trackPageView(location.pathname);
}, [location]);
return null;
}
