前端监控系统原理与实现详解

一、监控系统概述
前端监控系统用于收集、分析和预警Web应用运行时的各类数据，主要包含三类监控：

1. 性能监控：FP/FCP/LCP等核心性能指标
2. 异常监控：JavaScript错误、资源加载失败等
3. 行为监控：PV/UV、用户操作路径等

二、数据采集原理

1. 性能数据采集

// 使用Performance API获取性能指标
const performance = window.performance;
const timing = performance.timing;

// 计算页面加载时间
const loadTime = timing.loadEventEnd - timing.navigationStart;

// 核心Web指标采集（需兼容性处理）
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP:', entry.startTime);
    }
  });
});
observer.observe({type: 'paint', buffered: true});

2. 错误采集方案

// JS错误监听
window.addEventListener('error', (e) => {
  const errorLog = {
    type: 'javascript',
    message: e.message,
    filename: e.filename,
    lineno: e.lineno,
    colno: e.colno,
    stack: e.error?.stack,
    timestamp: Date.now()
  };
  sendToServer(errorLog);
}, true);

// Promise错误捕获
window.addEventListener('unhandledrejection', (e) => {
  const errorLog = {
    type: 'promise',
    reason: e.reason?.toString(),
    timestamp: Date.now()
  };
  sendToServer(errorLog);
});

三、数据传输优化

1. 批量上报机制

class Monitor {
  constructor() {
    this.cache = [];
    this.maxCache = 10;
    this.delay = 5000;
  }
  
  push(data) {
    this.cache.push({...data, timestamp: Date.now()});
    if (this.cache.length >= this.maxCache) {
      this.flush();
    }
  }
  
  flush() {
    if (this.cache.length === 0) return;
    
    // 使用sendBeacon优先，失败降级到fetch
    const blob = new Blob([JSON.stringify(this.cache)]);
    if (!navigator.sendBeacon('/api/monitor', blob)) {
      fetch('/api/monitor', {
        method: 'POST',
        body: JSON.stringify(this.cache),
        keepalive: true // 确保页面卸载时能发送
      });
    }
    this.cache = [];
  }
}

2. 采样与去重策略

// 错误采样（1%采样率）
function shouldSample() {
  return Math.random() < 0.01;
}

// 错误签名去重
function generateErrorSignature(error) {
  return `${error.message}-${error.filename}-${error.lineno}`;
}

const seenErrors = new Set();
function deduplicateError(error) {
  const signature = generateErrorSignature(error);
  if (seenErrors.has(signature)) return false;
  seenErrors.add(signature);
  return true;
}

四、数据存储与分析

1. 日志存储结构

CREATE TABLE error_logs (
  id BIGINT AUTO_INCREMENT,
  project_id VARCHAR(50),
  error_type ENUM('js', 'resource', 'promise'),
  message TEXT,
  stack_trace TEXT,
  user_agent TEXT,
  url VARCHAR(500),
  timestamp DATETIME,
  PRIMARY KEY(id),
  INDEX idx_project_time(project_id, timestamp)
);

2. 聚合分析示例

-- 错误趋势分析
SELECT 
  DATE(timestamp) as date,
  error_type,
  COUNT(*) as count
FROM error_logs 
WHERE timestamp > NOW() - INTERVAL 7 DAY
GROUP BY date, error_type;

五、可视化与告警

1. 关键指标看板

   • 错误率 = 错误次数 / PV
   • 性能达标率 = LCP<2.5s的会话占比
   • 资源错误率 = 资源加载失败数 / 总资源数

2. 智能告警规则

// 基于滑动窗口的告警检测
class AlertSystem {
  constructor(threshold = 0.05, windowSize = 1000) {
    this.errors = [];
    this.threshold = threshold;
    this.windowSize = windowSize;
  }
  
  checkAlert(currentErrorRate) {
    // 连续5分钟错误率超过阈值
    this.errors.push(currentErrorRate > this.threshold ? 1 : 0);
    if (this.errors.length > this.windowSize) {
      this.errors.shift();
    }
    
    const recentErrors = this.errors.slice(-300); // 最后5分钟
    const errorCount = recentErrors.reduce((a, b) => a + b);
    return errorCount / recentErrors.length > 0.8;
  }
}

六、实战注意事项

1. 监控代码自身异常处理

try {
  // 监控逻辑
} catch (e) {
  // 避免监控代码导致主业务崩溃
  console.warn('Monitor error:', e);
}

2. 性能影响控制

   • 使用Web Worker处理复杂计算
   • 避免同步操作阻塞主线程
   • 设置合理的采样频率

3. 隐私保护合规

   • 自动过滤敏感信息（密码、身份证号等）
   • 提供用户opt-out机制
   • 遵守GDPR等数据法规

通过这套完整的监控体系，可以实时掌握应用健康状况，快速定位问题，持续优化用户体验。实际部署时还需考虑日志检索、根因分析等高级功能。