前端Sentry数据分析与可视化：构建智能化监控仪表板

前端Sentry数据分析与可视化：构建智能化监控仪表板

在现代前端开发中，仅仅收集错误数据是不够的，更重要的是如何有效地分析和可视化这些数据，从中获得有价值的洞察。本文将深入探讨如何基于Sentry构建智能化的监控仪表板，实现数据的深度分析和可视化展示。

一、Sentry数据分析基础架构

1.1 数据收集与预处理系统

// dataCollectionSystem.js
import * as Sentry from '@sentry/browser';
import { BrowserTracing } from '@sentry/tracing';

// 数据收集与预处理系统
export class DataCollectionSystem {
  constructor(options = {}) {
    this.options = {
      enableAdvancedMetrics: true,
      enableUserBehaviorTracking: true,
      enablePerformanceAnalytics: true,
      dataRetentionDays: 30,
      batchSize: 100,
      flushInterval: 5000, // 5秒
      ...options
    };
    
    this.dataBuffer = [];
    this.metricsCache = new Map();
    this.userSessions = new Map();
    this.performanceMetrics = new Map();
    
    this.setupDataCollection();
    this.startDataProcessing();
  }
  
  setupDataCollection() {
    // 增强Sentry配置
    Sentry.init({
      dsn: process.env.REACT_APP_SENTRY_DSN,
      environment: process.env.NODE_ENV,
      integrations: [
        new BrowserTracing({
          // 自定义性能监控
          beforeNavigate: context => {
            return {
              ...context,
              // 添加自定义标签
              tags: {
                ...context.tags,
                navigationSource: this.getNavigationSource(),
                userSegment: this.getUserSegment(),
                deviceType: this.getDeviceType()
              }
            };
          }
        })
      ],
      tracesSampleRate: 0.1,
      
      // 自定义事件处理器
      beforeSend: (event) => {
        return this.preprocessEvent(event);
      },
      
      // 自定义面包屑处理器
      beforeBreadcrumb: (breadcrumb) => {
        return this.preprocessBreadcrumb(breadcrumb);
      }
    });
    
    // 设置全局事件监听器
    this.setupGlobalEventListeners();
  }
  
  // 预处理事件数据
  preprocessEvent(event) {
    // 添加自定义数据
    event.extra = {
      ...event.extra,
      sessionId: this.getCurrentSessionId(),
      userJourney: this.getUserJourney(),
      performanceContext: this.getPerformanceContext(),
      businessContext: this.getBusinessContext()
    };
    
    // 添加自定义标签
    event.tags = {
      ...event.tags,
      errorCategory: this.categorizeError(event),
      impactLevel: this.calculateImpactLevel(event),
      userType: this.getUserType(),
      featureFlag: this.getActiveFeatureFlags()
    };
    
    // 缓存事件数据用于分析
    this.cacheEventData(event);
    
    return event;
  }
  
  // 预处理面包屑数据
  preprocessBreadcrumb(breadcrumb) {
    // 增强面包屑数据
    breadcrumb.data = {
      ...breadcrumb.data,
      sessionTime: Date.now() - this.getSessionStartTime(),
      pageLoadTime: this.getPageLoadTime(),
      userInteractionCount: this.getUserInteractionCount()
    };
    
    // 缓存用户行为数据
    this.cacheUserBehavior(breadcrumb);
    
    return breadcrumb;
  }
  
  // 设置全局事件监听器
  setupGlobalEventListeners() {
    // 监听页面性能
    if ('PerformanceObserver' in window) {
      this.setupPerformanceObserver();
    }
    
    // 监听用户交互
    this.setupUserInteractionTracking();
    
    // 监听网络状态
    this.setupNetworkMonitoring();
    
    // 监听内存使用
    this.setupMemoryMonitoring();
  }
  
