前端监控实战：构建可观测的前端应用

然后在入口文件初始化 SDK，并配置错误边界来捕获渲染错误：

// 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')
);

创建一个错误边界组件包裹应用主体，这样即使部分 UI 崩溃也不会导致整个白屏：

// 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;

在 App 中使用它：

// src/App.jsx
import React from 'react';
import ErrorBoundary from './ErrorBoundary';

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

性能与行为监控

除了报错，性能数据同样重要。Web Vitals 提供了 Google 定义的核心指标，如 FCP、LCP 等，能直观反映用户体验。

// 使用 Web Vitals
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

function sendToAnalytics({ name, delta, id }) {
  // 发送到你的分析服务
  navigator.sendBeacon('/analytics', JSON.stringify({ name, delta, id }));
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getFCP(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

对于用户行为，我们可以结合 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>

配合自定义函数调用：

function trackEvent(eventName, eventParams) {
  gtag('event', eventName, eventParams);
}
// 使用：<button onClick={() => trackEvent('button_click', { button_name: 'submit' })}>提交</button>

日志分级管理

生产环境的日志需要严格控制级别，避免泄露敏感信息或产生过多噪音。一个简单的日志工具类可以帮你管理：

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 });

做好这些监控后，你的应用就不再是在黑暗中运行了。任何问题都能被及时捕捉，让用户体验更流畅，也让维护工作更有底气。