@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.5

package/src/utils/performance-monitor.ts

@@ -0,0 +1,513 @@
+// Performance monitoring utilities for tracking various metrics
+export interface PerformanceMetric {
+  name: string;
+  value: number;
+  unit: string;
+  timestamp: number;
+  metadata?: Record<string, any>;
+}
+
+export interface PerformanceThreshold {
+  name: string;
+  warning: number;
+  critical: number;
+  unit: string;
+}
+
+export interface PerformanceReport {
+  metrics: PerformanceMetric[];
+  thresholds: PerformanceThreshold[];
+  violations: Array<{
+    metric: string;
+    value: number;
+    threshold: number;
+    severity: 'warning' | 'critical';
+  }>;
+  summary: {
+    totalMetrics: number;
+    warnings: number;
+    criticals: number;
+    averagePerformance: number;
+  };
+  timestamp: number;
+}
+
+export interface PerformanceMonitorConfig {
+  enabled: boolean;
+  autoCollect: boolean;
+  collectionInterval: number;
+  maxMetrics: number;
+  thresholds: PerformanceThreshold[];
+  enableWebVitals: boolean;
+  enableMemoryMonitoring: boolean;
+  enableNetworkMonitoring: boolean;
+}
+
+export class PerformanceMonitor {
+  private config: PerformanceMonitorConfig;
+  private metrics: PerformanceMetric[];
+  private thresholds: Map<string, PerformanceThreshold>;
+  private observers: Map<string, PerformanceObserver>;
+  private collectionTimer: NodeJS.Timeout | null;
+  private startTime: number;
+
+  constructor(config: PerformanceMonitorConfig = {
+    enabled: true,
+    autoCollect: true,
+    collectionInterval: 5000, // 5 seconds
+    maxMetrics: 1000,
+    thresholds: [],
+    enableWebVitals: true,
+    enableMemoryMonitoring: true,
+    enableNetworkMonitoring: true
+  }) {
+    this.config = config;
+    this.metrics = [];
+    this.thresholds = new Map();
+    this.observers = new Map();
+    this.collectionTimer = null;
+    this.startTime = Date.now();
+
+    // Initialize thresholds
+    this.config.thresholds.forEach(threshold => {
+      this.thresholds.set(threshold.name, threshold);
+    });
+
+    // Set up default thresholds if none provided
+    if (this.config.thresholds.length === 0) {
+      this.setupDefaultThresholds();
+    }
+
+    // Start auto-collection if enabled
+    if (this.config.autoCollect) {
+      this.startAutoCollection();
+    }
+
+    // Set up performance observers
+    if (this.config.enableWebVitals) {
+      this.setupWebVitalsObserver();
+    }
+  }
+
+  // Set up default performance thresholds
+  private setupDefaultThresholds(): void {
+    const defaultThresholds: PerformanceThreshold[] = [
+      { name: 'themeSwitchTime', warning: 100, critical: 300, unit: 'ms' },
+      { name: 'componentRenderTime', warning: 50, critical: 150, unit: 'ms' },
+      { name: 'bundleLoadTime', warning: 2000, critical: 5000, unit: 'ms' },
+      { name: 'memoryUsage', warning: 100, critical: 500, unit: 'MB' },
+      { name: 'firstContentfulPaint', warning: 1000, critical: 3000, unit: 'ms' },
+      { name: 'largestContentfulPaint', warning: 2500, critical: 4000, unit: 'ms' }
+    ];
+
+    defaultThresholds.forEach(threshold => {
+      this.thresholds.set(threshold.name, threshold);
+    });
+  }
+
+  // Set up Web Vitals observer
+  private setupWebVitalsObserver(): void {
+    if (!('PerformanceObserver' in window)) return;
+
+    try {
+      // First Contentful Paint
+      const fcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          this.recordMetric('firstContentfulPaint', entry.startTime, 'ms', {
+            entryType: entry.entryType,
+            name: entry.name
+          });
+        });
+      });
+      fcpObserver.observe({ entryTypes: ['paint'] });
+
+      // Largest Contentful Paint
+      const lcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          this.recordMetric('largestContentfulPaint', entry.startTime, 'ms', {
+            entryType: entry.entryType,
+            name: entry.name
+          });
+        });
+      });
+      lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
+
+      // First Input Delay
+      const fidObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          if ('processingStart' in entry) {
+            const fidEntry = entry as any;
+            this.recordMetric('firstInputDelay', fidEntry.processingStart - fidEntry.startTime, 'ms', {
+              entryType: entry.entryType,
+              name: entry.name
+            });
+          }
+        });
+      });
+      fidObserver.observe({ entryTypes: ['first-input'] });
+
+      // Cumulative Layout Shift
+      const clsObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          if ('value' in entry) {
+            const clsEntry = entry as any;
+            this.recordMetric('cumulativeLayoutShift', clsEntry.value, 'score', {
+              entryType: entry.entryType,
+              name: entry.name
+            });
+          }
+        });
+      });
+      clsObserver.observe({ entryTypes: ['layout-shift'] });
+
+      this.observers.set('webVitals', fcpObserver);
+    } catch (error) {
+      console.warn('Failed to set up Web Vitals observer:', error);
+    }
+  }
+
+  // Record a performance metric
+  recordMetric(name: string, value: number, unit: string, metadata?: Record<string, any>): void {
+    if (!this.config.enabled) return;
+
+    const metric: PerformanceMetric = {
+      name,
+      value,
+      unit,
+      timestamp: Date.now(),
+      metadata
+    };
+
+    this.metrics.push(metric);
+
+    // Enforce max metrics limit
+    if (this.metrics.length > this.config.maxMetrics) {
+      this.metrics = this.metrics.slice(-this.config.maxMetrics);
+    }
+
+    // Check thresholds and emit warnings
+    this.checkThresholds(metric);
+  }
+
+  // Check if a metric violates any thresholds
+  private checkThresholds(metric: PerformanceMetric): void {
+    const threshold = this.thresholds.get(metric.name);
+    if (!threshold) return;
+
+    if (metric.value >= threshold.critical) {
+      this.emitThresholdViolation(metric, threshold, 'critical');
+    } else if (metric.value >= threshold.warning) {
+      this.emitThresholdViolation(metric, threshold, 'warning');
+    }
+  }
+
+  // Emit threshold violation event
+  private emitThresholdViolation(metric: PerformanceMetric, threshold: PerformanceThreshold, severity: 'warning' | 'critical'): void {
+    const event = new CustomEvent('performanceThresholdViolation', {
+      detail: {
+        metric: metric.name,
+        value: metric.value,
+        threshold: threshold[severity],
+        severity,
+        unit: threshold.unit,
+        timestamp: metric.timestamp
+      }
+    });
+
+    window.dispatchEvent(event);
+
+    // Log to console
+    const logMethod = severity === 'critical' ? 'error' : 'warn';
+    console[logMethod](`Performance ${severity}: ${metric.name} = ${metric.value}${metric.unit} (threshold: ${threshold[severity]}${threshold.unit})`);
+  }
+
+  // Measure theme switch performance
+  measureThemeSwitch(callback: () => void): number {
+    const startTime = performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+
+    this.recordMetric('themeSwitchTime', duration, 'ms');
+    return duration;
+  }
+
+  // Measure component render performance
+  measureComponentRender(callback: () => void): number {
+    const startTime = performance.now();
+    callback();
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+
+    this.recordMetric('componentRenderTime', duration, 'ms');
+    return duration;
+  }
+
+  // Measure bundle load performance
+  measureBundleLoad(callback: () => Promise<any>): Promise<number> {
+    const startTime = performance.now();
+    return callback().then(() => {
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+      this.recordMetric('bundleLoadTime', duration, 'ms');
+      return duration;
+    });
+  }
+
+  // Measure memory usage
+  measureMemoryUsage(): number | null {
+    if (!this.config.enableMemoryMonitoring || !('memory' in performance)) {
+      return null;
+    }
+
+    const memory = (performance as any).memory;
+    const usedMB = memory.usedJSHeapSize / 1024 / 1024;
+    
+    this.recordMetric('memoryUsage', usedMB, 'MB', {
+      totalJSHeapSize: memory.totalJSHeapSize / 1024 / 1024,
+      jsHeapSizeLimit: memory.jsHeapSizeLimit / 1024 / 1024
+    });
+
+    return usedMB;
+  }
+
+  // Measure network performance
+  measureNetworkPerformance(): void {
+    if (!this.config.enableNetworkMonitoring || !('getEntriesByType' in performance)) return;
+
+    try {
+      const navigationEntries = performance.getEntriesByType('navigation');
+      if (navigationEntries.length > 0) {
+        const nav = navigationEntries[0] as PerformanceNavigationTiming;
+        
+        this.recordMetric('domContentLoaded', nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart, 'ms');
+        this.recordMetric('loadComplete', nav.loadEventEnd - nav.loadEventStart, 'ms');
+        this.recordMetric('domInteractive', nav.domInteractive - nav.fetchStart, 'ms');
+        this.recordMetric('firstByte', nav.responseStart - nav.fetchStart, 'ms');
+      }
+    } catch (error) {
+      console.warn('Failed to measure network performance:', error);
+    }
+  }
+
+  // Start automatic metric collection
+  startAutoCollection(): void {
+    if (this.collectionTimer) return;
+
+    this.collectionTimer = setInterval(() => {
+      // Collect memory usage
+      this.measureMemoryUsage();
+      
+      // Collect network performance
+      this.measureNetworkPerformance();
+      
+      // Collect custom metrics
+      this.collectCustomMetrics();
+    }, this.config.collectionInterval);
+  }
+
+  // Stop automatic metric collection
+  stopAutoCollection(): void {
+    if (this.collectionTimer) {
+      clearInterval(this.collectionTimer);
+      this.collectionTimer = null;
+    }
+  }
+
+  // Collect custom metrics
+  private collectCustomMetrics(): void {
+    // Record uptime
+    const uptime = Date.now() - this.startTime;
+    this.recordMetric('uptime', uptime, 'ms');
+
+    // Record metric count
+    this.recordMetric('metricCount', this.metrics.length, 'count');
+  }
+
+  // Get metrics by name
+  getMetricsByName(name: string): PerformanceMetric[] {
+    return this.metrics.filter(metric => metric.name === name);
+  }
+
+  // Get latest metric by name
+  getLatestMetric(name: string): PerformanceMetric | null {
+    const metrics = this.getMetricsByName(name);
+    return metrics.length > 0 ? metrics[metrics.length - 1] : null;
+  }
+
+  // Get metrics within time range
+  getMetricsInRange(startTime: number, endTime: number): PerformanceMetric[] {
+    return this.metrics.filter(metric => 
+      metric.timestamp >= startTime && metric.timestamp <= endTime
+    );
+  }
+
+  // Calculate average for a metric
+  getAverageMetric(name: string, timeRange?: { start: number; end: number }): number {
+    let metrics = this.getMetricsByName(name);
+    
+    if (timeRange) {
+      metrics = this.getMetricsInRange(timeRange.start, timeRange.end);
+    }
+
+    if (metrics.length === 0) return 0;
+
+    const sum = metrics.reduce((total, metric) => total + metric.value, 0);
+    return sum / metrics.length;
+  }
+
+  // Get performance report
+  getPerformanceReport(): PerformanceReport {
+    const violations: Array<{
+      metric: string;
+      value: number;
+      threshold: number;
+      severity: 'warning' | 'critical';
+    }> = [];
+
+    // Check all metrics against thresholds
+    this.metrics.forEach(metric => {
+      const threshold = this.thresholds.get(metric.name);
+      if (threshold) {
+        if (metric.value >= threshold.critical) {
+          violations.push({
+            metric: metric.name,
+            value: metric.value,
+            threshold: threshold.critical,
+            severity: 'critical'
+          });
+        } else if (metric.value >= threshold.warning) {
+          violations.push({
+            metric: metric.name,
+            value: metric.value,
+            threshold: threshold.warning,
+            severity: 'warning'
+          });
+        }
+      }
+    });
+
+    const warnings = violations.filter(v => v.severity === 'warning').length;
+    const criticals = violations.filter(v => v.severity === 'critical').length;
+    
+    // Calculate average performance (lower is better for time-based metrics)
+    const timeMetrics = this.metrics.filter(m => m.unit === 'ms');
+    const averagePerformance = timeMetrics.length > 0 
+      ? timeMetrics.reduce((sum, m) => sum + m.value, 0) / timeMetrics.length 
+      : 0;
+
+    return {
+      metrics: [...this.metrics],
+      thresholds: Array.from(this.thresholds.values()),
+      violations,
+      summary: {
+        totalMetrics: this.metrics.length,
+        warnings,
+        criticals,
+        averagePerformance
+      },
+      timestamp: Date.now()
+    };
+  }
+
+  // Add custom threshold
+  addThreshold(threshold: PerformanceThreshold): void {
+    this.thresholds.set(threshold.name, threshold);
+  }
+
+  // Remove threshold
+  removeThreshold(name: string): void {
+    this.thresholds.delete(name);
+  }
+
+  // Clear all metrics
+  clearMetrics(): void {
+    this.metrics = [];
+  }
+
+  // Export metrics to JSON
+  exportMetrics(): string {
+    return JSON.stringify({
+      config: this.config,
+      metrics: this.metrics,
+      thresholds: Array.from(this.thresholds.values()),
+      report: this.getPerformanceReport(),
+      timestamp: new Date().toISOString()
+    }, null, 2);
+  }
+
+  // Get configuration
+  getConfig(): PerformanceMonitorConfig {
+    return { ...this.config };
+  }
+
+  // Update configuration
+  updateConfig(newConfig: Partial<PerformanceMonitorConfig>): void {
+    this.config = { ...this.config, ...newConfig };
+    
+    // Restart auto-collection if interval changed
+    if (newConfig.collectionInterval && this.collectionTimer) {
+      this.stopAutoCollection();
+      this.startAutoCollection();
+    }
+  }
+
+  // Cleanup resources
+  destroy(): void {
+    this.stopAutoCollection();
+    
+    // Disconnect observers
+    this.observers.forEach(observer => {
+      observer.disconnect();
+    });
+    this.observers.clear();
+    
+    // Clear metrics
+    this.clearMetrics();
+  }
+}
+
+// Create and export default instance
+export const performanceMonitor = new PerformanceMonitor();
+
+// Utility function for measuring async operations
+export async function measureAsync<T>(
+  name: string,
+  operation: () => Promise<T>,
+  monitor: PerformanceMonitor = performanceMonitor
+): Promise<T> {
+  const startTime = performance.now();
+  try {
+    const result = await operation();
+    const duration = performance.now() - startTime;
+    monitor.recordMetric(name, duration, 'ms');
+    return result;
+  } catch (error) {
+    const duration = performance.now() - startTime;
+    monitor.recordMetric(name, duration, 'ms');
+    throw error;
+  }
+}
+
+// Utility function for measuring sync operations
+export function measureSync<T>(
+  name: string,
+  operation: () => T,
+  monitor: PerformanceMonitor = performanceMonitor
+): T {
+  const startTime = performance.now();
+  try {
+    const result = operation();
+    const duration = performance.now() - startTime;
+    monitor.recordMetric(name, duration, 'ms');
+    return result;
+  } catch (error) {
+    const duration = performance.now() - startTime;
+    monitor.recordMetric(name, duration, 'ms');
+    throw error;
+  }
+}