@dynamicu/chromedebug-mcp 2.2.0

package/chrome-extension/performance-monitor.js

@@ -0,0 +1,533 @@
+// Performance Monitor for Chrome Debug Full Data Recording
+// Tracks CPU usage, memory consumption, and Core Web Vitals
+
+class PerformanceMonitor {
+  constructor() {
+    this.isMonitoring = false;
+    this.stats = {
+      cpuUsage: 0,
+      memoryUsage: 0,
+      dataVolume: 0,
+      eventCount: 0,
+      bufferSize: 0,
+      lastCheck: Date.now(),
+      // Web Vitals
+      lcp: null,
+      cls: null,
+      fid: null,
+      inp: null,
+      ttfb: null
+    };
+    
+    this.thresholds = {
+      cpuUsage: 80, // % - throttle recording if exceeded
+      memoryUsage: 100 * 1024 * 1024, // 100MB
+      dataVolumePerSecond: 1024 * 1024, // 1MB/sec
+      eventCountPerSecond: 100,
+      // Web Vitals thresholds
+      lcp: 2500, // 2.5s is "good" LCP
+      cls: 0.1, // 0.1 is "good" CLS
+      inp: 200 // 200ms is "good" INP
+    };
+    
+    this.callbacks = {
+      onThrottleRequired: null,
+      onPerformanceAlert: null,
+      onStatsUpdate: null
+    };
+    
+    this.monitoringInterval = null;
+    this.dataBuffer = null;
+    this.startTime = Date.now();
+    this.webVitalsUnsubscribers = [];
+    this.performanceObserver = null;
+  }
+
+  init(dataBuffer, callbacks = {}) {
+    this.dataBuffer = dataBuffer;
+    this.callbacks = { ...this.callbacks, ...callbacks };
+    
+    // Just prepare for monitoring, don't start yet (lazy loading)
+    console.log('[PerformanceMonitor] Initialized (lazy mode - not started)');
+    return true;
+  }
+
+  startMonitoring() {
+    if (this.isMonitoring) {
+      console.log('[PerformanceMonitor] Already monitoring');
+      return;
+    }
+    
+    this.isMonitoring = true;
+    this.startTime = Date.now();
+    
+    // Start Web Vitals collection
+    this.startWebVitalsCollection();
+    
+    // Start resource monitoring
+    if (performance && performance.memory) {
+      this.startResourceMonitoring();
+      console.log('[PerformanceMonitor] Started with full performance tracking');
+    } else {
+      console.warn('[PerformanceMonitor] Performance API not available, using basic monitoring');
+      this.startBasicMonitoring();
+    }
+  }
+
+  startWebVitalsCollection() {
+    // Check if web-vitals library is available
+    if (typeof webVitals !== 'undefined') {
+      console.log('[PerformanceMonitor] Using web-vitals library');
+      
+      // Track LCP
+      if (webVitals.onLCP) {
+        const unsubscribeLCP = webVitals.onLCP((metric) => {
+          this.stats.lcp = metric.value;
+          console.log('[Web Vitals] LCP:', metric.value);
+          this.checkWebVitalsThresholds('lcp', metric.value);
+        });
+        this.webVitalsUnsubscribers.push(unsubscribeLCP);
+      }
+      
+      // Track CLS
+      if (webVitals.onCLS) {
+        const unsubscribeCLS = webVitals.onCLS((metric) => {
+          this.stats.cls = metric.value;
+          console.log('[Web Vitals] CLS:', metric.value);
+          this.checkWebVitalsThresholds('cls', metric.value);
+        });
+        this.webVitalsUnsubscribers.push(unsubscribeCLS);
+      }
+      
+      // Track FID
+      if (webVitals.onFID) {
+        const unsubscribeFID = webVitals.onFID((metric) => {
+          this.stats.fid = metric.value;
+          console.log('[Web Vitals] FID:', metric.value);
+        });
+        this.webVitalsUnsubscribers.push(unsubscribeFID);
+      }
+      
+      // Track INP
+      if (webVitals.onINP) {
+        const unsubscribeINP = webVitals.onINP((metric) => {
+          this.stats.inp = metric.value;
+          console.log('[Web Vitals] INP:', metric.value);
+          this.checkWebVitalsThresholds('inp', metric.value);
+        });
+        this.webVitalsUnsubscribers.push(unsubscribeINP);
+      }
+      
+      // Track TTFB
+      if (webVitals.onTTFB) {
+        const unsubscribeTTFB = webVitals.onTTFB((metric) => {
+          this.stats.ttfb = metric.value;
+          console.log('[Web Vitals] TTFB:', metric.value);
+        });
+        this.webVitalsUnsubscribers.push(unsubscribeTTFB);
+      }
+    } else {
+      console.log('[PerformanceMonitor] web-vitals not available, using fallback PerformanceObserver');
+      this.startPerformanceObserverFallback();
+    }
+  }
+
+  startPerformanceObserverFallback() {
+    // Fallback implementation using PerformanceObserver
+    if (typeof PerformanceObserver === 'undefined') {
+      console.warn('[PerformanceMonitor] PerformanceObserver not available');
+      return;
+    }
+    
+    try {
+      // Observe paint entries (includes LCP)
+      const paintObserver = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.entryType === 'largest-contentful-paint') {
+            this.stats.lcp = entry.startTime;
+            console.log('[Fallback] LCP:', entry.startTime);
+          }
+        }
+      });
+      
+      // Try to observe paint entries
+      try {
+        paintObserver.observe({ entryTypes: ['largest-contentful-paint'] });
+        this.performanceObserver = paintObserver;
+      } catch (e) {
+        console.warn('[PerformanceMonitor] Could not observe LCP:', e);
+      }
+      
+      // Note: CLS and other metrics are complex to implement correctly without web-vitals
+      console.warn('[PerformanceMonitor] Using fallback - some metrics may be less accurate');
+    } catch (error) {
+      console.error('[PerformanceMonitor] Failed to create PerformanceObserver:', error);
+    }
+  }
+
+  startResourceMonitoring() {
+    // Monitor every 2 seconds
+    this.monitoringInterval = setInterval(() => {
+      this.updateResourceStats();
+      this.checkResourceThresholds();
+    }, 2000);
+    
+    // Initial update
+    this.updateResourceStats();
+  }
+
+  startBasicMonitoring() {
+    // Basic monitoring without performance.memory
+    this.monitoringInterval = setInterval(() => {
+      this.updateBasicStats();
+      this.checkBasicThresholds();
+    }, 5000);
+    
+    // Initial update
+    this.updateBasicStats();
+  }
+
+  async updateResourceStats() {
+    const now = Date.now();
+    const timeDelta = (now - this.stats.lastCheck) / 1000; // seconds
+    
+    // CPU Usage (estimated from script execution time)
+    const startTime = performance.now();
+    this.simulateWork(); // Small workload to measure responsiveness
+    const executionTime = performance.now() - startTime;
+    this.stats.cpuUsage = Math.min(100, (executionTime / 10) * 100); // Rough estimate
+    
+    // Memory Usage
+    if (performance.memory) {
+      this.stats.memoryUsage = performance.memory.usedJSHeapSize;
+    }
+    
+    // Data Buffer Stats
+    if (this.dataBuffer) {
+      const bufferStats = await this.dataBuffer.getStats();
+      const newEventCount = bufferStats.eventCount;
+      const newDataVolume = bufferStats.totalSize;
+      
+      // Calculate rates
+      this.stats.eventRate = (newEventCount - this.stats.eventCount) / timeDelta;
+      this.stats.dataRate = (newDataVolume - this.stats.dataVolume) / timeDelta;
+      
+      this.stats.eventCount = newEventCount;
+      this.stats.dataVolume = newDataVolume;
+      this.stats.bufferSize = bufferStats.totalSize;
+      this.stats.bufferUtilization = (bufferStats.totalSize / bufferStats.maxSize) * 100;
+    }
+    
+    this.stats.lastCheck = now;
+    
+    // Notify callbacks
+    if (this.callbacks.onStatsUpdate) {
+      this.callbacks.onStatsUpdate(this.getPublicStats());
+    }
+  }
+
+  updateBasicStats() {
+    const now = Date.now();
+    
+    // Basic stats without performance.memory
+    if (this.dataBuffer) {
+      this.dataBuffer.getStats().then(bufferStats => {
+        this.stats.eventCount = bufferStats.eventCount;
+        this.stats.dataVolume = bufferStats.totalSize;
+        this.stats.bufferSize = bufferStats.totalSize;
+        this.stats.bufferUtilization = (bufferStats.totalSize / bufferStats.maxSize) * 100;
+        
+        if (this.callbacks.onStatsUpdate) {
+          this.callbacks.onStatsUpdate(this.getPublicStats());
+        }
+      });
+    }
+    
+    this.stats.lastCheck = now;
+  }
+
+  simulateWork() {
+    // Small computational task to measure responsiveness
+    let sum = 0;
+    for (let i = 0; i < 1000; i++) {
+      sum += Math.random();
+    }
+    return sum;
+  }
+
+  checkWebVitalsThresholds(metric, value) {
+    const alerts = [];
+    
+    if (metric === 'lcp' && value > this.thresholds.lcp) {
+      alerts.push({
+        type: 'webvitals',
+        severity: 'medium',
+        message: `Poor LCP: ${value.toFixed(0)}ms (threshold: ${this.thresholds.lcp}ms)`,
+        recommendation: 'Optimize largest content paint performance'
+      });
+    }
+    
+    if (metric === 'cls' && value > this.thresholds.cls) {
+      alerts.push({
+        type: 'webvitals',
+        severity: 'medium',
+        message: `Poor CLS: ${value.toFixed(3)} (threshold: ${this.thresholds.cls})`,
+        recommendation: 'Reduce layout shifts during page load'
+      });
+    }
+    
+    if (metric === 'inp' && value > this.thresholds.inp) {
+      alerts.push({
+        type: 'webvitals',
+        severity: 'medium',
+        message: `Poor INP: ${value.toFixed(0)}ms (threshold: ${this.thresholds.inp}ms)`,
+        recommendation: 'Improve interaction responsiveness'
+      });
+    }
+    
+    if (alerts.length > 0 && this.callbacks.onPerformanceAlert) {
+      this.callbacks.onPerformanceAlert(alerts);
+    }
+  }
+
+  checkResourceThresholds() {
+    const alerts = [];
+    
+    // CPU threshold
+    if (this.stats.cpuUsage > this.thresholds.cpuUsage) {
+      alerts.push({
+        type: 'cpu',
+        severity: 'high',
+        message: `High CPU usage: ${this.stats.cpuUsage.toFixed(1)}%`,
+        recommendation: 'Consider reducing instrumentation level'
+      });
+    }
+    
+    // Memory threshold
+    if (this.stats.memoryUsage > this.thresholds.memoryUsage) {
+      alerts.push({
+        type: 'memory',
+        severity: 'high',
+        message: `High memory usage: ${(this.stats.memoryUsage / 1024 / 1024).toFixed(1)}MB`,
+        recommendation: 'Buffer may need to be cleared'
+      });
+    }
+    
+    // Data rate threshold
+    if (this.stats.dataRate > this.thresholds.dataVolumePerSecond) {
+      alerts.push({
+        type: 'dataRate',
+        severity: 'medium',
+        message: `High data rate: ${(this.stats.dataRate / 1024).toFixed(1)}KB/s`,
+        recommendation: 'Consider reducing capture frequency'
+      });
+    }
+    
+    // Event rate threshold
+    if (this.stats.eventRate > this.thresholds.eventCountPerSecond) {
+      alerts.push({
+        type: 'eventRate',
+        severity: 'medium',
+        message: `High event rate: ${this.stats.eventRate.toFixed(1)} events/s`,
+        recommendation: 'Consider filtering events or reducing instrumentation'
+      });
+    }
+    
+    // Buffer utilization
+    if (this.stats.bufferUtilization > 90) {
+      alerts.push({
+        type: 'buffer',
+        severity: 'high',
+        message: `Buffer nearly full: ${this.stats.bufferUtilization.toFixed(1)}%`,
+        recommendation: 'Force upload or clear buffer'
+      });
+    }
+    
+    // Send alerts
+    if (alerts.length > 0) {
+      this.handlePerformanceAlerts(alerts);
+    }
+  }
+
+  checkBasicThresholds() {
+    const alerts = [];
+    
+    // Only check buffer-related thresholds in basic mode
+    if (this.stats.bufferUtilization > 90) {
+      alerts.push({
+        type: 'buffer',
+        severity: 'high',
+        message: `Buffer nearly full: ${this.stats.bufferUtilization.toFixed(1)}%`,
+        recommendation: 'Force upload or clear buffer'
+      });
+    }
+    
+    if (alerts.length > 0) {
+      this.handlePerformanceAlerts(alerts);
+    }
+  }
+
+  handlePerformanceAlerts(alerts) {
+    console.warn('[PerformanceMonitor] Performance alerts:', JSON.stringify(alerts, null, 2));
+    
+    // Check if throttling is required
+    const highSeverityAlerts = alerts.filter(a => a.severity === 'high');
+    if (highSeverityAlerts.length > 0 && this.callbacks.onThrottleRequired) {
+      this.callbacks.onThrottleRequired(highSeverityAlerts);
+    }
+    
+    // Send all alerts to callback
+    if (this.callbacks.onPerformanceAlert) {
+      this.callbacks.onPerformanceAlert(alerts);
+    }
+  }
+
+  getPublicStats() {
+    const uptime = (Date.now() - this.startTime) / 1000;
+    
+    return {
+      ...this.stats,
+      uptime: uptime,
+      averageEventRate: this.stats.eventCount / uptime,
+      averageDataRate: this.stats.dataVolume / uptime,
+      memoryUsageMB: this.stats.memoryUsage ? (this.stats.memoryUsage / 1024 / 1024).toFixed(2) : 'N/A',
+      dataVolumeMB: (this.stats.dataVolume / 1024 / 1024).toFixed(2),
+      isHealthy: this.isPerformanceHealthy(),
+      webVitals: {
+        lcp: this.stats.lcp,
+        cls: this.stats.cls,
+        fid: this.stats.fid,
+        inp: this.stats.inp,
+        ttfb: this.stats.ttfb
+      }
+    };
+  }
+
+  isPerformanceHealthy() {
+    return (
+      this.stats.cpuUsage < this.thresholds.cpuUsage &&
+      this.stats.memoryUsage < this.thresholds.memoryUsage &&
+      this.stats.bufferUtilization < 80 &&
+      (this.stats.lcp === null || this.stats.lcp < this.thresholds.lcp) &&
+      (this.stats.cls === null || this.stats.cls < this.thresholds.cls)
+    );
+  }
+
+  recordEvent(eventType, data) {
+    // Record custom performance events
+    if (performance.mark) {
+      performance.mark(`chromepilot-${eventType}-${Date.now()}`);
+    }
+    
+    // Track event-specific metrics
+    switch (eventType) {
+      case 'dom_mutation':
+        this.stats.domMutationCount = (this.stats.domMutationCount || 0) + 1;
+        break;
+      case 'function_call':
+        this.stats.functionCallCount = (this.stats.functionCallCount || 0) + 1;
+        break;
+      case 'network_request':
+        this.stats.networkRequestCount = (this.stats.networkRequestCount || 0) + 1;
+        break;
+    }
+  }
+
+  getRecommendations() {
+    const recommendations = [];
+    
+    if (this.stats.cpuUsage > 60) {
+      recommendations.push({
+        type: 'instrumentation',
+        message: 'Reduce instrumentation level to improve performance',
+        action: 'lower_level'
+      });
+    }
+    
+    if (this.stats.bufferUtilization > 70) {
+      recommendations.push({
+        type: 'buffer',
+        message: 'Force upload data to free buffer space',
+        action: 'force_upload'
+      });
+    }
+    
+    if (this.stats.eventRate > 50) {
+      recommendations.push({
+        type: 'filtering',
+        message: 'Add event filtering to reduce data volume',
+        action: 'add_filters'
+      });
+    }
+    
+    // Web Vitals recommendations
+    if (this.stats.lcp > this.thresholds.lcp) {
+      recommendations.push({
+        type: 'performance',
+        message: 'LCP is poor - optimize largest content paint',
+        action: 'optimize_lcp'
+      });
+    }
+    
+    if (this.stats.cls > this.thresholds.cls) {
+      recommendations.push({
+        type: 'performance',
+        message: 'CLS is poor - reduce layout shifts',
+        action: 'reduce_cls'
+      });
+    }
+    
+    return recommendations;
+  }
+
+  setThresholds(newThresholds) {
+    this.thresholds = { ...this.thresholds, ...newThresholds };
+    console.log('[PerformanceMonitor] Updated thresholds:', this.thresholds);
+  }
+
+  stopMonitoring() {
+    if (!this.isMonitoring) {
+      console.log('[PerformanceMonitor] Not currently monitoring');
+      return;
+    }
+    
+    // Stop resource monitoring interval
+    if (this.monitoringInterval) {
+      clearInterval(this.monitoringInterval);
+      this.monitoringInterval = null;
+    }
+    
+    // Cleanup web-vitals observers
+    if (this.webVitalsUnsubscribers.length > 0) {
+      this.webVitalsUnsubscribers.forEach(unsubscribe => {
+        if (typeof unsubscribe === 'function') {
+          unsubscribe();
+        }
+      });
+      this.webVitalsUnsubscribers = [];
+      console.log('[PerformanceMonitor] Web Vitals observers cleaned up');
+    }
+    
+    // Cleanup PerformanceObserver fallback
+    if (this.performanceObserver) {
+      this.performanceObserver.disconnect();
+      this.performanceObserver = null;
+      console.log('[PerformanceMonitor] PerformanceObserver cleaned up');
+    }
+    
+    this.isMonitoring = false;
+    console.log('[PerformanceMonitor] Stopped monitoring');
+  }
+
+  destroy() {
+    this.stopMonitoring();
+    this.callbacks = {};
+    this.dataBuffer = null;
+    console.log('[PerformanceMonitor] Destroyed');
+  }
+}
+
+// Export for use in content and background scripts
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = PerformanceMonitor;
+}