前端日志与埋点系统

没有埋点就没有数据，没有数据就无法优化。前端埋点系统设计要点如下。

埋点类型

• 曝光埋点：元素进入视口时上报（用 IntersectionObserver）
• 点击埋点：用户交互时上报
• 性能埋点：Core Web Vitals 上报
• 错误埋点：JS 异常捕获上报

曝光埋点实现

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      report("exposure", {
        element: entry.target.dataset.trackId,
      });
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll("[data-track-id]").forEach((el) => {
  observer.observe(el);
});

上报策略

// 批量 + 空闲上报，避免阻塞主线程
let queue = [];
function report(type, data) {
  queue.push({ type, data, ts: Date.now() });
}
setInterval(() => {
  if (queue.length === 0) return;
  navigator.sendBeacon("/api/log", JSON.stringify(queue));
  queue = [];
}, 5000);

用 sendBeacon 上报，即使页面关闭也不会丢数据。