前端性能监控与错误追踪通过performance api捕获fp、fmp、lcp等加载指标，使用window.onerror和unhandledrejection监听js错误与promise异常，结合resource类型观察器监控资源加载，辅以函数执行打点测量耗时，并利用sendbeacon在页面卸载时上报日志，实现低开销、高送达率的数据采集，有效提升应用稳定性与用户体验。
前端性能监控与错误追踪能帮助开发者及时发现并解决用户体验问题。通过JavaScript，我们可以主动收集页面加载性能、运行时错误和用户行为数据，提升应用稳定性。
性能监控：捕获关键指标
利用 Performance API 可以获取页面加载和资源处理的关键时间点。
- 通过 performance.timing 或更现代的 PerformanceObserver 获取首屏时间、DOM渲染、资源加载等数据。
- 关注核心指标如 FP（First Paint）、FMP（First Meaningful Paint） 和 LCP（Largest Contentful Paint）。
- 示例：监听首次绘制
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-paint') {
console.log('首次绘制时间:', entry.startTime);
// 上报数据到服务器
}
}
});
observer.observe({ entryTypes: ['paint'] });
错误追踪：捕获运行时异常
JavaScript 提供了多种方式捕获前端错误，确保不遗漏静默失败。
- 使用 window.onerror 捕获全局同步错误：
window.onerror = function(message, source, lineno, colno, error) {
console.error('JS错误:', { message, source, lineno, colno, error });
// 发送错误日志
reportError({ message, source, lineno, colno, stack: error?.stack });
return true; // 阻止默认错误弹窗
};
- 用 window.addEventListener('unhandledrejection') 捕获未处理的Promise错误：
window.addEventListener('unhandledrejection', event => {
console.warn('未捕获的Promise错误:', event.reason);
reportError({ type: 'promise', reason: event.reason });
});
资源加载与自定义埋点
除了系统事件，还可以主动记录关键操作或接口响应时间。
Q.AI视频生成工具
支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI
下载
立即学习“Java免费学习笔记（深入）”；
performance.setResourceTimingBufferSize(200); // 增加缓冲区
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
if (entry.initiatorType === 'img' && entry.duration > 1000) {
console.warn('图片加载过慢:', entry.name, entry.duration);
}
});
});
observer.observe({ entryTypes: ['resource'] });
function trackFunction(fn, name) {
return (...args) => {
const start = performance.now();
try {
return fn(...args);
} catch (err) {
reportError({ fn: name, error: err });
throw err;
} finally {
const duration = performance.now() - start;
if (duration > 500) {
console.log(`${name} 执行时间过长: ${duration}ms`);
}
}
};
}
上报策略与性能权衡
采集数据后需合理上报，避免影响主流程。
- 使用 navigator.sendBeacon 在页面卸载时发送日志，保证送达：
function report(data) {
const body = JSON.stringify(data);
if (navigator.sendBeacon) {
navigator.sendBeacon('/log', body);
} else {
fetch('/log', { method: 'POST', body, keepalive: true });
}
}
- 控制上报频率，避免重复或大量请求。可做采样或合并上报。
- 敏感信息如堆栈需脱敏处理，遵守隐私规范。
基本上就这些。合理使用 Performance API 和错误监听机制，结合轻量上报，就能构建一套有效的前端监控体系。关键是稳定、低开销，并能真实反映用户侧体验。
