如何设计一个前端监控体系？数据采集和清洗怎么做？

class PerformanceMonitor {
  private queue: any[] = [];
  private timer: number | null = null;

  init() {
    this.observeWebVitals();
    this.observeErrors();
    this.observeResources();
  }

  // 收集 Web Vitals
  private observeWebVitals() {
    import('web-vitals').then(({ onLCP, onFID, onCLS }) => {
      onLCP((metric) => this.report('LCP', metric.value));
      onFID((metric) => this.report('FID', metric.value));
      onCLS((metric) => this.report('CLS', metric.value));
    });
  }

  // 收集错误
  private observeErrors() {
    window.addEventListener('error', (e) => {
      this.report('js_error', {
        message: e.message,
        filename: e.filename,
        lineno: e.lineno,
      });
    });
  }

  // 批量上报
  private report(type: string, data: any) {
    this.queue.push({
      type,
      data,
      timestamp: Date.now(),
      url: location.href,
      userAgent: navigator.userAgent,
    });
    
    this.scheduleFlush();
  }

  private scheduleFlush() {
    if (this.timer) return;
    this.timer = window.setTimeout(() => {
      this.flush();
      this.timer = null;
    }, 5000); // 5秒批量上报
  }

  private flush() {
    if (this.queue.length === 0) return;
    
    const data = this.queue.splice(0);
    navigator.sendBeacon('/api/monitor', JSON.stringify(data));
  }
}