  // 设置性能观察器
  setupPerformanceObserver() {
    // 监听导航性能
    const navObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        this.collectNavigationMetrics(entry);
      });
    });
    navObserver.observe({ entryTypes: ['navigation'] });
    
    // 监听资源加载性能
    const resourceObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        this.collectResourceMetrics(entry);
      });
    });
    resourceObserver.observe({ entryTypes: ['resource'] });
    
    // 监听长任务
    const longTaskObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        this.collectLongTaskMetrics(entry);
      });
    });
    longTaskObserver.observe({ entryTypes: ['longtask'] });
    
    // 监听布局偏移
    const clsObserver = new PerformanceObserver((list) => {
      list.getEntries().forEach(entry => {
        this.collectLayoutShiftMetrics(entry);
      });
    });
    clsObserver.observe({ entryTypes: ['layout-shift'] });
  }
  
  // 收集导航性能指标
  collectNavigationMetrics(entry) {
    const metrics = {
      type: 'navigation',
      timestamp: Date.now(),
      url: entry.name,
      duration: entry.duration,
      domContentLoaded: entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart,
      loadComplete: entry.loadEventEnd - entry.loadEventStart,
      firstPaint: this.getFirstPaint(),
      firstContentfulPaint: this.getFirstContentfulPaint(),
      largestContentfulPaint: this.getLargestContentfulPaint(),
      firstInputDelay: this.getFirstInputDelay(),
      cumulativeLayoutShift: this.getCumulativeLayoutShift(),
      timeToInteractive: this.getTimeToInteractive()
    };
    
    this.addToDataBuffer('performance', metrics);
    
    // 发送到Sentry
    Sentry.addBreadcrumb({
      category: 'performance',
      message: 'Navigation performance collected',
      level: 'info',
      data: metrics
    });
  }
  
  // 收集资源加载指标
  collectResourceMetrics(entry) {
    const metrics = {
      type: 'resource',
      timestamp: Date.now(),
      name: entry.name,
      duration: entry.duration,
      size: entry.transferSize,
      resourceType: this.getResourceType(entry.name),
      initiatorType: entry.initiatorType,
      responseStart: entry.responseStart,
      responseEnd: entry.responseEnd
    };
    
    this.addToDataBuffer('resource', metrics);
  }
  
  // 收集长任务指标
  collectLongTaskMetrics(entry) {
    const metrics = {
      type: 'longtask',
      timestamp: Date.now(),
      duration: entry.duration,
      startTime: entry.startTime,
      attribution: entry.attribution
    };
    
    this.addToDataBuffer('longtask', metrics);
    
    // 如果长任务超过阈值，发送警告
    if (entry.duration > 100) {
      Sentry.captureMessage(
        `Long task detected: ${entry.duration}ms`,
        'warning',
        {
          tags: {
            category: 'performance',
            type: 'longtask'
          },
          extra: metrics
        }
      );
    }
  }
  
  // 收集布局偏移指标
  collectLayoutShiftMetrics(entry) {
    if (!entry.hadRecentInput) {
      const metrics = {
        type: 'layout-shift',
        timestamp: Date.now(),
        value: entry.value,
        sources: entry.sources?.map(source => ({
          node: source.node?.tagName,
          currentRect: source.currentRect,
          previousRect: source.previousRect
        }))
      };
      
      this.addToDataBuffer('layout-shift', metrics);
    }
  }
  
  // 设置用户交互追踪
  setupUserInteractionTracking() {
    const interactionEvents = ['click', 'scroll', 'keydown', 'touchstart'];
    
    interactionEvents.forEach(eventType => {
      document.addEventListener(eventType, (event) => {
        this.trackUserInteraction(eventType, event);
      }, { passive: true });
    });
  }
  
  // 追踪用户交互
  trackUserInteraction(type, event) {
    const interaction = {
      type: 'user-interaction',
      timestamp: Date.now(),
      eventType: type,
      target: this.getElementSelector(event.target),
      coordinates: type === 'click' ? { x: event.clientX, y: event.clientY } : null,
      sessionTime: Date.now() - this.getSessionStartTime()
    };
    
    this.addToDataBuffer('interaction', interaction);
    
    // 更新用户会话数据
    this.updateUserSession(interaction);
  }
  
  // 设置网络监控
  setupNetworkMonitoring() {
    // 监听在线/离线状态
    window.addEventListener('online', () => {
      this.addToDataBuffer('network', {
        type: 'network-status',
        timestamp: Date.now(),
        status: 'online'
      });
    });
    
    window.addEventListener('offline', () => {
      this.addToDataBuffer('network', {
        type: 'network-status',
        timestamp: Date.now(),
        status: 'offline'
      });
    });
    
    // 监听连接信息
    if ('connection' in navigator) {
      const connection = navigator.connection;
      
      const collectConnectionInfo = () => {
        this.addToDataBuffer('network', {
          type: 'connection-info',
          timestamp: Date.now(),
          effectiveType: connection.effectiveType,
          downlink: connection.downlink,
          rtt: connection.rtt,
          saveData: connection.saveData
        });
      };
      
      connection.addEventListener('change', collectConnectionInfo);
      collectConnectionInfo(); // 初始收集
    }
  }
  
  // 设置内存监控
  setupMemoryMonitoring() {
    if ('memory' in performance) {
      setInterval(() => {
        const memInfo = performance.memory;
        this.addToDataBuffer('memory', {
          type: 'memory-usage',
          timestamp: Date.now(),
          usedJSHeapSize: memInfo.usedJSHeapSize,
          totalJSHeapSize: memInfo.totalJSHeapSize,
          jsHeapSizeLimit: memInfo.jsHeapSizeLimit,
          usagePercentage: (memInfo.usedJSHeapSize / memInfo.jsHeapSizeLimit) * 100
        });
      }, 30000); // 每30秒收集一次
    }
  }
  
  // 添加数据到缓冲区
  addToDataBuffer(category, data) {
    this.dataBuffer.push({
      category,
      data,
      timestamp: Date.now()
    });
    
    // 如果缓冲区满了，立即处理
    if (this.dataBuffer.length >= this.options.batchSize) {
      this.processDataBuffer();
    }
  }
  
  // 开始数据处理
  startDataProcessing() {
    // 定期处理数据缓冲区
    setInterval(() => {
      this.processDataBuffer();
    }, this.options.flushInterval);
    
    // 定期清理过期数据
    setInterval(() => {
      this.cleanupExpiredData();
    }, 3600000); // 每小时清理一次
  }
  
  // 处理数据缓冲区
  processDataBuffer() {
    if (this.dataBuffer.length === 0) return;
    
    const batch = this.dataBuffer.splice(0, this.options.batchSize);
    
    // 分析数据
    this.analyzeDataBatch(batch);
    
    // 存储到本地缓存
    this.storeDataBatch(batch);
    
    // 发送聚合数据到Sentry
    this.sendAggregatedData(batch);
  }
  
  // 分析数据批次
  analyzeDataBatch(batch) {
    const analysis = {
      performance: this.analyzePerformanceData(batch),
      userBehavior: this.analyzeUserBehaviorData(batch),
      errors: this.analyzeErrorData(batch),
      network: this.analyzeNetworkData(batch)
    };
    
    // 检测异常模式
    this.detectAnomalies(analysis);
    
    // 更新实时指标
    this.updateRealTimeMetrics(analysis);
  }
  
  // 分析性能数据
  analyzePerformanceData(batch) {
    const performanceData = batch.filter(item => 
      ['performance', 'resource', 'longtask', 'layout-shift'].includes(item.category)
    );
    
    if (performanceData.length === 0) return null;
    
    const analysis = {
      averageLoadTime: 0,
      slowestResources: [],
      longTaskCount: 0,
      layoutShiftScore: 0,
      performanceScore: 0
    };
    
    // 计算平均加载时间
    const navigationData = performanceData.filter(item => 
      item.category === 'performance' && item.data.type === 'navigation'
    );
    
    if (navigationData.length > 0) {
      analysis.averageLoadTime = navigationData.reduce(
        (sum, item) => sum + item.data.duration, 0
      ) / navigationData.length;
    }
    
    // 找出最慢的资源
    const resourceData = performanceData.filter(item => item.category === 'resource');
    analysis.slowestResources = resourceData
      .sort((a, b) => b.data.duration - a.data.duration)
      .slice(0, 5)
      .map(item => ({
        name: item.data.name,
        duration: item.data.duration,
        size: item.data.size
      }));
    
    // 计算长任务数量
    analysis.longTaskCount = performanceData.filter(
      item => item.category === 'longtask'
    ).length;
    
    // 计算布局偏移分数
    const layoutShiftData = performanceData.filter(
      item => item.category === 'layout-shift'
    );
    analysis.layoutShiftScore = layoutShiftData.reduce(
      (sum, item) => sum + item.data.value, 0
    );
    
    // 计算综合性能分数
    analysis.performanceScore = this.calculatePerformanceScore(analysis);
    
    return analysis;
  }
  
  // 分析用户行为数据
  analyzeUserBehaviorData(batch) {
    const behaviorData = batch.filter(item => item.category === 'interaction');
    
    if (behaviorData.length === 0) return null;
    
    const analysis = {
      totalInteractions: behaviorData.length,
      interactionTypes: {},
      averageSessionTime: 0,
      mostInteractedElements: {},
      userEngagement: 0
    };
    
    // 统计交互类型
    behaviorData.forEach(item => {
      const type = item.data.eventType;
      analysis.interactionTypes[type] = (analysis.interactionTypes[type] || 0) + 1;
    });
    
    // 统计最多交互的元素
    behaviorData.forEach(item => {
      const target = item.data.target;
      analysis.mostInteractedElements[target] = 
        (analysis.mostInteractedElements[target] || 0) + 1;
    });
    
    // 计算平均会话时间
    const sessionTimes = behaviorData.map(item => item.data.sessionTime);
    if (sessionTimes.length > 0) {
      analysis.averageSessionTime = sessionTimes.reduce((sum, time) => sum + time, 0) / sessionTimes.length;
    }
    
    // 计算用户参与度
    analysis.userEngagement = this.calculateUserEngagement(analysis);
    
    return analysis;
  }
  
  // 检测异常模式
  detectAnomalies(analysis) {
    const anomalies = [];
    
    // 检测性能异常
    if (analysis.performance) {
      if (analysis.performance.averageLoadTime > 5000) {
        anomalies.push({
          type: 'performance',
          severity: 'high',
          message: `Average load time is ${analysis.performance.averageLoadTime}ms`,
          data: analysis.performance
        });
      }
      
      if (analysis.performance.longTaskCount > 10) {
        anomalies.push({
          type: 'performance',
          severity: 'medium',
          message: `High number of long tasks: ${analysis.performance.longTaskCount}`,
          data: analysis.performance
        });
      }
      
      if (analysis.performance.layoutShiftScore > 0.25) {
        anomalies.push({
          type: 'performance',
          severity: 'medium',
          message: `High cumulative layout shift: ${analysis.performance.layoutShiftScore}`,
          data: analysis.performance
        });
      }
    }
    
    // 检测用户行为异常
    if (analysis.userBehavior) {
      if (analysis.userBehavior.userEngagement < 0.3) {
        anomalies.push({
          type: 'user-behavior',
          severity: 'medium',
          message: `Low user engagement: ${analysis.userBehavior.userEngagement}`,
          data: analysis.userBehavior
        });
      }
    }
    
    // 发送异常报告
    if (anomalies.length > 0) {
      this.reportAnomalies(anomalies);
    }
  }
  
  // 报告异常
  reportAnomalies(anomalies) {
    anomalies.forEach(anomaly => {
      Sentry.captureMessage(
        `Anomaly detected: ${anomaly.message}`,
        anomaly.severity === 'high' ? 'error' : 'warning',
        {
          tags: {
            category: 'anomaly-detection',
            type: anomaly.type,
            severity: anomaly.severity
          },
          extra: anomaly.data
        }
      );
    });
  }
  
  // 计算性能分数
  calculatePerformanceScore(analysis) {
    let score = 100;
    
    // 基于加载时间的扣分
    if (analysis.averageLoadTime > 3000) {
      score -= Math.min(30, (analysis.averageLoadTime - 3000) / 100);
    }
    
    // 基于长任务的扣分
    score -= Math.min(20, analysis.longTaskCount * 2);
    
    // 基于布局偏移的扣分
    score -= Math.min(25, analysis.layoutShiftScore * 100);
    
    return Math.max(0, Math.round(score));
  }
  
  // 计算用户参与度
  calculateUserEngagement(analysis) {
    let engagement = 0;
    
    // 基于交互数量
    engagement += Math.min(0.4, analysis.totalInteractions / 100);
    
    // 基于会话时间
    engagement += Math.min(0.3, analysis.averageSessionTime / 300000); // 5分钟为满分
    
    // 基于交互多样性
    const typeCount = Object.keys(analysis.interactionTypes).length;
    engagement += Math.min(0.3, typeCount / 4);
    
    return Math.round(engagement * 100) / 100;
  }
  
  // 获取元素选择器
  getElementSelector(element) {
    if (!element) return 'unknown';
    
    let selector = element.tagName.toLowerCase();
    
    if (element.id) {
      selector += `#${element.id}`;
    } else if (element.className) {
      selector += `.${element.className.split(' ').join('.')}`;
    }
    
    return selector;
  }
  
  // 获取资源类型
  getResourceType(url) {
    const extension = url.split('.').pop()?.toLowerCase();
    
    const typeMap = {
      'js': 'script',
      'css': 'stylesheet',
      'png': 'image',
      'jpg': 'image',
      'jpeg': 'image',
      'gif': 'image',
      'svg': 'image',
      'woff': 'font',
      'woff2': 'font',
      'ttf': 'font',
      'eot': 'font'
    };
    
    return typeMap[extension] || 'other';
  }
  
  // 获取导航来源
  getNavigationSource() {
    if (document.referrer) {
      try {
        const referrerDomain = new URL(document.referrer).hostname;
        const currentDomain = window.location.hostname;
        return referrerDomain === currentDomain ? 'internal' : 'external';
      } catch {
        return 'unknown';
      }
    }
    return 'direct';
  }
  
  // 获取用户细分
  getUserSegment() {
    // 这里可以根据业务逻辑实现用户细分
    const userId = localStorage.getItem('userId');
    if (!userId) return 'anonymous';
    
    // 示例：基于用户ID的简单细分
    const userType = localStorage.getItem('userType') || 'regular';
    return userType;
  }
  
  // 获取设备类型
  getDeviceType() {
    const userAgent = navigator.userAgent;
    
    if (/tablet|ipad|playbook|silk/i.test(userAgent)) {
      return 'tablet';
    }
    if (/mobile|iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile/i.test(userAgent)) {
      return 'mobile';
    }
    return 'desktop';
  }
  
  // 获取当前会话ID
  getCurrentSessionId() {
    let sessionId = sessionStorage.getItem('sentrySessionId');
    if (!sessionId) {
      sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
      sessionStorage.setItem('sentrySessionId', sessionId);
    }
    return sessionId;
  }
  
  // 获取用户旅程
  getUserJourney() {
    const journey = JSON.parse(localStorage.getItem('userJourney') || '[]');
    return journey.slice(-10); // 返回最近10个页面
  }
  
  // 获取性能上下文
  getPerformanceContext() {
    return {
      connectionType: navigator.connection?.effectiveType || 'unknown',
      deviceMemory: navigator.deviceMemory || 'unknown',
      hardwareConcurrency: navigator.hardwareConcurrency || 'unknown',
      cookieEnabled: navigator.cookieEnabled,
      language: navigator.language
    };
  }
  
  // 获取业务上下文
  getBusinessContext() {
    return {
      currentPage: window.location.pathname,
      referrer: document.referrer,
      timestamp: Date.now(),
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      screenResolution: `${screen.width}x${screen.height}`,
      viewportSize: `${window.innerWidth}x${window.innerHeight}`
    };
  }
  
  // 分类错误
  categorizeError(event) {
    const errorType = event.exception?.values[0]?.type;
    const errorMessage = event.message || event.exception?.values[0]?.value || '';
    
    // 网络错误
    if (errorType === 'NetworkError' || errorMessage.includes('fetch')) {
      return 'network';
    }
    
    // 语法错误
    if (errorType === 'SyntaxError') {
      return 'syntax';
    }
    
    // 引用错误
    if (errorType === 'ReferenceError') {
      return 'reference';
    }
    
    // 类型错误
    if (errorType === 'TypeError') {
      return 'type';
    }
    
    // 权限错误
    if (errorType === 'SecurityError') {
      return 'security';
    }
    
    // 资源加载错误
    if (errorMessage.includes('Loading chunk') || errorMessage.includes('ChunkLoadError')) {
      return 'chunk-load';
    }
    
    return 'other';
  }
  
  // 计算影响级别
  calculateImpactLevel(event) {
    let score = 0;
    
    // 基于错误类型
    const errorCategory = this.categorizeError(event);
    const categoryScores = {
      'security': 10,
      'network': 7,
      'chunk-load': 6,
      'syntax': 8,
      'reference': 7,
      'type': 5,
      'other': 3
    };
    score += categoryScores[errorCategory] || 3;
    
    // 基于环境
    if (event.environment === 'production') {
      score += 3;
    }
    
    // 基于用户类型
    const userType = this.getUserType();
    if (userType === 'premium') {
      score += 2;
    }
    
    if (score >= 10) return 'critical';
    if (score >= 7) return 'high';
    if (score >= 4) return 'medium';
    return 'low';
  }
  
  // 获取用户类型
  getUserType() {
    return localStorage.getItem('userType') || 'regular';
  }
  
  // 获取活跃的功能标志
  getActiveFeatureFlags() {
    const flags = JSON.parse(localStorage.getItem('featureFlags') || '{}');
    return Object.keys(flags).filter(key => flags[key]).join(',');
  }
  
  // 缓存事件数据
  cacheEventData(event) {
    const key = `event_${Date.now()}`;
    this.metricsCache.set(key, {
      type: 'error',
      data: event,
      timestamp: Date.now()
    });
  }
  
  // 缓存用户行为
  cacheUserBehavior(breadcrumb) {
    const key = `behavior_${Date.now()}`;
    this.metricsCache.set(key, {
      type: 'behavior',
      data: breadcrumb,
      timestamp: Date.now()
    });
  }
  
  // 更新用户会话
  updateUserSession(interaction) {
    const userId = this.getUserId();
    const session = this.userSessions.get(userId) || {
      startTime: Date.now(),
      interactions: [],
      pageViews: 0,
      errors: 0
    };
    
    session.interactions.push(interaction);
    session.lastActivity = Date.now();
    
    this.userSessions.set(userId, session);
  }
  
  // 获取用户ID
  getUserId() {
    return localStorage.getItem('userId') || 'anonymous';
  }
  
  // 获取会话开始时间
  getSessionStartTime() {
    const userId = this.getUserId();
    const session = this.userSessions.get(userId);
    return session ? session.startTime : Date.now();
  }
  
  // 获取页面加载时间
  getPageLoadTime() {
    const navigation = performance.getEntriesByType('navigation')[0];
    return navigation ? navigation.loadEventEnd - navigation.loadEventStart : 0;
  }
  
  // 获取用户交互次数
  getUserInteractionCount() {
    const userId = this.getUserId();
    const session = this.userSessions.get(userId);
    return session ? session.interactions.length : 0;
  }
  
  // 获取First Paint
  getFirstPaint() {
    const paintEntries = performance.getEntriesByType('paint');
    const fpEntry = paintEntries.find(entry => entry.name === 'first-paint');
    return fpEntry ? fpEntry.startTime : 0;
  }
  
  // 获取First Contentful Paint
  getFirstContentfulPaint() {
    const paintEntries = performance.getEntriesByType('paint');
    const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
    return fcpEntry ? fcpEntry.startTime : 0;
  }
  
  // 获取Largest Contentful Paint
  getLargestContentfulPaint() {
    return new Promise((resolve) => {
      const observer = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        resolve(lastEntry ? lastEntry.startTime : 0);
        observer.disconnect();
      });
      observer.observe({ entryTypes: ['largest-contentful-paint'] });
      
      // 超时处理
      setTimeout(() => {
        observer.disconnect();
        resolve(0);
      }, 5000);
    });
  }
  
  // 获取First Input Delay
  getFirstInputDelay() {
    return new Promise((resolve) => {
      const observer = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const firstEntry = entries[0];
        resolve(firstEntry ? firstEntry.processingStart - firstEntry.startTime : 0);
        observer.disconnect();
      });
      observer.observe({ entryTypes: ['first-input'] });
      
      // 超时处理
      setTimeout(() => {
        observer.disconnect();
        resolve(0);
      }, 5000);
    });
  }
  
  // 获取Cumulative Layout Shift
  getCumulativeLayoutShift() {
    return new Promise((resolve) => {
      let clsValue = 0;
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          if (!entry.hadRecentInput) {
            clsValue += entry.value;
          }
        }
      });
      observer.observe({ entryTypes: ['layout-shift'] });
      
      // 在页面卸载时返回结果
      window.addEventListener('beforeunload', () => {
        observer.disconnect();
        resolve(clsValue);
      });
      
      // 超时处理
      setTimeout(() => {
        observer.disconnect();
        resolve(clsValue);
      }, 5000);
    });
  }
  
  // 获取Time to Interactive
  getTimeToInteractive() {
    // 简化的TTI计算
    const navigation = performance.getEntriesByType('navigation')[0];
    if (!navigation) return 0;
    
    return navigation.domContentLoadedEventEnd - navigation.fetchStart;
  }
  
  // 存储数据批次
  storeDataBatch(batch) {
    try {
      const existingData = JSON.parse(localStorage.getItem('sentryAnalyticsData') || '[]');
      const newData = [...existingData, ...batch];
      
      // 限制存储大小
      const maxItems = 1000;
      if (newData.length > maxItems) {
        newData.splice(0, newData.length - maxItems);
      }
      
      localStorage.setItem('sentryAnalyticsData', JSON.stringify(newData));
    } catch (error) {
      console.warn('Failed to store analytics data:', error);
    }
  }
  
  // 发送聚合数据
  sendAggregatedData(batch) {
    const aggregated = this.aggregateData(batch);
    
    if (Object.keys(aggregated).length > 0) {
      Sentry.addBreadcrumb({
        category: 'analytics',
        message: 'Aggregated data collected',
        level: 'info',
        data: aggregated
      });
    }
  }
  
  // 聚合数据
  aggregateData(batch) {
    const aggregated = {
      performance: {},
      interactions: {},
      network: {},
      memory: {}
    };
    
    batch.forEach(item => {
      switch (item.category) {
        case 'performance':
          this.aggregatePerformanceData(aggregated.performance, item.data);
          break;
        case 'interaction':
          this.aggregateInteractionData(aggregated.interactions, item.data);
          break;
        case 'network':
          this.aggregateNetworkData(aggregated.network, item.data);
          break;
        case 'memory':
          this.aggregateMemoryData(aggregated.memory, item.data);
          break;
      }
    });
    
    return aggregated;
  }
  
  // 聚合性能数据
  aggregatePerformanceData(target, data) {
    if (data.type === 'navigation') {
      target.navigationCount = (target.navigationCount || 0) + 1;
      target.totalDuration = (target.totalDuration || 0) + data.duration;
      target.averageDuration = target.totalDuration / target.navigationCount;
    }
  }
  
  // 聚合交互数据
  aggregateInteractionData(target, data) {
    target.totalInteractions = (target.totalInteractions || 0) + 1;
    target.byType = target.byType || {};
    target.byType[data.eventType] = (target.byType[data.eventType] || 0) + 1;
  }
  
  // 聚合网络数据
  aggregateNetworkData(target, data) {
    if (data.type === 'connection-info') {
      target.connectionType = data.effectiveType;
      target.downlink = data.downlink;
      target.rtt = data.rtt;
    }
  }
  
  // 聚合内存数据
  aggregateMemoryData(target, data) {
    if (data.type === 'memory-usage') {
      target.currentUsage = data.usagePercentage;
      target.maxUsage = Math.max(target.maxUsage || 0, data.usagePercentage);
    }
  }
  
  // 清理过期数据
  cleanupExpiredData() {
    const cutoffTime = Date.now() - (this.options.dataRetentionDays * 24 * 60 * 60 * 1000);
    
    // 清理内存缓存
    this.metricsCache.forEach((value, key) => {
      if (value.timestamp < cutoffTime) {
        this.metricsCache.delete(key);
      }
    });
    
    // 清理本地存储
    try {
      const storedData = JSON.parse(localStorage.getItem('sentryAnalyticsData') || '[]');
      const filteredData = storedData.filter(item => item.timestamp > cutoffTime);
      localStorage.setItem('sentryAnalyticsData', JSON.stringify(filteredData));
    } catch (error) {
      console.warn('Failed to cleanup stored data:', error);
    }
  }
  
  // 获取分析数据
  getAnalyticsData(timeRange = '24h') {
    const timeRanges = {
      '1h': 3600000,
      '24h': 86400000,
      '7d': 604800000,
      '30d': 2592000000
    };
    
    const cutoffTime = Date.now() - (timeRanges[timeRange] || timeRanges['24h']);
    
    try {
      const storedData = JSON.parse(localStorage.getItem('sentryAnalyticsData') || '[]');
      return storedData.filter(item => item.timestamp > cutoffTime);
    } catch (error) {
      console.warn('Failed to get analytics data:', error);
      return [];
    }
  }
  
  // 获取实时指标
  getRealTimeMetrics() {
    const userId = this.getUserId();
    const session = this.userSessions.get(userId);
    
    return {
      sessionDuration: session ? Date.now() - session.startTime : 0,
      interactionCount: session ? session.interactions.length : 0,
      pageViews: session ? session.pageViews : 0,
      errorCount: session ? session.errors : 0,
      memoryUsage: this.getCurrentMemoryUsage(),
      connectionType: navigator.connection?.effectiveType || 'unknown'
    };
  }
  
  // 获取当前内存使用
  getCurrentMemoryUsage() {
    if ('memory' in performance) {
      const memInfo = performance.memory;
      return {
        used: memInfo.usedJSHeapSize,
        total: memInfo.totalJSHeapSize,
        limit: memInfo.jsHeapSizeLimit,
        percentage: (memInfo.usedJSHeapSize / memInfo.jsHeapSizeLimit) * 100
      };
    }
    return null;
  }
}

