@therealtinhtute/baroiplayer 1.0.0

package/src/core/performance/performance-monitor.tsx

@@ -0,0 +1,476 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+// Import type safely with fallback
+type ReportHandler = (metric: { name: string; value: number }) => void;
+
+// Performance metrics types
+export interface PerformanceMetrics {
+  // Core Web Vitals
+  lcp?: number; // Largest Contentful Paint
+  fid?: number; // First Input Delay  
+  cls?: number; // Cumulative Layout Shift
+  fcp?: number; // First Contentful Paint
+  ttfb?: number; // Time to First Byte
+  inp?: number; // Interaction to Next Paint
+
+  // Custom metrics
+  componentRenderTime: number;
+  bundleLoadTime: number;
+  mediaLoadTime: number;
+  memoryUsage: number;
+  
+  // Performance scores
+  performanceScore: number;
+  timestamp: number;
+}
+
+export interface PerformanceThresholds {
+  lcp: { good: number; poor: number };
+  fid: { good: number; poor: number };
+  cls: { good: number; poor: number };
+  renderTime: { good: number; poor: number };
+  memoryUsage: { good: number; poor: number };
+}
+
+export const defaultThresholds: PerformanceThresholds = {
+  lcp: { good: 2500, poor: 4000 },
+  fid: { good: 100, poor: 300 },
+  cls: { good: 0.1, poor: 0.25 },
+  renderTime: { good: 16, poor: 100 }, // Target 60fps = 16.67ms per frame
+  memoryUsage: { good: 50 * 1024 * 1024, poor: 100 * 1024 * 1024 } // 50MB good, 100MB poor
+};
+
+// Performance monitoring class
+export class PerformanceMonitor {
+  private metrics: PerformanceMetrics[] = [];
+  private listeners: Set<(metrics: PerformanceMetrics) => void> = new Set();
+  private thresholds: PerformanceThresholds;
+  private observer?: PerformanceObserver;
+  private isMonitoring = false;
+
+  constructor(thresholds: PerformanceThresholds = defaultThresholds) {
+    this.thresholds = thresholds;
+    this.initializeWebVitals();
+    this.initializePerformanceObserver();
+  }
+
+  private async initializeWebVitals() {
+    if (typeof window === 'undefined') return;
+    
+    try {
+      // Try to import web-vitals dynamically and handle different versions
+      const webVitals = await import('web-vitals').catch(() => null);
+      
+      if (!webVitals) {
+        console.warn('web-vitals package not available, Core Web Vitals tracking disabled');
+        return;
+      }
+      
+      const reportHandler: ReportHandler = (metric) => {
+        this.updateMetric(metric.name.toLowerCase() as keyof PerformanceMetrics, metric.value);
+      };
+
+      // Handle different web-vitals versions safely
+      const vitalsAny = webVitals as any;
+      if (vitalsAny.getCLS) vitalsAny.getCLS(reportHandler);
+      if (vitalsAny.getFID) vitalsAny.getFID(reportHandler);
+      if (vitalsAny.getFCP) vitalsAny.getFCP(reportHandler);
+      if (vitalsAny.getLCP) vitalsAny.getLCP(reportHandler);
+      if (vitalsAny.getTTFB) vitalsAny.getTTFB(reportHandler);
+      if (vitalsAny.onINP) vitalsAny.onINP(reportHandler);
+    } catch (error) {
+      console.warn('Web Vitals initialization failed:', error);
+    }
+  }
+
+  private initializePerformanceObserver() {
+    if (typeof window === 'undefined' || !('PerformanceObserver' in window)) return;
+
+    try {
+      this.observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          this.handlePerformanceEntry(entry);
+        }
+      });
+
+      this.observer.observe({ entryTypes: ['measure', 'navigation', 'resource', 'paint'] });
+    } catch (error) {
+      console.warn('PerformanceObserver not supported:', error);
+    }
+  }
+
+  private handlePerformanceEntry(entry: PerformanceEntry) {
+    switch (entry.entryType) {
+      case 'measure':
+        if (entry.name.startsWith('baroiplayer-render')) {
+          this.updateMetric('componentRenderTime', entry.duration);
+        }
+        break;
+        
+      case 'resource':
+        if (entry.name.includes('.js') || entry.name.includes('.css')) {
+          this.updateMetric('bundleLoadTime', entry.duration);
+        }
+        break;
+        
+      case 'paint':
+        if (entry.name === 'first-contentful-paint') {
+          this.updateMetric('fcp', entry.startTime);
+        }
+        break;
+    }
+  }
+
+  private updateMetric(key: keyof PerformanceMetrics, value: number) {
+    const currentMetrics = this.getCurrentMetrics();
+    const updatedMetrics = {
+      ...currentMetrics,
+      [key]: value,
+      timestamp: Date.now(),
+      performanceScore: this.calculatePerformanceScore({ ...currentMetrics, [key]: value })
+    };
+
+    this.metrics.push(updatedMetrics);
+    
+    // Keep only last 100 metrics
+    if (this.metrics.length > 100) {
+      this.metrics = this.metrics.slice(-100);
+    }
+
+    this.listeners.forEach(listener => listener(updatedMetrics));
+  }
+
+  private getCurrentMetrics(): PerformanceMetrics {
+    const latest = this.metrics[this.metrics.length - 1];
+    return latest || {
+      componentRenderTime: 0,
+      bundleLoadTime: 0,
+      mediaLoadTime: 0,
+      memoryUsage: this.getMemoryUsage(),
+      performanceScore: 0,
+      timestamp: Date.now()
+    };
+  }
+
+  private getMemoryUsage(): number {
+    if ('memory' in performance) {
+      return (performance as any).memory.usedJSHeapSize || 0;
+    }
+    return 0;
+  }
+
+  private calculatePerformanceScore(metrics: PerformanceMetrics): number {
+    let score = 100;
+    
+    // Penalize based on thresholds
+    if (metrics.lcp && metrics.lcp > this.thresholds.lcp.good) {
+      score -= metrics.lcp > this.thresholds.lcp.poor ? 30 : 15;
+    }
+    
+    if (metrics.fid && metrics.fid > this.thresholds.fid.good) {
+      score -= metrics.fid > this.thresholds.fid.poor ? 25 : 10;
+    }
+    
+    if (metrics.cls && metrics.cls > this.thresholds.cls.good) {
+      score -= metrics.cls > this.thresholds.cls.poor ? 20 : 10;
+    }
+    
+    if (metrics.componentRenderTime > this.thresholds.renderTime.good) {
+      score -= metrics.componentRenderTime > this.thresholds.renderTime.poor ? 20 : 10;
+    }
+    
+    if (metrics.memoryUsage > this.thresholds.memoryUsage.good) {
+      score -= metrics.memoryUsage > this.thresholds.memoryUsage.poor ? 15 : 5;
+    }
+
+    return Math.max(0, score);
+  }
+
+  // Public API
+  public startMonitoring() {
+    this.isMonitoring = true;
+    this.startMemoryMonitoring();
+  }
+
+  public stopMonitoring() {
+    this.isMonitoring = false;
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  private startMemoryMonitoring() {
+    if (!this.isMonitoring) return;
+    
+    this.updateMetric('memoryUsage', this.getMemoryUsage());
+    setTimeout(() => this.startMemoryMonitoring(), 5000); // Check every 5 seconds
+  }
+
+  public measureComponentRender(componentName: string, renderFn: () => any): any {
+    const startMark = `baroiplayer-render-${componentName}-start`;
+    const endMark = `baroiplayer-render-${componentName}-end`;
+    const measureName = `baroiplayer-render-${componentName}`;
+
+    performance.mark(startMark);
+    const result = renderFn();
+    performance.mark(endMark);
+    
+    try {
+      performance.measure(measureName, startMark, endMark);
+    } catch (error) {
+      console.warn('Performance measurement failed:', error);
+    }
+
+    return result;
+  }
+
+  public subscribe(listener: (metrics: PerformanceMetrics) => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  public getLatestMetrics(): PerformanceMetrics | null {
+    return this.metrics[this.metrics.length - 1] || null;
+  }
+
+  public getAllMetrics(): PerformanceMetrics[] {
+    return [...this.metrics];
+  }
+
+  public getAverageMetrics(count = 10): Partial<PerformanceMetrics> {
+    const recentMetrics = this.metrics.slice(-count);
+    if (recentMetrics.length === 0) return {};
+
+    const averages: Partial<PerformanceMetrics> = {};
+    const keys: Array<keyof PerformanceMetrics> = [
+      'lcp', 'fid', 'cls', 'fcp', 'ttfb', 'inp',
+      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime',
+      'memoryUsage', 'performanceScore'
+    ];
+
+    keys.forEach(key => {
+      const values = recentMetrics
+        .map(m => m[key] as number)
+        .filter(v => typeof v === 'number' && !isNaN(v));
+      
+      if (values.length > 0) {
+        (averages as any)[key] = values.reduce((sum, v) => sum + v, 0) / values.length;
+      }
+    });
+
+    return averages;
+  }
+
+  public getThresholds(): PerformanceThresholds {
+    return this.thresholds;
+  }
+
+  public updateThresholds(newThresholds: Partial<PerformanceThresholds>) {
+    this.thresholds = { ...this.thresholds, ...newThresholds };
+  }
+}
+
+// Global performance monitor instance
+export const performanceMonitor = new PerformanceMonitor();
+
+// React hook for performance monitoring
+export function usePerformanceMonitor() {
+  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
+  const [isSupported, setIsSupported] = useState(true);
+
+  useEffect(() => {
+    setIsSupported(typeof window !== 'undefined' && 'performance' in window);
+    
+    if (!isSupported) return;
+
+    performanceMonitor.startMonitoring();
+    const unsubscribe = performanceMonitor.subscribe(setMetrics);
+
+    return () => {
+      unsubscribe();
+      performanceMonitor.stopMonitoring();
+    };
+  }, [isSupported]);
+
+  const measureRender = useCallback(
+    (componentName: string, renderFn: () => any): any => {
+      return performanceMonitor.measureComponentRender(componentName, renderFn);
+    },
+    []
+  );
+
+  return {
+    metrics,
+    isSupported,
+    measureRender,
+    averageMetrics: performanceMonitor.getAverageMetrics(),
+    allMetrics: performanceMonitor.getAllMetrics(),
+    thresholds: performanceMonitor.getThresholds()
+  };
+}
+
+// HOC for performance monitoring
+export function withPerformanceMonitoring(
+  WrappedComponent: React.ComponentType<any>,
+  componentName?: string
+) {
+  const displayName = componentName || WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  
+  function PerformanceMonitoredComponent(props: any) {
+    const renderRef = useRef(0);
+    const { measureRender } = usePerformanceMonitor();
+
+    return measureRender(`${displayName}-${renderRef.current++}`, () => (
+      <WrappedComponent {...props} />
+    ));
+  }
+
+  PerformanceMonitoredComponent.displayName = `withPerformanceMonitoring(${displayName})`;
+  return PerformanceMonitoredComponent;
+}
+
+// Performance regression detector
+export class PerformanceRegressionDetector {
+  private baselineMetrics: PerformanceMetrics | null = null;
+  private regressionThreshold = 0.2; // 20% degradation threshold
+
+  setBaseline(metrics: PerformanceMetrics) {
+    this.baselineMetrics = metrics;
+  }
+
+  detectRegression(currentMetrics: PerformanceMetrics): Array<{
+    metric: keyof PerformanceMetrics;
+    baseline: number;
+    current: number;
+    degradation: number;
+  }> {
+    if (!this.baselineMetrics) return [];
+
+    const regressions: Array<{
+      metric: keyof PerformanceMetrics;
+      baseline: number;
+      current: number;
+      degradation: number;
+    }> = [];
+
+    const metricsToCheck: Array<keyof PerformanceMetrics> = [
+      'componentRenderTime', 'bundleLoadTime', 'mediaLoadTime', 'memoryUsage'
+    ];
+
+    metricsToCheck.forEach(metric => {
+      const baseline = this.baselineMetrics![metric] as number;
+      const current = currentMetrics[metric] as number;
+      
+      if (baseline && current && baseline > 0) {
+        const degradation = (current - baseline) / baseline;
+        if (degradation > this.regressionThreshold) {
+          regressions.push({ metric, baseline, current, degradation });
+        }
+      }
+    });
+
+    return regressions;
+  }
+
+  setRegressionThreshold(threshold: number) {
+    this.regressionThreshold = Math.max(0, Math.min(1, threshold));
+  }
+}
+
+// Development dashboard component
+export interface PerformanceDashboardProps {
+  className?: string;
+  showAdvanced?: boolean;
+}
+
+export function PerformanceDashboard({ 
+  className = '', 
+  showAdvanced = false 
+}: PerformanceDashboardProps) {
+  const { metrics, averageMetrics, thresholds, isSupported } = usePerformanceMonitor();
+
+  if (!isSupported || !metrics) {
+    return (
+      <div className={`performance-dashboard ${className}`}>
+        <p>Performance monitoring not supported in this environment</p>
+      </div>
+    );
+  }
+
+  const getScoreColor = (score: number) => {
+    if (score >= 90) return 'text-green-600';
+    if (score >= 70) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  const formatBytes = (bytes: number) => {
+    return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+  };
+
+  return (
+    <div className={`performance-dashboard rounded-lg bg-white p-4 shadow ${className}`}>
+      <h3 className="mb-4 font-semibold text-lg">Performance Dashboard</h3>
+      
+      {/* Performance Score */}
+      <div className="mb-4">
+        <div className="flex items-center justify-between">
+          <span>Performance Score</span>
+          <span className={`font-bold ${getScoreColor(metrics.performanceScore)}`}>
+            {metrics.performanceScore.toFixed(0)}
+          </span>
+        </div>
+        <div className="mt-1 h-2 w-full rounded-full bg-gray-200">
+          <div 
+            className={`h-2 rounded-full transition-all duration-300 ${
+              metrics.performanceScore >= 90 ? 'bg-green-500' :
+              metrics.performanceScore >= 70 ? 'bg-yellow-500' : 'bg-red-500'
+            }`}
+            style={{ width: `${metrics.performanceScore}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Core Web Vitals */}
+      <div className="mb-4 grid grid-cols-2 gap-4">
+        <div>
+          <h4 className="mb-2 font-medium">Core Web Vitals</h4>
+          <div className="space-y-1 text-sm">
+            {metrics.lcp && (
+              <div>LCP: {metrics.lcp.toFixed(0)}ms</div>
+            )}
+            {metrics.fid && (
+              <div>FID: {metrics.fid.toFixed(0)}ms</div>
+            )}
+            {metrics.cls && (
+              <div>CLS: {metrics.cls.toFixed(3)}</div>
+            )}
+          </div>
+        </div>
+        
+        <div>
+          <h4 className="mb-2 font-medium">Custom Metrics</h4>
+          <div className="space-y-1 text-sm">
+            <div>Render: {metrics.componentRenderTime.toFixed(2)}ms</div>
+            <div>Memory: {formatBytes(metrics.memoryUsage)}</div>
+            {metrics.bundleLoadTime > 0 && (
+              <div>Bundle: {metrics.bundleLoadTime.toFixed(0)}ms</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Advanced metrics */}
+      {showAdvanced && (
+        <div>
+          <h4 className="mb-2 font-medium">Advanced Metrics</h4>
+          <div className="space-y-1 text-sm">
+            <div>Average Render Time: {(averageMetrics.componentRenderTime || 0).toFixed(2)}ms</div>
+            <div>Average Memory: {formatBytes(averageMetrics.memoryUsage || 0)}</div>
+            <div>Average Score: {(averageMetrics.performanceScore || 0).toFixed(0)}</div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PerformanceMonitor;