前端监控与错误追踪

// npm i web-vitals
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

// 统一的上报函数：优先用 sendBeacon，保证页面卸载时也能送达
function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,        // LCP / INP / CLS / FCP / TTFB
    value: metric.value,      // 指标数值
    rating: metric.rating,    // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,      // 相比上次上报的增量
    id: metric.id,            // 本次页面加载的唯一 id
    navigationType: metric.navigationType,
    page: location.pathname,
    ts: Date.now(),
  });

  const url = '/api/rum';
  // sendBeacon 在页面卸载时依然可靠，是上报性能数据的首选
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

// 注册各指标的回调，指标"确定"后会触发
onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

// 采集 LCP：观察 'largest-contentful-paint' 条目，取最后一个
function observeLCP(callback) {
  let lcpValue = 0;
  const po = new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    // LCP 会随渲染不断更新，最后一个才是最终值
    const lastEntry = entries[entries.length - 1];
    lcpValue = lastEntry.renderTime || lastEntry.loadTime;
  });
  po.observe({ type: 'largest-contentful-paint', buffered: true });

  // 用户首次交互或页面隐藏后，LCP 不再更新，此时上报
  const report = () => {
    po.takeRecords();
    po.disconnect();
    callback(lcpValue);
  };
  ['keydown', 'click'].forEach((t) =>
    addEventListener(t, report, { once: true, capture: true })
  );
  addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') report();
  });
}

observeLCP((value) => console.log('LCP:', value, 'ms'));

// 采集 CLS：累加非用户输入引起的布局偏移，采用"会话窗口"最大值算法
function observeCLS(callback) {
  let clsValue = 0;
  let sessionValue = 0;
  let sessionEntries = [];

  const po = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // 只统计非用户主动交互引起的偏移
      if (entry.hadRecentInput) continue;

      const first = sessionEntries[0];
      const last = sessionEntries[sessionEntries.length - 1];

      // 同一会话窗口：间隔小于 1s 且总时长小于 5s
      if (
        sessionValue &&
        entry.startTime - last.startTime < 1000 &&
        entry.startTime - first.startTime < 5000
      ) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }

      // 取所有会话窗口中的最大值作为 CLS
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        callback(clsValue);
      }
    }
  });
  po.observe({ type: 'layout-shift', buffered: true });
}

observeCLS((value) => console.log('CLS:', value.toFixed(3)));

// 采集 INP：观察 'event' 条目，统计交互从输入到下一帧绘制的延迟
function observeINP(callback) {
  let worstINP = 0;
  const po = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // duration 覆盖了输入延迟 + 事件处理 + 渲染延迟
      if (entry.interactionId && entry.duration > worstINP) {
        worstINP = entry.duration;
        callback(worstINP, entry.name);
      }
    }
  });
  // durationThreshold 过滤掉过短、无意义的交互
  po.observe({ type: 'event', buffered: true, durationThreshold: 40 });
}

observeINP((value, type) =>
  console.log(`INP: ${value}ms (由 ${type} 交互产生)`)
);

// 采集资源加载耗时：定位慢资源（大图、第三方脚本）
const resourceObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // 只关注加载超过 500ms 的慢资源
    if (entry.duration > 500) {
      console.warn('慢资源:', {
        name: entry.name,
        type: entry.initiatorType, // script / img / css / fetch
        duration: Math.round(entry.duration),
        transferSize: entry.transferSize, // 实际传输字节数
        cached: entry.transferSize === 0, // 命中缓存则为 0
      });
    }
  }
});
resourceObserver.observe({ type: 'resource', buffered: true });

// 全局同步错误捕获
window.onerror = function (message, source, lineno, colno, error) {
  reportError({
    kind: 'js_error',
    message: String(message),
    source,               // 出错脚本 URL
    lineno,               // 行号
    colno,                // 列号
    stack: error && error.stack, // 完整堆栈（用于 Source Map 还原）
    ua: navigator.userAgent,
    page: location.href,
    ts: Date.now(),
  });
  // 返回 true 可阻止错误继续冒泡到控制台，通常返回 false 保留默认行为
  return false;
};