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

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

夜晨

发布： 2025-09-28 13:48:01

原创

156人浏览过

前端性能和错误监控可有效保障用户体验。1. 使用 Performance API 监测 FCP、TTI 和资源加载耗时，通过 PerformanceObserver 获取首屏与可交互时间；2. 利用 window.onerror 和 unhandledrejection 捕获运行时错误与未处理的 Promise 异常；3. 结合 Source Map 还原压缩代码堆栈，精准定位生产环境错误；4. 采用节流、采样、离线缓存和 sendBeacon 等策略优化上报，减少性能影响。

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

前端性能和错误监控对保障用户体验至关重要。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 拒绝。

示例：

万物追踪

AI 追踪任何你关心的信息

查看详情

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

登录后复制