@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/utils/performance-monitor.esm.js

@@ -0,0 +1,472 @@
+// Performance monitoring utilities for tracking various metrics
+export interface PerformanceMetric {
+  name;
+  value;
+  unit;
+  timestamp;
+  metadata?, any>;
+}
+
+export interface PerformanceThreshold {
+  name;
+  warning;
+  critical;
+  unit;
+}
+
+export interface PerformanceReport {
+  metrics];
+  thresholds];
+  violations;
+    value;
+    threshold;
+    severity;
+  }>;
+  summary;
+    warnings;
+    criticals;
+    averagePerformance;
+  };
+  timestamp;
+}
+
+export interface PerformanceMonitorConfig {
+  enabled;
+  autoCollect;
+  collectionInterval;
+  maxMetrics;
+  thresholds];
+  enableWebVitals;
+  enableMemoryMonitoring;
+  enableNetworkMonitoring;
+}
+
+export class PerformanceMonitor {
+  private config;
+  private metrics];
+  private thresholds, PerformanceThreshold>;
+  private observers, PerformanceObserver>;
+  private collectionTimer;
+  private startTime;
+
+  constructor(config= {
+    enabled,
+    autoCollect,
+    collectionInterval, // 5 seconds
+    maxMetrics,
+    thresholds],
+    enableWebVitals,
+    enableMemoryMonitoring,
+    enableNetworkMonitoring}) {
+    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()] = [
+      { name, warning, critical, unit},
+      { name, warning, critical, unit},
+      { name, warning, critical, unit},
+      { name, warning, critical, unit},
+      { name, warning, critical, unit},
+      { name, warning, critical, unit}
+    ];
+
+    defaultThresholds.forEach(threshold => {
+      this.thresholds.set(threshold.name, threshold);
+    });
+  }
+
+  // Set up Web Vitals observer
+  private setupWebVitalsObserver())) return;
+
+    try {
+      // First Contentful Paint
+      const fcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          this.recordMetric('firstContentfulPaint', entry.startTime, 'ms', {
+            entryType,
+            name});
+        });
+      });
+      fcpObserver.observe({ entryTypes] });
+
+      // Largest Contentful Paint
+      const lcpObserver = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        entries.forEach(entry => {
+          this.recordMetric('largestContentfulPaint', entry.startTime, 'ms', {
+            entryType,
+            name});
+        });
+      });
+      lcpObserver.observe({ entryTypes] });
+
+      // 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,
+              name});
+          }
+        });
+      });
+      fidObserver.observe({ entryTypes] });
+
+      // 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,
+              name});
+          }
+        });
+      });
+      clsObserver.observe({ entryTypes] });
+
+      this.observers.set('webVitals', fcpObserver);
+    } catch (error) {
+      console.warn('Failed to set up Web Vitals observer, error);
+    }
+  }
+
+  // Record a performance metric
+  recordMetric(name, value, unit, metadata?, any>)) return;
+
+    const metric= {
+      name,
+      value,
+      unit,
+      timestamp),
+      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)= 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, threshold, severity)= new CustomEvent('performanceThresholdViolation', {
+      detail,
+        value,
+        threshold],
+        severity,
+        unit,
+        timestamp}
+    });
+
+    window.dispatchEvent(event);
+
+    // Log to console
+    const logMethod = severity === 'critical' ? 'error' ;
+    console[logMethod](`Performance ${severity}} = ${metric.value}${metric.unit} (threshold]}${threshold.unit})`);
+  }
+
+  // Measure theme switch performance
+  measureThemeSwitch(callback) => void)= 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)= 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>)= performance.now();
+    return callback().then(() => {
+      const endTime = performance.now();
+      const duration = endTime - startTime;
+      this.recordMetric('bundleLoadTime', duration, 'ms');
+      return duration;
+    });
+  }
+
+  // Measure memory usage
+  measureMemoryUsage())) {
+      return null;
+    }
+
+    const memory = (performance as any).memory;
+    const usedMB = memory.usedJSHeapSize / 1024 / 1024;
+    
+    this.recordMetric('memoryUsage', usedMB, 'MB', {
+      totalJSHeapSize,
+      jsHeapSizeLimit});
+
+    return usedMB;
+  }
+
+  // Measure network performance
+  measureNetworkPerformance())) 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()) 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()) {
+      clearInterval(this.collectionTimer);
+      this.collectionTimer = null;
+    }
+  }
+
+  // Collect custom metrics
+  private collectCustomMetrics()= 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)] {
+    return this.metrics.filter(metric => metric.name === name);
+  }
+
+  // Get latest metric by name
+  getLatestMetric(name)= this.getMetricsByName(name);
+    return metrics.length > 0 ? metrics[metrics.length - 1] ;
+  }
+
+  // Get metrics within time range
+  getMetricsInRange(startTime, endTime)] {
+    return this.metrics.filter(metric => 
+      metric.timestamp >= startTime && metric.timestamp <= endTime
+    );
+  }
+
+  // Calculate average for a metric
+  getAverageMetric(name, timeRange?; end})= 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();
+      value;
+      threshold;
+      severity;
+    }> = [];
+
+    // 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,
+            value,
+            threshold,
+            severity});
+        } else if (metric.value >= threshold.warning) {
+          violations.push({
+            metric,
+            value,
+            threshold,
+            severity});
+        }
+      }
+    });
+
+    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 
+      ;
+
+    return {
+      metrics],
+      thresholds)),
+      violations,
+      summary,
+        warnings,
+        criticals,
+        averagePerformance
+      },
+      timestamp)
+    };
+  }
+
+  // Add custom threshold
+  addThreshold(threshold), threshold);
+  }
+
+  // Remove threshold
+  removeThreshold(name));
+  }
+
+  // Clear all metrics
+  clearMetrics()= [];
+  }
+
+  // Export metrics to JSON
+  exportMetrics(),
+      metrics,
+      thresholds)),
+      report),
+      timestamp).toISOString()
+    }, null, 2);
+  }
+
+  // Get configuration
+  getConfig()};
+  }
+
+  // Update configuration
+  updateConfig(newConfig)= { ...this.config, ...newConfig };
+    
+    // Restart auto-collection if interval changed
+    if (newConfig.collectionInterval && this.collectionTimer) {
+      this.stopAutoCollection();
+      this.startAutoCollection();
+    }
+  }
+
+  // Cleanup resources
+  destroy());
+    
+    // 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,
+  operation) => Promise<T>,
+  monitor= performanceMonitor
+)= 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,
+  operation) => T,
+  monitor= performanceMonitor
+)= 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;
+  }
+}