// 创建全局数据收集系统实例
export const dataCollectionSystem = new DataCollectionSystem();

// 导出便捷方法
export const getAnalyticsData = (timeRange) => dataCollectionSystem.getAnalyticsData(timeRange);
export const getRealTimeMetrics = () => dataCollectionSystem.getRealTimeMetrics();

1.2 数据分析引擎

// dataAnalysisEngine.js
import * as Sentry from '@sentry/browser';

// 数据分析引擎
export class DataAnalysisEngine {
  constructor(options = {}) {
    this.options = {
      enableTrendAnalysis: true,
      enableAnomalyDetection: true,
      enablePredictiveAnalysis: false,
      analysisInterval: 300000, // 5分钟
      trendWindow: 86400000, // 24小时
      anomalyThreshold: 2, // 标准差倍数
      ...options
    };
    
    this.analysisCache = new Map();
    this.trendData = new Map();
    this.baselineMetrics = new Map();
    
    this.startAnalysisEngine();
  }
  
  startAnalysisEngine() {
    // 定期执行分析
    setInterval(() => {
      this.performAnalysis();
    }, this.options.analysisInterval);
    
    // 初始化基线指标
    this.initializeBaselines();
  }
  
  // 执行分析
  async performAnalysis() {
    try {
      const data = this.getAnalysisData();
      
      if (data.length === 0) return;
      
      const analysis = {
        timestamp: Date.now(),
        errorAnalysis: await this.analyzeErrors(data),
        performanceAnalysis: await this.analyzePerformance(data),
        userBehaviorAnalysis: await this.analyzeUserBehavior(data),
        trendAnalysis: this.options.enableTrendAnalysis ? await this.analyzeTrends(data) : null,
        anomalyAnalysis: this.options.enableAnomalyDetection ? await this.detectAnomalies(data) : null
      };
      
      // 缓存分析结果
      this.cacheAnalysisResult(analysis);
      
      // 发送分析结果到Sentry
      this.sendAnalysisToSentry(analysis);
      
      // 触发告警
      this.checkAlerts(analysis);
      
    } catch (error) {
      console.error('Analysis failed:', error);
      Sentry.captureException(error, {
        tags: {
          category: 'data-analysis',
          operation: 'perform-analysis'
        }
      });
    }
  }
  
