/** * @file Web Vitals Collection and Reporting System * @description Enterprise-grade Core Web Vitals collection with analytics integration, * performance budgets, and real-time monitoring capabilities. * * Targets: * - LCP: < 2500ms (good), < 4000ms (needs improvement) * - INP: < 200ms (good), < 500ms (needs improvement) * - CLS: < 0.1 (good), < 0.25 (needs improvement) * - FCP: < 1800ms (good), < 3000ms (needs improvement) * - TTFB: < 800ms (good), < 1800ms (needs improvement) */ /** * Core Web Vitals metric names */ export type VitalMetricName = 'CLS' | 'FCP' | 'INP' | 'LCP' | 'TTFB'; /** * Performance rating based on Core Web Vitals thresholds */ export type PerformanceRating = 'good' | 'needs-improvement' | 'poor'; /** * Extended metric with rating and context */ export interface VitalMetricEntry { name: VitalMetricName; value: number; rating: PerformanceRating; delta: number; id: string; navigationType: string; timestamp: number; attribution?: unknown; } /** * Aggregated vitals snapshot */ export interface VitalsSnapshot { CLS?: VitalMetricEntry; FCP?: VitalMetricEntry; INP?: VitalMetricEntry; LCP?: VitalMetricEntry; TTFB?: VitalMetricEntry; timestamp: number; url: string; path: string; score: number; rating: PerformanceRating; } /** * Performance budget configuration */ export interface PerformanceBudget { CLS: { good: number; poor: number; }; FCP: { good: number; poor: number; }; INP: { good: number; poor: number; }; LCP: { good: number; poor: number; }; TTFB: { good: number; poor: number; }; } /** * Budget violation event */ export interface BudgetViolation { metric: VitalMetricName; value: number; budget: number; severity: 'warning' | 'critical'; timestamp: number; url: string; } /** * Vitals reporter callback */ export type VitalsReporter = (metric: VitalMetricEntry, snapshot: VitalsSnapshot) => void; /** * Budget violation callback */ export type BudgetViolationHandler = (violation: BudgetViolation) => void; /** * Configuration for vitals collection */ export interface VitalsCollectorConfig { /** Enable reporting to analytics endpoint */ reportToAnalytics?: boolean; /** Analytics endpoint URL */ analyticsEndpoint?: string; /** Custom performance budgets */ budgets?: Partial; /** Callback for each metric update */ onMetric?: VitalsReporter; /** Callback for budget violations */ onBudgetViolation?: BudgetViolationHandler; /** Sample rate for reporting (0-1) */ sampleRate?: number; /** Enable debug logging */ debug?: boolean; /** Batch reports before sending */ batchReports?: boolean; /** Batch flush interval in ms */ batchInterval?: number; } /** * Default Core Web Vitals thresholds (Google recommended) */ export declare const DEFAULT_BUDGETS: PerformanceBudget; /** * Calculate rating based on value and thresholds */ declare function calculateRating(value: number, thresholds: { good: number; poor: number; }): PerformanceRating; /** * Convert rating to numeric score (0-100) */ declare function ratingToScore(rating: PerformanceRating): number; /** * Calculate overall performance score from vitals */ declare function calculateOverallScore(metrics: Partial>): number; /** * Get overall rating from score */ declare function scoreToRating(score: number): PerformanceRating; /** * Core Web Vitals collector with real-time monitoring */ export declare class VitalsCollector { private config; private metrics; private subscribers; private budgetHandlers; private reportBuffer; private flushTimer; private isInitialized; private cachedScore; private cachedScoreMetricsVersion; private metricsVersion; constructor(config?: VitalsCollectorConfig); /** * Initialize vitals collection */ init(): () => void; /** * Flush buffered reports to analytics */ flush(): void; /** * Get current vitals snapshot * Performance optimized: Uses cached score to avoid recalculation on every call */ getSnapshot(): VitalsSnapshot; /** * Get specific metric */ getMetric(name: VitalMetricName): VitalMetricEntry | undefined; /** * Subscribe to metric updates */ subscribe(callback: VitalsReporter): () => void; /** * Subscribe to budget violations */ onViolation(callback: BudgetViolationHandler): () => void; /** * Handle incoming metric */ private handleMetric; /** * Extract attribution data from metric */ private extractAttribution; /** * Check and report budget violations */ private checkBudgetViolation; /** * Schedule batch flush */ private scheduleBatchFlush; /** * Send metrics to analytics endpoint */ private sendToAnalytics; /** * Get connection information */ private getConnectionInfo; /** * Debug logging */ private log; } /** * Get or create the global VitalsCollector instance */ export declare function getVitalsCollector(config?: VitalsCollectorConfig): VitalsCollector; /** * Initialize vitals collection with config */ export declare function initVitals(config?: VitalsCollectorConfig): () => void; /** * Format metric value for display */ export declare function formatMetricValue(name: VitalMetricName, value: number): string; /** * Get color for rating */ export declare function getRatingColor(rating: PerformanceRating): string; /** * Get metric description */ export declare function getMetricDescription(name: VitalMetricName): string; /** * Get metric target value */ export declare function getMetricTarget(name: VitalMetricName): string; export { calculateRating, calculateOverallScore, ratingToScore, scoreToRating, };