Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
interface RoutePerformanceData {
route: string;
loadStart: number;
loadEnd?: number;
duration?: number;
timestamp: number;
}
class RoutePerformanceMonitor {
private static instance: RoutePerformanceMonitor;
private routeData: Map<string, RoutePerformanceData> = new Map();
private currentRoute: string | null = null;
static getInstance(): RoutePerformanceMonitor {
if (!RoutePerformanceMonitor.instance) {
RoutePerformanceMonitor.instance = new RoutePerformanceMonitor();
}
return RoutePerformanceMonitor.instance;
}
startRouteLoad(route: string): void {
const data: RoutePerformanceData = {
route,
loadStart: performance.now(),
timestamp: Date.now(),
};
this.routeData.set(route, data);
this.currentRoute = route;
}
endRouteLoad(route: string): void {
const data = this.routeData.get(route);
if (data) {
data.loadEnd = performance.now();
data.duration = data.loadEnd - data.loadStart;
this.routeData.set(route, data);
// Log performance data in development
if (process.env.NODE_ENV === 'development') {
console.log(
`🚀 Route ${route} loaded in ${data.duration.toFixed(2)}ms`
);
}
}
}
getRoutePerformance(route: string): RoutePerformanceData | undefined {
return this.routeData.get(route);
}
getAllPerformanceData(): RoutePerformanceData[] {
return Array.from(this.routeData.values());
}
getAverageLoadTime(): number {
const completedRoutes = Array.from(this.routeData.values()).filter(
data => data.duration !== undefined
);
if (completedRoutes.length === 0) return 0;
const totalTime = completedRoutes.reduce(
(sum, data) => sum + (data.duration || 0),
0
);
return totalTime / completedRoutes.length;
}
}
export const useRoutePerformance = () => {
const location = useLocation();
const monitor = RoutePerformanceMonitor.getInstance();
useEffect(() => {
// Start timing when route changes
monitor.startRouteLoad(location.pathname);
// End timing when component is fully loaded
const timer = setTimeout(() => {
monitor.endRouteLoad(location.pathname);
}, 0);
return () => clearTimeout(timer);
}, [location.pathname, monitor]);
return {
getRoutePerformance: (route: string) => monitor.getRoutePerformance(route),
getAllPerformanceData: () => monitor.getAllPerformanceData(),
getAverageLoadTime: () => monitor.getAverageLoadTime(),
};
};
// Hook to display performance metrics in development
export const usePerformanceDebug = () => {
const { getAllPerformanceData, getAverageLoadTime } = useRoutePerformance();
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
const logPerformance = () => {
const data = getAllPerformanceData();
const avgTime = getAverageLoadTime();
console.group('📊 Route Performance Summary');
console.log(`Average load time: ${avgTime.toFixed(2)}ms`);
console.table(data);
console.groupEnd();
};
// Log performance data every 30 seconds in development
const interval = setInterval(logPerformance, 30000);
return () => clearInterval(interval);
}
}, [getAllPerformanceData, getAverageLoadTime]);
};
|