如何利用JavaScript进行前端性能监控与错误追踪？-js教程-PHP中文网

如何利用JavaScript进行前端性能监控与错误追踪？

幻影之瞳

发布： 2025-10-03 08:30:03

原创

143人浏览过

前端性能监控与错误追踪通过Performance API捕获FP、FMP、LCP等加载指标，使用window.onerror和unhandledrejection监听JS错误与Promise异常，结合resource类型观察器监控资源加载，辅以函数执行打点测量耗时，并利用sendBeacon在页面卸载时上报日志，实现低开销、高送达率的数据采集，有效提升应用稳定性与用户体验。

如何利用javascript进行前端性能监控与错误追踪？

前端性能监控与错误追踪能帮助开发者及时发现并解决用户体验问题。通过JavaScript，我们可以主动收集页面加载性能、运行时错误和用户行为数据，提升应用稳定性。

性能监控：捕获关键指标

利用 Performance API 可以获取页面加载和资源处理的关键时间点。

通过 performance.timing 或更现代的 PerformanceObserver 获取首屏时间、DOM渲染、资源加载等数据。
关注核心指标如 FP（First Paint）、FMP（First Meaningful Paint） 和 LCP（Largest Contentful Paint）。
示例：监听首次绘制

错误追踪：捕获运行时异常

JavaScript 提供了多种方式捕获前端错误，确保不遗漏静默失败。

使用 window.onerror 捕获全局同步错误：

用 window.addEventListener('unhandledrejection') 捕获未处理的Promise错误：

window.addEventListener('unhandledrejection', event => { console.warn('未捕获的Promise错误:', event.reason); reportError({ type: 'promise', reason: event.reason }); });

资源加载与自定义埋点

除了系统事件，还可以主动记录关键操作或接口响应时间。

万物追踪

AI 追踪任何你关心的信息

查看详情

立即学习“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'] });

在关键函数前后打点，计算执行耗时：

上报策略与性能权衡

采集数据后需合理上报，避免影响主流程。

使用 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 }); } }