  // 获取分析数据
  getAnalysisData() {
    try {
      const storedData = JSON.parse(localStorage.getItem('sentryAnalyticsData') || '[]');
      const cutoffTime = Date.now() - this.options.trendWindow;
      return storedData.filter(item => item.timestamp > cutoffTime);
    } catch (error) {
      console.warn('Failed to get analysis data:', error);
      return [];
    }
  }
  
  // 分析错误
  async analyzeErrors(data) {
    const errorData = data.filter(item => item.category === 'error');
    
    if (errorData.length === 0) {
      return {
        totalErrors: 0,
        errorRate: 0,
        topErrors: [],
        errorTrends: {},
        impactAnalysis: {}
      };
    }
    
    const analysis = {
      totalErrors: errorData.length,
      errorRate: this.calculateErrorRate(errorData, data),
      topErrors: this.getTopErrors(errorData),
      errorTrends: this.getErrorTrends(errorData),
      impactAnalysis: this.analyzeErrorImpact(errorData),
      categoryDistribution: this.getErrorCategoryDistribution(errorData),
      severityDistribution: this.getErrorSeverityDistribution(errorData),
      environmentDistribution: this.getErrorEnvironmentDistribution(errorData)
    };
    
    return analysis;
  }
  
  // 计算错误率
  calculateErrorRate(errorData, allData) {
    const totalEvents = allData.length;
    return totalEvents > 0 ? (errorData.length / totalEvents) * 100 : 0;
  }
  
