前端性能异常监控与埋点

错误信息收集

基本语法

window.onerror = function(message, source, lineno, colno, error) {
  // 错误处理逻辑
  console.log(`错误信息: ${message}`);
  console.log(`错误文件: ${source}`);
  console.log(`行号: ${lineno}, 列号: ${colno}`);
  console.log(`错误对象: ${error}`);
  
  // 返回 true 阻止错误冒泡到浏览器控制台
  return true;
};
-   若错误发生在跨域脚本中，默认只能获取到 `"Script error."`。
-   在服务器端设置 CORS 头（如 `Access-Control-Allow-Origin: *`）。
-   在 script 标签中添加 `crossorigin="anonymous"` 属性：

替代语法

// 监听未捕获的异常
window.addEventListener('error', function(event) {
  console.log('错误事件:', event.message);
});

// 监听未处理的 Promise 拒绝
window.addEventListener('unhandledrejection', function(event) {
  console.log('Promise 拒绝:', event.reason);
});

第三方错误监控工具：

-   **Sentry**：功能强大的错误追踪平台，支持自动捕获和分析。
-   **TrackJS**：专注于前端错误监控，提供详细的用户行为数据。

性能数据收集

一、核心性能指标

1. 加载性能：

   • FP (First Paint) ：首次绘制时间
   • FCP (First Contentful Paint) ：首次内容绘制时间
   • LCP (Largest Contentful Paint) ：最大内容绘制时间
   • TTFB (Time To First Byte) ：首字节响应时间

2. 交互性能：

   • FID (First Input Delay) ：首次输入延迟
   • TTI (Time To Interactive) ：可交互时间
   • CLS (Cumulative Layout Shift) ：累积布局偏移

3. 运行时性能：

   • JS 执行时间
   • 内存占用
   • 长任务（Long Task）检测

二、数据收集方法

1. Navigation Timing API

用于测量页面加载各个阶段的时间：

const perfData = window.performance.timing;
const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
const domReadyTime = perfData.domContentLoadedEventEnd - perfData.domLoading;

// 发送到服务器
sendToServer({
  pageLoadTime,
  domReadyTime,
  ttfB: perfData.responseStart - perfData.requestStart
});

2. Performance Observer API

实时监听性能事件（如 LCP、CLS）：

// 监听 LCP
const lcpObserver = new PerformanceObserver((entries) => {
  const lcpEntry = entries.getEntries()[0];
  console.log('LCP:', lcpEntry.startTime);
});
lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

// 监听 CLS
const clsObserver = new PerformanceObserver((entries) => {
  const clsEntry = entries.getEntries()[0];
  console.log('CLS:', clsEntry.value);
});
clsObserver.observe({ type: 'layout-shift', buffered: true });

3. Resource Timing API

监控资源加载性能：

// 获取所有资源加载信息
const resources = window.performance.getEntriesByType('resource');
resources.forEach(resource => {
  console.log(
    `资源: ${resource.name}, ` +
    `加载时间: ${resource.duration.toFixed(2)}ms`
  );
});