首页 > 基础资料博客日记

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

2026-05-08 15:00:01基础资料围观9次

本篇文章分享前端如何做监控体系（埋点 → 上报 → 分析 → 数据分流），对你有帮助的话记得收藏一下，看极客资料网收获更多编程知识

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

报错上报
性能监控

还差了点，应该是：

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

也就是说：

“哪里出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）
   ↓
业务决策（优化 / 实验 / 灰度）

八、常见误区

只做错误监控

只知道：

哪里坏了

但不知道：

用户怎么走到这里

不做曝光埋点

只能看到：

点击量