前端如何做监控体系（埋点 → 上报 → 分析 → 数据分流）

来跟我看看你们跟我理解的监控上报是不是差不多：

• 报错上报
• 性能监控

还差了点，应该是：

既能发现问题，也能理解用户行为

也就是说：

"哪里出bug了"
"用户在干什么"
"用户从哪里访问的"
...

---

一、啥子是前端监控

前端监控不是一个单一系统，而是三件事：

系统健康（error / performance）
+ 用户行为（click / path）
+ 业务数据（转化 / 曝光）

简单来说也就是：
埋点 → 上报 → 分析 → 决策

---

二、为啥要做

前端天然是：

黑盒系统

所以不知道：

• 用户从哪里进来
• 看了哪些页面
• 点了哪些按钮
• 为什么流失

现代前端可观测性（Frontend Observability）解决的是：

把用户真实行为变成可分析数据 (iron-out.io)

---

三、第一层：埋点

埋点不是随便打 log，而是：

有目的地记录"关键行为 + 状态"

---

1. 行为埋点

记录用户做了什么：

track('click_buy', {
  productId: 123
})

可以统计：

• 按钮点击量
• 某个商品单位时间内购买量
• 用户画像等

---

2. 曝光埋点

track('banner_show', {
  bannerId: 'A'
})

用于统计：

• 广告展示量
• 页面曝光量
• 模块曝光

---

3. 性能埋点

例如：

• LCP / CLS / INP
• 页面加载时间

// 以下只是示例，实际可以采用 web-vitals
// LCP
const observer = new PerformanceObserver((list) => {
  const entries = list.getEntries()

  const lastEntry = entries[entries.length - 1]

  console.log('LCP:', lastEntry.startTime)
})

observer.observe({
  type: 'largest-contentful-paint',
  buffered: true
})


// CLS
let cls = 0

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value
    }
  }

  console.log('CLS:', cls)
})

observer.observe({
  type: 'layout-shift',
  buffered: true
})


// INP
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('INP:', entry.duration)
  }
})

observer.observe({
  type: 'event',
  buffered: true,
  durationThreshold: 16
})

这些是核心 Web 指标，还有其他的可以自行查看

---

4. 错误埋点

window.onerror = function(err) {}

用于：

• JS 错误
• Promise 异常
• 资源加载失败

---

5、入口埋点

5.1. 用户入口来源（流量分流）

utm_source / referrer / channel（渠道参数）

例如：

• 广告进来的
• 搜索进来的
• 直接访问

---

5.2. 用户路径（用户操作流程）

首页 → 商品页 → 下单 → 支付

---

这一类能力，本质是：

行为分析系统（Behavior Analytics）

---

四、第二层：上报

埋点只是记录，关键是如何可靠上报

1. 推荐方案 (sendBeacon)

navigator.sendBeacon('/report', data) 

优点：

• 页面关闭也能发送
• 不阻塞主线程

也可以定义一套前后端上报逻辑，这里不细说

---

2. 优化

---

批量上报

多条 → 合并发送

---

采样

正常数据 → 1%
错误数据 → 100%

---

限流

防止：

死循环上报

---

五、第三层：数据分析

前两步只是"收集"，第三步才是理解数据

1. 三类核心数据模型

前端可观测性本质依赖三类数据：

Metrics / Logs / Traces

这是比较标准的模型 (iron-out.io)

---

Metrics（指标）

• PV
• 点击量
• 性能指标

---

Logs（日志）

{
  "event": "click",
  "userId": "123"
}

---

Traces（链路）

用户点击 → 页面渲染 → API → 返回

---

2. 行为分析能力

---

漏斗分析

进入页面 → 点击按钮 → 下单 → 支付

---

路径分析

用户从哪里来 → 去哪里

---

分群分析

不同渠道 / 不同设备 / 不同用户

---

这些能力，本质就是：

数据驱动产品决策

---

六、RUM（真实用户监控）

这是监控体系的核心能力之一。

---

什么是 RUM

采集真实用户在浏览器中的行为和性能数据 (Grafana Labs)

---

能解决什么问题

例如：

• 为什么某地区用户慢
• 为什么某设备点击失败
• 用户在报错前做了什么

主要是还原用户现场，方便解决问题

---

七、完整架构

浏览器（埋点 SDK）
   ↓
数据（行为 / 性能 / 错误）
   ↓
上报（batch + sampling）
   ↓
数据平台（日志 / 时序库）
   ↓
分析系统（BI / dashboard）
   ↓
业务决策（优化 / 实验 / 灰度）

---

八、常见误区

---

只做错误监控

只知道：

哪里坏了

但不知道：

用户怎么走到这里

---

不做曝光埋点

只能看到：

点击量

但不知道：

点击率

---

没有关联用户

必须有：

userId / sessionId

否则无法分析路径。

---

九、最终总结

前端监控体系不仅用于发现错误和性能问题，更是一个完整的数据采集与分析系统。

通过埋点、上报和分析，可以同时获得系统运行状态、用户行为路径以及业务指标数据，从而实现流量来源分析、页面曝光统计、点击转化分析等能力。

本质上，前端监控已经从"技术工具"演变为"数据驱动系统"，它不仅帮助定位问题，更直接参与产品优化和业务决策。

---