  // 获取顶级错误
  getTopErrors(errorData) {
    const errorCounts = new Map();
    
    errorData.forEach(item => {
      const errorKey = this.getErrorKey(item.data);
      const count = errorCounts.get(errorKey) || 0;
      errorCounts.set(errorKey, count + 1);
    });
    
    return Array.from(errorCounts.entries())
      .sort((a, b) => b[1] - a[1])
      .slice(0, 10)
      .map(([error, count]) => ({ error, count }));
  }
  
  // 获取错误键
  getErrorKey(errorData) {
    const errorType = errorData.exception?.values[0]?.type || 'Unknown';
    const errorMessage = errorData.message || errorData.exception?.values[0]?.value || 'Unknown';
    return `${errorType}: ${errorMessage.substring(0, 100)}`;
  }
  
  // 获取错误趋势
  getErrorTrends(errorData) {
    const hourlyTrends = new Map();
    const now = Date.now();
    
    // 初始化24小时的数据
    for (let i = 23; i >= 0; i--) {
      const hour = new Date(now - i * 3600000).getHours();
      hourlyTrends.set(hour, 0);
    }
    
    // 统计每小时的错误数
    errorData.forEach(item => {
      const hour = new Date(item.timestamp).getHours();
      const count = hourlyTrends.get(hour) || 0;
      hourlyTrends.set(hour, count + 1);
    });
    
    return Object.fromEntries(hourlyTrends);
  }
  
