JavaScript性能监控与错误追踪方法

今日不肯埋头，明日何以抬头！每日一句努力自己的话哈哈~哈喽，今天我将给大家带来一篇《JavaScript性能监控与错误追踪技巧》，主要内容是讲解等等，感兴趣的朋友可以收藏或者有更好的建议在评论提出，我都会认真看的！大家一起进步，一起学习！

前端性能和错误监控可有效保障用户体验。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 获取脚本、图片等资源的加载详情。

示例代码：

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 可在页面卸载前可靠发送数据，不阻塞导航。

基本上就这些。合理利用浏览器能力，加上后端分析平台，就能构建一套轻量但有效的前端监控体系。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~