前端监控最佳实践：错误追踪与性能优化

// 正确姿势：Sentry 监控
// 1. 安装依赖
// npm install @sentry/react @sentry/tracing

// 2. 初始化
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 3. 错误边界
// src/ErrorBoundary.jsx
import React from 'react';
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;

// 4. 使用错误边界
// src/App.jsx
import React from 'react';
import ErrorBoundary from './ErrorBoundary';

function App() {
  return (
    <ErrorBoundary>
      <div>
        {/* 应用内容 */}
      </div>
    </ErrorBoundary>
  );
}

export default App;

2. 性能监控

// 正确姿势：性能监控
// 1. 使用 Lighthouse
// npm install -g lighthouse
// lighthouse https://example.com

// 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. 用户行为监控

<!-- 正确姿势：用户行为监控 -->
<!-- 1. 使用 Google Analytics -->
<!-- index.html -->
<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>

// 2. 自定义事件
function trackEvent(eventName, eventParams) {
  gtag('event', eventName, eventParams);
}
// 使用 <button onClick={() => trackEvent('button_click', { button_name: 'submit' })}> 提交 </button>

4. 日志监控

// 正确姿势：日志监控
// 1. 配置日志级别
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;
    }
  }
}

// 使用 log(LOG_LEVELS.ERROR, 'Failed to fetch data', { error: 'Network error' });
// log(LOG_LEVELS.INFO, 'User logged in', { userId: 123 });

总结

这才是有效的前端监控，让应用在阳光下运行，确保问题可追溯。