性能监控集成

性能监控收集页面加载时间、用户交互数据，分析优化效果。

常用监控工具

Web Vitals 指标

集成 Web Vitals

import { getLCP, getFID, getCLS } from 'web-vitals'

getLCP(console.log)
getFID(console.log)
getCLS(console.log)

上报性能数据

import { getCLS, getFID, getLCP } from 'web-vitals'

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id
  })

  fetch('/api/analytics', {
    method: 'POST',
    body,
    headers: { 'Content-Type': 'application/json' }
  })
}

getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getLCP(sendToAnalytics)

注意：上报数据用于分析用户真实体验。

Sentry 错误监控

import * as Sentry from '@sentry/vue'

Sentry.init({
  dsn: 'https://xxx@sentry.io/xxx',
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: 0.1,
  release: __APP_VERSION__
})

构建产物追踪

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_ID__: JSON.stringify(process.env.BUILD_ID)
  }
})

版本追踪：

• 错误报告包含版本信息
• 性能数据按版本分组
• 定位问题到具体构建

自定义性能上报

// 页面加载时间
window.addEventListener('load', () => {
  const timing = performance.timing
  const loadTime = timing.loadEventEnd - timing.navigationStart

  reportPerformance({
    type: 'page_load',
    value: loadTime,
    page: location.pathname,
    version: __APP_VERSION__
  })
})

监控数据可视化

// Grafana 或自定义 Dashboard
// 监控指标：
// - 页面加载时间趋势
// - 错误发生频率
// - 用户访问量
// - 版本分布

要点总结

• Web Vitals 收集核心性能指标
• Sentry 监控错误和异常
• 版本标识关联数据到构建
• 性能数据可视化分析趋势