feat:1️⃣ 增强 performanceMonitor.ts
- ✅ 新增 measure(name, startMark, endMark) 方法(支持命名测量) - ✅ 新增 getMarks() - 获取所有性能标记 - ✅ 新增 getMeasures() - 获取所有测量结果 - ✅ 新增 getReport() - 返回完整 JSON 报告 - ✅ 新增 exportJSON() - 导出 JSON 文件 - ✅ 新增 reportToPostHog() - 上报到 PostHog - ✅ 新增全局 API window.__PERFORMANCE__(仅开发环境) - ✅ 彩色控制台使用说明 2️⃣ 添加 PostHog 性能上报 - ✅ 在 posthog.js 中新增 reportPerformanceMetrics() 函数 - ✅ 上报所有关键性能指标(网络、渲染、React) - ✅ 自动计算性能评分(0-100) - ✅ 包含浏览器和设备信息
This commit is contained in:
@@ -293,4 +293,105 @@ export const isFeatureEnabled = (flagKey) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Report performance metrics to PostHog
|
||||
* @param {object} metrics - Performance metrics object
|
||||
*/
|
||||
export const reportPerformanceMetrics = (metrics) => {
|
||||
// 仅在生产环境上报
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
console.log('📊 [开发环境] 性能指标(未上报到 PostHog):', metrics);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取浏览器和设备信息
|
||||
const browserInfo = {
|
||||
userAgent: navigator.userAgent,
|
||||
viewport: `${window.innerWidth}x${window.innerHeight}`,
|
||||
connection: navigator.connection?.effectiveType || 'unknown',
|
||||
deviceMemory: navigator.deviceMemory || 'unknown',
|
||||
hardwareConcurrency: navigator.hardwareConcurrency || 'unknown',
|
||||
};
|
||||
|
||||
// 上报性能指标
|
||||
posthog.capture('Performance Metrics', {
|
||||
// 网络指标
|
||||
dns_ms: metrics.dns,
|
||||
tcp_ms: metrics.tcp,
|
||||
ttfb_ms: metrics.ttfb,
|
||||
dom_load_ms: metrics.domLoad,
|
||||
resource_load_ms: metrics.resourceLoad,
|
||||
|
||||
// 渲染指标
|
||||
fp_ms: metrics.fp,
|
||||
fcp_ms: metrics.fcp,
|
||||
lcp_ms: metrics.lcp,
|
||||
|
||||
// React 指标
|
||||
react_init_ms: metrics.reactInit,
|
||||
auth_check_ms: metrics.authCheck,
|
||||
homepage_render_ms: metrics.homepageRender,
|
||||
|
||||
// 总计
|
||||
total_white_screen_ms: metrics.totalWhiteScreen,
|
||||
|
||||
// 性能评分
|
||||
performance_score: calculatePerformanceScore(metrics),
|
||||
|
||||
// 浏览器和设备信息
|
||||
...browserInfo,
|
||||
|
||||
// 时间戳
|
||||
timestamp: new Date().toISOString(),
|
||||
});
|
||||
|
||||
console.log('✅ 性能指标已上报到 PostHog');
|
||||
} catch (error) {
|
||||
console.error('❌ PostHog 性能指标上报失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculate overall performance score (0-100)
|
||||
* @param {object} metrics - Performance metrics
|
||||
* @returns {number} Score from 0 to 100
|
||||
*/
|
||||
const calculatePerformanceScore = (metrics) => {
|
||||
let score = 100;
|
||||
|
||||
// 白屏时间评分(权重 40%)
|
||||
if (metrics.totalWhiteScreen) {
|
||||
if (metrics.totalWhiteScreen > 3000) score -= 40;
|
||||
else if (metrics.totalWhiteScreen > 2000) score -= 20;
|
||||
else if (metrics.totalWhiteScreen > 1500) score -= 10;
|
||||
}
|
||||
|
||||
// TTFB 评分(权重 20%)
|
||||
if (metrics.ttfb) {
|
||||
if (metrics.ttfb > 1000) score -= 20;
|
||||
else if (metrics.ttfb > 500) score -= 10;
|
||||
}
|
||||
|
||||
// LCP 评分(权重 20%)
|
||||
if (metrics.lcp) {
|
||||
if (metrics.lcp > 4000) score -= 20;
|
||||
else if (metrics.lcp > 2500) score -= 10;
|
||||
}
|
||||
|
||||
// FCP 评分(权重 10%)
|
||||
if (metrics.fcp) {
|
||||
if (metrics.fcp > 3000) score -= 10;
|
||||
else if (metrics.fcp > 1800) score -= 5;
|
||||
}
|
||||
|
||||
// 认证检查评分(权重 10%)
|
||||
if (metrics.authCheck) {
|
||||
if (metrics.authCheck > 500) score -= 10;
|
||||
else if (metrics.authCheck > 300) score -= 5;
|
||||
}
|
||||
|
||||
return Math.max(0, Math.min(100, score));
|
||||
};
|
||||
|
||||
export default posthog;
|
||||
|
||||
Reference in New Issue
Block a user