当前位置：首页 > 文章列表 > 文章 > 前端 > 前端监控：错误追踪与性能提升指南

前端监控：错误追踪与性能提升指南

2025-11-11 08:38:51 0浏览收藏

错误追踪：如何精准定位前端 Bug？

前端错误千奇百怪，从 JavaScript 语法错误到网络请求失败，再到组件渲染异常，要精准定位问题，需要一套完善的错误追踪机制。

JavaScript 错误捕获： 使用 try...catch 语句捕获同步错误，window.onerror 捕获全局未处理的错误。别忘了，window.addEventListener('unhandledrejection', ...) 可以捕获 Promise 相关的错误。

window.onerror = function(message, source, lineno, colno, error) {
  console.error('全局错误：', message, source, lineno, colno, error);
  // 上报错误到服务器
  reportError({message, source, lineno, colno, error});
};

window.addEventListener('unhandledrejection', function(event) {
  console.error('Promise 错误：', event.reason);
  reportError({message: event.reason, type: 'promise'});
});

try {
  // 可能会出错的代码
  throw new Error('测试错误');
} catch (e) {
  console.error('捕获到错误：', e);
  reportError({message: e.message, stack: e.stack});
}

Source Map 的重要性： 压缩后的代码难以阅读，Source Map 可以将压缩后的代码映射回原始代码，方便调试。确保在生产环境中正确配置 Source Map，但要注意安全，避免泄露源代码。
错误上报： 将捕获到的错误信息上报到服务器，方便分析和处理。可以选择自建错误上报系统，也可以使用第三方服务，比如 Sentry、Bugsnag 等。上报时，除了错误信息，还要包含用户信息、浏览器信息、设备信息等，方便定位问题。
用户行为追踪： 记录用户的操作行为，例如点击、输入、页面跳转等，可以帮助还原错误发生的场景。
面包屑： 在错误发生前，记录用户的操作步骤，形成一个面包屑，可以更清晰地了解错误发生的上下文。

性能数据收集：如何量化前端性能？

前端性能直接影响用户体验。量化前端性能，需要收集各种性能指标。

Lighthouse： Google Lighthouse 是一个强大的性能评估工具，可以分析页面性能，并给出优化建议。

Performance API： 使用 Performance API 可以收集各种性能指标，例如页面加载时间、资源加载时间、渲染时间等。

// 页面加载时间
window.addEventListener('load', function() {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log('页面加载时间：', loadTime);
  reportPerformance({name: 'loadTime', value: loadTime});
});

// 资源加载时间
performance.getEntriesByType("resource").forEach(entry => {
  console.log(entry.name, entry.duration);
  reportPerformance({name: entry.name, value: entry.duration});
});

监控关键指标： 关注以下关键指标：
- 首屏加载时间 (First Contentful Paint, FCP): 用户第一次看到页面内容的时间。
- 可交互时间 (Time to Interactive, TTI): 页面可以响应用户交互的时间。
- 输入延迟 (Input Delay): 用户交互到页面响应的延迟。
- 页面大小： 页面资源的大小。
- 请求数量： 页面发起的请求数量。
用户体验指标： 除了技术指标，还要关注用户体验指标，例如页面流畅度、动画性能等。可以使用 Chrome DevTools 的 Performance 面板来分析页面性能。