前端监控最佳实践：错误捕获与性能分析

前端监控最佳实践：错误捕获与性能分析

引言

前端监控对于保障应用稳定性至关重要。如果缺乏有效的监控手段，就像在没有监控的仓库里存放贵重物品，出现问题时无法及时发现和定位。

为什么需要前端监控

在实际项目中，用户反馈页面崩溃而开发团队无法定位问题是很常见的情况。建立完善的监控体系能避免这种'猜谜游戏'。

错误示例

// 反面教材：没有监控
function App() {
  const [data, setData] = React.useState([]);
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('/api/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }
    fetchData();
  }, []);
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}
export default App;

仅依赖 console.error 在生产环境中往往无法有效上报错误。

实施建议

1. 错误追踪 (Sentry)

// 初始化
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0,
});

// 错误边界
import * as Sentry from '@sentry/react';
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  componentDidCatch(error, errorInfo) {
    Sentry.captureException(error, { extra: errorInfo });
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}
export default ErrorBoundary;

2. 性能监控

// 使用 Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
function sendToAnalytics({ name, delta, id }) {
  console.log(name, delta, id);
  navigator.sendBeacon('/analytics', JSON.stringify({ name, delta, id }));
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

3. 用户行为监控

<!-- 使用 Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

// 自定义事件
function trackEvent(eventName, eventParams) {
  gtag('event', eventName, eventParams);
}

4. 日志监控

// 配置日志级别
const LOG_LEVELS = { ERROR: 0, WARN: 1, INFO: 2, DEBUG: 3 };
let currentLevel = LOG_LEVELS.INFO;
function log(level, message, data) {
  if (level <= currentLevel) {
    const timestamp = new Date().toISOString();
    const logMessage = `[${timestamp}] [${Object.keys(LOG_LEVELS)[level]}] ${message}`;
    switch (level) {
      case LOG_LEVELS.ERROR: console.error(logMessage, data); break;
      case LOG_LEVELS.WARN: console.warn(logMessage, data); break;
      case LOG_LEVELS.INFO: console.info(logMessage, data); break;
      case LOG_LEVELS.DEBUG: console.debug(logMessage, data); break;
    }
  }
}

通过以上方案，可以构建全方位的前端监控体系，确保应用稳定运行。