前端性能和错误监控可有效保障用户体验。1. 使用 Performance API 监测 FCP、TTI 和资源加载耗时，通过 PerformanceObserver 获取首屏与可交互时间；2. 利用 window.onerror 和 unhandledrejection 捕获运行时错误与未处理的 Promise 异常；3. 结合 Source Map 还原压缩代码堆栈，精准定位生产环境错误；4. 采用节流、采样、离线缓存和 sendBeacon 等策略优化上报，减少性能影响。
前端性能和错误监控对保障用户体验至关重要。JavaScript 提供了多种方式来收集页面加载性能、运行时错误以及用户行为数据，帮助开发者快速定位问题并优化应用表现。
使用 Performance API 监控页面性能
Performance API 是浏览器原生提供的性能测量工具，可以获取页面加载、资源请求、重绘重排等关键时间点。
通过 performance.timing 或更现代的 PerformanceObserver，你可以记录关键性能指标：
- 首屏时间（FP/FCP）：使用 PerformanceObserver 监听 paint 类型条目，获取首次渲染时间。
- 可交互时间（TTI）：通过判断主线程空闲和最后一个长任务的时间点估算。
- 资源加载耗时：监听 navigation timing 或使用 Resource Timing API 获取脚本、图片等资源的加载详情。
示例代码：
立即学习“Java免费学习笔记（深入）”；
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.name === 'first-contentful-paint') {
console.log('FCP:', entry.startTime);
// 上报到监控系统
}
}
});
observer.observe({ entryTypes: ['paint'] });
捕获 JavaScript 错误和异常
未捕获的错误会导致页面崩溃或功能失效，及时捕获并上报是关键。
- window.onerror：监听全局同步脚本错误，可获取错误信息、文件路径和行号。
- window.addEventListener('error')：能捕获更多类型错误，包括资源加载失败（如 img、script）。
- window.addEventListener('unhandledrejection')：专门用于捕获未处理的 Promise 拒绝。
示例：
window.onerror = function(message, source, lineno, colno, error) {
console.error('Error:', { message, source, lineno, colno, stack: error?.stack });
// 发送错误日志
reportError({
type: 'runtime',
message,
stack: error?.stack,
url: source,
line: lineno
});
return true; // 阻止默认错误弹窗
};
window.addEventListener('unhandledrejection', event => {
reportError({
type: 'promise',
reason: event.reason?.toString(),
stack: event.reason?.stack
});
});
结合 Source Map 还原压缩代码错误
生产环境中的 JS 文件通常经过压缩混淆，直接上报的堆栈难以定位原始代码位置。
解决方案是使用 Source Map 文件映射压缩后的代码到源码。
- 构建时生成 .map 文件并部署到服务器。
- 在监控后台（如 Sentry、Bugsnag）配置 source map 解析服务。
- 上报错误时携带 文件名 + 行号 + 列号，由后端自动还原堆栈。
注意：确保 source map 不被公开访问，避免源码泄露。
上报策略与性能影响控制
监控本身不能影响用户体验，需合理设计数据上报机制。
- 节流上报：避免高频发送请求，可合并多个错误或定时批量上报。
- 优先级区分：严重错误立即上报，普通性能数据可延迟或按需发送。
- 离线缓存：网络不可用时暂存 localStorage，恢复后补发。
- 采样上报：高流量场景下按比例采样，减少服务器压力。
使用 navigator.sendBeacon 可在页面卸载前可靠发送数据，不阻塞导航。
基本上就这些。合理利用浏览器能力，加上后端分析平台，就能构建一套轻量但有效的前端监控体系。