  // 分析错误影响
  analyzeErrorImpact(errorData) {
    const impactLevels = {
      critical: 0,
      high: 0,
      medium: 0,
      low: 0
    };
    
    const affectedUsers = new Set();
    const affectedPages = new Set();
    
    errorData.forEach(item => {
      const impact = item.data.tags?.impactLevel || 'low';
      impactLevels[impact] = (impactLevels[impact] || 0) + 1;
      
      if (item.data.user?.id) {
        affectedUsers.add(item.data.user.id);
      }
      
      if (item.data.request?.url) {
        affectedPages.add(item.data.request.url);
      }
    });
    
    return {
      impactLevels,
      affectedUsers: affectedUsers.size,
      affectedPages: affectedPages.size,
      totalImpactScore: this.calculateTotalImpactScore(impactLevels)
    };
  }
  
  // 计算总影响分数
  calculateTotalImpactScore(impactLevels) {
    const weights = { critical: 10, high: 7, medium: 4, low: 1 };
    return Object.entries(impactLevels).reduce(
      (total, [level, count]) => total + (count * (weights[level] || 1)), 0
    );
  }
  
  // 获取错误分类分布
  getErrorCategoryDistribution(errorData) {
    const distribution = {};
    
    errorData.forEach(item => {
      const category = item.data.tags?.errorCategory || 'other';
      distribution[category] = (distribution[category] || 0) + 1;
    });
    
    return distribution;
  }
  
  // 获取错误严重性分布
  getErrorSeverityDistribution(errorData) {
    const distribution = {};
    
    errorData.forEach(item => {
      const severity = item.data.level || 'error';
      distribution[severity] = (distribution[severity] || 0) + 1;
    });
    
    return distribution;
  }
  
  // 获取错误环境分布
  getErrorEnvironmentDistribution(errorData) {
    const distribution = {};
    
    errorData.forEach(item => {
      const environment = item.data.environment || 'unknown';
      distribution[environment] = (distribution[environment] || 0) + 1;
    });
    
    return distribution;
  }
  
  // 分析性能
  async analyzePerformance(data) {
    const performanceData = data.filter(item => 
      ['performance', 'resource', 'longtask', 'layout-shift', 'memory'].includes(item.category)
    );
    
    if (performanceData.length === 0) {
      return {
        overallScore: 0,
        coreWebVitals: {},
        resourceAnalysis: {},
        memoryAnalysis: {},
        performanceTrends: {}
      };
    }
    
    const analysis = {
      overallScore: this.calculateOverallPerformanceScore(performanceData),
      coreWebVitals: this.analyzeCoreWebVitals(performanceData),
      resourceAnalysis: this.analyzeResources(performanceData),
      memoryAnalysis: this.analyzeMemoryUsage(performanceData),
      performanceTrends: this.getPerformanceTrends(performanceData),
      longTaskAnalysis: this.analyzeLongTasks(performanceData),
      layoutShiftAnalysis: this.analyzeLayoutShifts(performanceData)
    };
    
    return analysis;
  }
  
  // 计算整体性能分数
  calculateOverallPerformanceScore(performanceData) {
    const navigationData = performanceData.filter(
      item => item.category === 'performance' && item.data.type === 'navigation'
    );
    
    if (navigationData.length === 0) return 0;
    
    let totalScore = 0;
    let scoreCount = 0;
    
    navigationData.forEach(item => {
      const data = item.data;
      let score = 100;
      
      // FCP评分 (0-2.5s: 100分, 2.5-4s: 50分, >4s: 0分)
      if (data.firstContentfulPaint > 4000) {
        score -= 30;
      } else if (data.firstContentfulPaint > 2500) {
        score -= 15;
      }
      
      // LCP评分 (0-2.5s: 100分, 2.5-4s: 50分, >4s: 0分)
      if (data.largestContentfulPaint > 4000) {
        score -= 30;
      } else if (data.largestContentfulPaint > 2500) {
        score -= 15;
      }
      
      // FID评分 (0-100ms: 100分, 100-300ms: 50分, >300ms: 0分)
      if (data.firstInputDelay > 300) {
        score -= 25;
      } else if (data.firstInputDelay > 100) {
        score -= 12;
      }
      
      // CLS评分 (0-0.1: 100分, 0.1-0.25: 50分, >0.25: 0分)
      if (data.cumulativeLayoutShift > 0.25) {
        score -= 15;
      } else if (data.cumulativeLayoutShift > 0.1) {
        score -= 7;
      }
      
      totalScore += Math.max(0, score);
      scoreCount++;
    });
    
    return scoreCount > 0 ? Math.round(totalScore / scoreCount) : 0;
  }
  
  // 分析Core Web Vitals
  analyzeCoreWebVitals(performanceData) {
    const navigationData = performanceData.filter(
      item => item.category === 'performance' && item.data.type === 'navigation'
    );
    
    if (navigationData.length === 0) {
      return {
        lcp: { average: 0, p75: 0, p95: 0, status: 'unknown' },
        fid: { average: 0, p75: 0, p95: 0, status: 'unknown' },
        cls: { average: 0, p75: 0, p95: 0, status: 'unknown' },
        fcp: { average: 0, p75: 0, p95: 0, status: 'unknown' }
      };
    }
    
    const lcpValues = navigationData.map(item => item.data.largestContentfulPaint).filter(v => v > 0);
    const fidValues = navigationData.map(item => item.data.firstInputDelay).filter(v => v > 0);
    const clsValues = navigationData.map(item => item.data.cumulativeLayoutShift).filter(v => v >= 0);
    const fcpValues = navigationData.map(item => item.data.firstContentfulPaint).filter(v => v > 0);
    
    return {
      lcp: this.calculateMetricStats(lcpValues, [2500, 4000]),
      fid: this.calculateMetricStats(fidValues, [100, 300]),
      cls: this.calculateMetricStats(clsValues, [0.1, 0.25]),
      fcp: this.calculateMetricStats(fcpValues, [1800, 3000])
    };
  }
  
  // 计算指标统计
  calculateMetricStats(values, thresholds) {
    if (values.length === 0) {
      return { average: 0, p75: 0, p95: 0, status: 'unknown' };
    }
    
    const sorted = values.sort((a, b) => a - b);
    const average = values.reduce((sum, val) => sum + val, 0) / values.length;
    const p75 = this.getPercentile(sorted, 75);
    const p95 = this.getPercentile(sorted, 95);
    
    let status = 'good';
    if (p75 > thresholds[1]) {
      status = 'poor';
    } else if (p75 > thresholds[0]) {
      status = 'needs-improvement';
    }
    
    return {
      average: Math.round(average),
      p75: Math.round(p75),
      p95: Math.round(p95),
      status
    };
  }
  
  // 获取百分位数
  getPercentile(sortedArray, percentile) {
    const index = (percentile / 100) * (sortedArray.length - 1);
    const lower = Math.floor(index);
    const upper = Math.ceil(index);
    const weight = index % 1;
    
    if (upper >= sortedArray.length) return sortedArray[sortedArray.length - 1];
    
    return sortedArray[lower] * (1 - weight) + sortedArray[upper] * weight;
  }
  
