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

性能监控还差了点应该是既能发现问题也能理解用户行为也就是说“哪里出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否则无法分析路径。九、最终总结前端监控体系不仅用于发现错误和性能问题更是一个完整的数据采集与分析系统。通过埋点、上报和分析可以同时获得系统运行状态、用户行为路径以及业务指标数据从而实现流量来源分析、页面曝光统计、点击转化分析等能力。