  // 分析资源
  analyzeResources(performanceData) {
    const resourceData = performanceData.filter(item => item.category === 'resource');
    
    if (resourceData.length === 0) {
      return {
        totalResources: 0,
        totalSize: 0,
        averageLoadTime: 0,
        slowestResources: [],
        resourceTypes: {}
      };
    }
    
    const totalSize = resourceData.reduce((sum, item) => sum + (item.data.size || 0), 0);
    const totalDuration = resourceData.reduce((sum, item) => sum + item.data.duration, 0);
    const averageLoadTime = totalDuration / resourceData.length;
    
    // 按类型分组
    const resourceTypes = {};
    resourceData.forEach(item => {
      const type = item.data.resourceType || 'other';
      if (!resourceTypes[type]) {
        resourceTypes[type] = { count: 0, totalSize: 0, totalDuration: 0 };
      }
      resourceTypes[type].count++;
      resourceTypes[type].totalSize += item.data.size || 0;
      resourceTypes[type].totalDuration += item.data.duration;
    });
    
    // 计算每种类型的平均值
    Object.keys(resourceTypes).forEach(type => {
      const typeData = resourceTypes[type];
      typeData.averageSize = typeData.totalSize / typeData.count;
      typeData.averageDuration = typeData.totalDuration / typeData.count;
    });
    
    // 找出最慢的资源
    const slowestResources = resourceData
      .sort((a, b) => b.data.duration - a.data.duration)
      .slice(0, 5)
      .map(item => ({
        name: item.data.name,
        duration: item.data.duration,
        size: item.data.size,
        type: item.data.resourceType
      }));
    
    return {
      totalResources: resourceData.length,
      totalSize,
      averageLoadTime,
      slowestResources,
      resourceTypes
    };
  }
  
  // 分析内存使用
  analyzeMemoryUsage(performanceData) {
    const memoryData = performanceData.filter(item => item.category === 'memory');
    
    if (memoryData.length === 0) {
      return {
        currentUsage: 0,
        maxUsage: 0,
        averageUsage: 0,
        trend: 'stable'
      };
    }
    
    const usageValues = memoryData.map(item => item.data.usagePercentage);
    const currentUsage = usageValues[usageValues.length - 1];
    const maxUsage = Math.max(...usageValues);
    const averageUsage = usageValues.reduce((sum, val) => sum + val, 0) / usageValues.length;
    
    // 计算趋势
    let trend = 'stable';
    if (usageValues.length > 1) {
      const recent = usageValues.slice(-5);
      const older = usageValues.slice(-10, -5);
      
      if (recent.length > 0 && older.length > 0) {
        const recentAvg = recent.reduce((sum, val) => sum + val, 0) / recent.length;
        const olderAvg = older.reduce((sum, val) => sum + val, 0) / older.length;
        
        if (recentAvg > olderAvg + 5) {
          trend = 'increasing';
        } else if (recentAvg < olderAvg - 5) {
          trend = 'decreasing';
        }
      }
    }
    
    return {
      currentUsage: Math.round(currentUsage),
      maxUsage: Math.round(maxUsage),
      averageUsage: Math.round(averageUsage),
      trend
    };
  }
  
  // 获取性能趋势
  getPerformanceTrends(performanceData) {
    const hourlyTrends = new Map();
    const now = Date.now();
    
    // 初始化24小时的数据
    for (let i = 23; i >= 0; i--) {
      const hour = new Date(now - i * 3600000).getHours();
      hourlyTrends.set(hour, {
        loadTime: [],
        resourceCount: 0,
        longTasks: 0,
        layoutShifts: 0
      });
    }
    
    // 统计每小时的性能数据
    performanceData.forEach(item => {
      const hour = new Date(item.timestamp).getHours();
      const hourData = hourlyTrends.get(hour);
      
      if (!hourData) return;
      
      switch (item.category) {
        case 'performance':
          if (item.data.type === 'navigation') {
            hourData.loadTime.push(item.data.duration);
          }
          break;
        case 'resource':
          hourData.resourceCount++;
          break;
        case 'longtask':
          hourData.longTasks++;
          break;
        case 'layout-shift':
          hourData.layoutShifts++;
          break;
      }
    });
    
    // 计算每小时的平均值
    const trends = {};
    hourlyTrends.forEach((data, hour) => {
      trends[hour] = {
        averageLoadTime: data.loadTime.length > 0 
          ? data.loadTime.reduce((sum, time) => sum + time, 0) / data.loadTime.length 
          : 0,
        resourceCount: data.resourceCount,
        longTasks: data.longTasks,
        layoutShifts: data.layoutShifts
      };
    });
    
    return trends;
  }
  
  // 分析长任务
  analyzeLongTasks(performanceData) {
    const longTaskData = performanceData.filter(item => item.category === 'longtask');
    
    if (longTaskData.length === 0) {
      return {
        totalCount: 0,
        averageDuration: 0,
        maxDuration: 0,
        impactScore: 0
      };
    }
    
    const durations = longTaskData.map(item => item.data.duration);
    const totalDuration = durations.reduce((sum, duration) => sum + duration, 0);
    const averageDuration = totalDuration / durations.length;
    const maxDuration = Math.max(...durations);
    
    // 计算影响分数 (基于数量和持续时间)
    const impactScore = Math.min(100, (longTaskData.length * 5) + (averageDuration / 10));
    
    return {
      totalCount: longTaskData.length,
      averageDuration: Math.round(averageDuration),
      maxDuration: Math.round(maxDuration),
      impactScore: Math.round(impactScore)
    };
  }
  
  // 分析布局偏移
  analyzeLayoutShifts(performanceData) {
    const layoutShiftData = performanceData.filter(item => item.category === 'layout-shift');
    
    if (layoutShiftData.length === 0) {
      return {
        totalShifts: 0,
        cumulativeScore: 0,
        averageShift: 0,
        impactLevel: 'good'
      };
    }
    
    const shiftValues = layoutShiftData.map(item => item.data.value);
    const cumulativeScore = shiftValues.reduce((sum, value) => sum + value, 0);
    const averageShift = cumulativeScore / shiftValues.length;
    
    // 确定影响级别
    let impactLevel = 'good';
    if (cumulativeScore > 0.25) {
      impactLevel = 'poor';
    } else if (cumulativeScore > 0.1) {
      impactLevel = 'needs-improvement';
    }
    
    return {
      totalShifts: layoutShiftData.length,
      cumulativeScore: Math.round(cumulativeScore * 1000) / 1000,
      averageShift: Math.round(averageShift * 1000) / 1000,
      impactLevel
    };
  }
  
  // 分析用户行为
  async analyzeUserBehavior(data) {
    const behaviorData = data.filter(item => item.category === 'interaction');
    
    if (behaviorData.length === 0) {
      return {
        totalInteractions: 0,
        engagementScore: 0,
        sessionAnalysis: {},
        interactionPatterns: {},
        userJourney: []
      };
    }
    
    const analysis = {
      totalInteractions: behaviorData.length,
      engagementScore: this.calculateEngagementScore(behaviorData),
      sessionAnalysis: this.analyzeUserSessions(behaviorData),
      interactionPatterns: this.analyzeInteractionPatterns(behaviorData),
      userJourney: this.analyzeUserJourney(behaviorData),
      deviceAnalysis: this.analyzeDeviceUsage(behaviorData),
      timeAnalysis: this.analyzeTimePatterns(behaviorData)
    };
    
    return analysis;
  }
  
  // 计算参与度分数
  calculateEngagementScore(behaviorData) {
    let score = 0;
    
    // 基于交互数量 (最多40分)
    const interactionScore = Math.min(40, behaviorData.length * 2);
    score += interactionScore;
    
    // 基于交互多样性 (最多30分)
    const interactionTypes = new Set(behaviorData.map(item => item.data.eventType));
    const diversityScore = Math.min(30, interactionTypes.size * 7.5);
    score += diversityScore;
    
    // 基于会话时长 (最多30分)
    const sessionTimes = behaviorData.map(item => item.data.sessionTime);
    const maxSessionTime = Math.max(...sessionTimes);
    const timeScore = Math.min(30, maxSessionTime / 10000); // 10秒为1分
    score += timeScore;
    
    return Math.round(score);
  }
  
  // 分析用户会话
  analyzeUserSessions(behaviorData) {
    const sessions = new Map();
    
    behaviorData.forEach(item => {
      const sessionId = item.data.sessionId || 'default';
      if (!sessions.has(sessionId)) {
        sessions.set(sessionId, {
          interactions: [],
          startTime: item.timestamp,
          endTime: item.timestamp
        });
      }
      
      const session = sessions.get(sessionId);
      session.interactions.push(item);
      session.endTime = Math.max(session.endTime, item.timestamp);
    });
    
    const sessionAnalysis = {
      totalSessions: sessions.size,
      averageSessionDuration: 0,
      averageInteractionsPerSession: 0,
      longestSession: 0,
      shortestSession: Infinity
    };
    
    let totalDuration = 0;
    let totalInteractions = 0;
    
    sessions.forEach(session => {
      const duration = session.endTime - session.startTime;
      totalDuration += duration;
      totalInteractions += session.interactions.length;
      
      sessionAnalysis.longestSession = Math.max(sessionAnalysis.longestSession, duration);
      sessionAnalysis.shortestSession = Math.min(sessionAnalysis.shortestSession, duration);
    });
    
    sessionAnalysis.averageSessionDuration = Math.round(totalDuration / sessions.size);
    sessionAnalysis.averageInteractionsPerSession = Math.round(totalInteractions / sessions.size);
    
    if (sessionAnalysis.shortestSession === Infinity) {
      sessionAnalysis.shortestSession = 0;
    }
    
    return sessionAnalysis;
  }
  
  // 分析交互模式
  analyzeInteractionPatterns(behaviorData) {
    const patterns = {
      byType: {},
      byTarget: {},
      byTime: {},
      sequences: []
    };
    
    // 按类型统计
    behaviorData.forEach(item => {
      const type = item.data.eventType;
      patterns.byType[type] = (patterns.byType[type] || 0) + 1;
    });
    
    // 按目标元素统计
    behaviorData.forEach(item => {
      const target = item.data.target;
      patterns.byTarget[target] = (patterns.byTarget[target] || 0) + 1;
    });
    
    // 按时间段统计
    behaviorData.forEach(item => {
      const hour = new Date(item.timestamp).getHours();
      patterns.byTime[hour] = (patterns.byTime[hour] || 0) + 1;
    });
    
    // 分析交互序列
    const sortedData = behaviorData.sort((a, b) => a.timestamp - b.timestamp);
    for (let i = 0; i < sortedData.length - 1; i++) {
      const current = sortedData[i];
      const next = sortedData[i + 1];
      const timeDiff = next.timestamp - current.timestamp;
      
      if (timeDiff < 5000) { // 5秒内的连续交互
        patterns.sequences.push({
          from: current.data.eventType,
          to: next.data.eventType,
          interval: timeDiff
        });
      }
    }
    
    return patterns;
  }
  
  // 分析用户旅程
  analyzeUserJourney(behaviorData) {
    const journey = [];
    const sortedData = behaviorData.sort((a, b) => a.timestamp - b.timestamp);
    
    let currentPage = null;
    let pageStartTime = null;
    
    sortedData.forEach(item => {
      const page = this.extractPageFromInteraction(item);
      
      if (page !== currentPage) {
        if (currentPage) {
          journey.push({
            page: currentPage,
            startTime: pageStartTime,
            endTime: item.timestamp,
            duration: item.timestamp - pageStartTime,
            interactions: sortedData.filter(d => 
              d.timestamp >= pageStartTime && 
              d.timestamp < item.timestamp &&
              this.extractPageFromInteraction(d) === currentPage
            ).length
          });
        }
        
        currentPage = page;
        pageStartTime = item.timestamp;
      }
    });
    
    // 添加最后一个页面
    if (currentPage && pageStartTime) {
      const lastTimestamp = sortedData[sortedData.length - 1].timestamp;
      journey.push({
        page: currentPage,
        startTime: pageStartTime,
        endTime: lastTimestamp,
        duration: lastTimestamp - pageStartTime,
        interactions: sortedData.filter(d => 
          d.timestamp >= pageStartTime &&
          this.extractPageFromInteraction(d) === currentPage
        ).length
      });
    }
    
    return journey;
  }
  
  // 从交互中提取页面信息
  extractPageFromInteraction(interaction) {
    // 这里可以根据实际情况实现页面提取逻辑
    return interaction.data.page || window.location.pathname;
  }
  
  // 分析设备使用情况
  analyzeDeviceUsage(behaviorData) {
    const deviceTypes = {};
    const browsers = {};
    const screenSizes = {};
    
    behaviorData.forEach(item => {
      const deviceType = item.data.deviceType || 'unknown';
      const browser = item.data.browser || 'unknown';
      const screenSize = item.data.screenSize || 'unknown';
      
      deviceTypes[deviceType] = (deviceTypes[deviceType] || 0) + 1;
      browsers[browser] = (browsers[browser] || 0) + 1;
      screenSizes[screenSize] = (screenSizes[screenSize] || 0) + 1;
    });
    
    return {
      deviceTypes,
      browsers,
      screenSizes
    };
  }
  
  // 分析时间模式
  analyzeTimePatterns(behaviorData) {
    const hourlyActivity = new Array(24).fill(0);
    const dailyActivity = {};
    
    behaviorData.forEach(item => {
      const date = new Date(item.timestamp);
      const hour = date.getHours();
      const day = date.toDateString();
      
      hourlyActivity[hour]++;
      dailyActivity[day] = (dailyActivity[day] || 0) + 1;
    });
    
    // 找出最活跃的时间段
    const peakHour = hourlyActivity.indexOf(Math.max(...hourlyActivity));
    const peakDay = Object.keys(dailyActivity).reduce((a, b) => 
      dailyActivity[a] > dailyActivity[b] ? a : b
    );
    
    return {
       hourlyActivity,
       dailyActivity,
       peakHour,
       peakDay,
       totalActiveDays: Object.keys(dailyActivity).length
     };
   }
}

// 使用示例
const dataAnalyzer = new SentryDataAnalyzer();

// 启动数据收集
dataAnalyzer.startDataCollection();

// 定期执行分析
setInterval(async () => {
  const analysis = await dataAnalyzer.performAnalysis();
  console.log('分析结果:', analysis);
}, 60000); // 每分钟分析一次