前端监控与埋点

可视化演示

展示前端监控三大核心：JS错误捕获与sourceMap还原、Web Vitals性能指标实时监控、以及事件埋点→采样→批量→上报→聚合的数据管道。交互切换不同监控维度。

JS错误监控 — 网站的“烟感报警器”

商场每一层都配有烟雾报警器与水浸传感器，一旦厨房线路短路或水管爆裂，传感信号会立刻汇入中控室大屏。JS 错误监控就是为网页安装的“报警器网络”：不是等顾客被烟呛到才开始排查，而是在异常发生的瞬间，警报已经亮起。

浏览器为前端工程师提供了几个现成的“报警器”。window.onerror 和 window.addEventListener('error') 可以捕获全局的 JS 运行时错误——那些没有被任何 try/catch 处理的“漏网之鱼”；window.addEventListener('unhandledrejection') 专门捕捉 Promise 链中被 reject 却无人处理的“孤儿异常”；而 img、script、link 等资源加载失败属于另一类不冒泡的错误，需要在捕获阶段监听 error 事件才能察觉。

更棘手的是，线上代码经过压缩混淆，报错堆栈形如 at e (a.js:1:3650)，完全看不出原始逻辑。这时需要借助构建工具生成的 sourceMap 文件，将压缩后的行列号映射回源码。sourceMap 的核心是 mappings 字段，用 base64 VLQ 编码保存了压缩代码与原始代码的位置映射关系，让“回溯事故现场”成为可能。

就像中控室盯着“每千次客流触发几次火警”的比率而非绝对次数——大促时客流翻倍，火警绝对次数增加是正常的，比率陡增才是真正的险情。错误率正是归一化后的“异常血压”，排除了流量干扰，直指应用本身的质量波动。

性能监控指标 — 网页通道的拥堵地图

中控室里除了看火警，还要盯各层通道的人流热力图：哪个扶梯口堵成一团，哪条通道常年空置。顾客逛得舒不舒服，决定商场业绩；页面加载快不快、交互顺不顺，决定产品留存。性能监控便是给网页通道画“拥堵地图”。

Google 在 2020 年代提出了 Web Vitals 核心指标体系，用三个数字给真实用户体验打分：LCP（Largest Contentful Paint）衡量首屏最大内容的渲染时间，建议低于 2.5 秒；FID（First Input Delay）衡量用户第一次点击页面到能响应的时间，建议低于 100 毫秒；CLS（Cumulative Layout Shift）衡量页面元素的移动幅度，建议低于 0.1。

除了三大核心，还有 FP（First Paint）首次像素绘制、FCP（First Contentful Paint）首个内容绘制、TTI（Time to Interactive）可交互时间等辅助指标。这些数字从哪里来？答案是 Performance API。浏览器通过 PerformanceObserver 可以订阅各种性能条目——导航计时、资源加载、长任务等。工程师还可以用 performance.mark 与 performance.measure 自定义打点，测量某个业务功能的耗时。

这就像给通道的“拥堵度”打分：不仅要看有多少人堵在入口（影响比例），还要看队伍排得离入口多远（距离比例）。CLS 越低，网页就像商场里畅通无阻的动线，用户不会因为按钮突然弹走而点错。

用户行为埋点 — 商场里的顾客动线追踪

商场最值钱的数据，不是顾客最终买走了什么，而是他们在每个橱窗前停留了多久、先逛了哪一层、在哪个岔路口折返。前端埋点做的就是这份“逛街动线”的记录工作。

埋点体系按层次分三类：第一层是 PV/UV 统计——PV（Page View）记录页面被浏览的次数，UV（Unique Visitor）通过设备指纹或用户 ID 记录独立访客数；第二层是事件埋点——点击、输入、滑动，以及加购、支付这类自定义业务事件；第三层是曝光埋点——某个推荐位进入视口时上报，通常用 IntersectionObserver 监听可见性。

埋点落地的姿势很关键。业界流行的做法是开发一个独立的埋点 SDK，业务代码只调用统一的 track(eventName, payload) 接口，SDK 内部负责上下文采集（页面路径、设备、UA、时间）、队列缓冲、批量上报。这样埋点逻辑与业务逻辑解耦，后续调整采样策略或上报通道，业务代码一行都不用改。SDK 还要处理“上传失败”“上报去重”“敏感字段过滤”等细节。

就像商场的动线报告如果掺了大量重复刷卡记录，数据分析师就得花大量时间清洗。埋点有效率就是在源头保证“记录一条，顶用一条”，让后续的用户增长分析建立在干净的地基上。

数据上报策略 — 安保巡逻的汇报纪律

安保巡逻不会每看到一地垃圾就跑回中控室汇报一次，而是按路线巡逻、定时汇总、遇重大情况才紧急呼叫。数据上报的逻辑同理：要在“及时性”与“对业务性能的影响”之间找平衡。

上报方式上，传统方案是用 Image src 发一个 1×1 像素的 GET 请求，简单可靠但只能携带 2KB 数据；navigator.sendBeacon 是专门为“离开页面时上报”设计的 API，在 unload 场景下也能可靠送达，如今已广泛使用；fetch 上报则适合需要携带复杂请求头和大体量的场景。选择依据是：上报的数据是否紧迫、数据量多大、用户是否还在页面上。

上报策略有三件事：采样（Sample）、批量（Batch）、重试（Retry）。采样用随机数或哈希实现——哈希采样更友好，它能保证同一用户落在同一种哈希分组里，行为数据可关联。批量发送是攒够数量（如 10 条）或超时（如 5 秒）再带上一个 batchId 发出，减少请求次数。失败重试要使用指数退避：第 1 次失败等 1 秒重试，第 2 次等 2 秒，第 3 次等 4 秒……避免故障时全网重试造成雪崩。

这个公式解答了“采样率设多少才够”的困惑。保安抽查顾客满意度时，拦下 100 个人就能把误差压到可接受范围，不需要拦住每一位顾客。数据采样同理：几千条样本已经足够支撑可靠的分析结论，剩下的开销可以省下来换取业务的流畅。

异常聚合告警 — 中控室的合并归类研判

中控室如果每响一声火警就给消防队打一次电话，消防队很快会因“狼来了”而精神麻木。合格的中控员会把同一区域反复出现的报警合并成一张工单，研判等级后再决定是否出动。异常聚合与告警正是这个“合并归类、分级上报”的工序。

海量错误日志的原始形态是“一堆文本”，首先要去重。去重的关键是计算错误指纹（fingerprint）——将错误的堆栈帧、错误类型、关键参数做哈希，得到一个短字符串，指纹相同的错误视为同一个 bug。接着做堆栈聚合：同一个 bug 在真实用户那里堆栈会略有差异（比如函数参数不同），需要用相似度算法将相近堆栈归入同一个 issue。

告警策略设计要平衡灵敏度与噪音。常见做法是“阈值 + 持续时间”双条件：例如错误率超过 1% 并持续 5 分钟才触发告警，可过滤瞬时抖动。更成熟的团队会引入 SLO（Service Level Objective）——以“过去 7 天错误率低于 1%”作为目标，SLO 逼近红线时再告警。通知渠道方面，配合值班轮转，用邮件、钉钉/企微机器人、电话保证“告警有人理”。

这正是保安队长的工作台：几十条散乱的“报警记录”，经过指纹比对和堆栈聚类，浓缩成几行“待处理工单”。聚合后的告警才有力量——它把千万级噪音变成可排期的行动项，让工程师在一天最清醒的时刻处理最重要的故障。

Sentry方案 — 采购成熟的安保系统

自建监控系统，就像商场决定自己研发摄像头、冷气管道和消防喷淋，能定制但成本极高；而 Sentry 是安保系统一体化供应商，开箱即用还持续升级。对于大多数团队，成熟开源方案是性价比最高的选择。

Sentry 是目前最流行的开源错误监控平台，前端接入只需一行安装：npm install @sentry/browser。初始化时传入的 DSN（Data Source Name）是项目在 Sentry 服务端的“识别门牌号”，告诉 SDK 把数据送往哪个项目。SDK 会自动捕获全局错误、Promise 异常、资源错误，并附带用户上下文、浏览器信息、网络请求等现场数据。

Sentry 的价值不止于采集，关键在于治理链路：上传 sourceMap 后，堆栈自动还原为源码位置，甚至关联到文件与代码行；release 字段记录发版版本，发布后新版本错误率对比一目了然；issue 自动去重聚合，团队成员可对 issue 添加标签、指派、标记已解决。数据敏感的企业还可以通过 onpremise 仓库私有化部署，把数据留在自己的服务器里。

就像商场采购安保系统后，要定期验证“是否所有摄像头都在工作”——捕获率就是 Sentry 这套系统的摄像头完好率。接入不是终点，持续观察捕获率、优化采样与上报链路，才真正让这套成熟方案变成场内可靠的“眼睛”。

AI 应用场景

Python 演示

import randomfrom collections import Counter  class MonitorSDK:    """极简版前端监控 SDK 模拟器"""     def __init__(self, sample_rate=0.3, batch_size=4):        self.sample_rate = sample_rate        self.batch_size = batch_size        self.buffer = []        self.batch_count = 0        self.error_fingerprints = Counter()        self.sent_events = 0     def should_sample(self, event_key):        """哈希采样: 同一事件要么全采要么全不采"""        digest = sum(ord(ch) for ch in event_key) % 1000        return digest < self.sample_rate * 1000     def capture_error(self, error_type, message, stack):        event = {            "type": error_type,            "message": message,            "stack": stack,            "time": 0,        }        if not self.should_sample(error_type + ":" + message):            return        self.buffer.append(event)        fingerprint = "|".join(stack.split("\n")[:3])        self.error_fingerprints[fingerprint] += 1        self._flush_if_needed()     def capture_performance(self, metric_name, value):        self.buffer.append({            "type": "perf",            "metric": metric_name,            "value": value,            "time": 0,        })        self._flush_if_needed()     def _flush_if_needed(self):        if len(self.buffer) >= self.batch_size:            self.flush()     def flush(self):        if not self.buffer:            return        payload = {"batch_id": self.batch_count, "events": self.buffer}        self.batch_count += 1        self.sent_events += len(self.buffer)        print("[上报] batch_id=%d 条数=%d" % (payload["batch_id"], len(self.buffer)))        self.buffer.clear()     def aggregate(self):        print("=== 错误聚合 Top3 ===")        for fingerprint, count in self.error_fingerprints.most_common(3):            print("指纹(堆栈前3帧): %s" % fingerprint)            print("  出现次数: %d" % count)  if __name__ == "__main__":    sdk = MonitorSDK(sample_rate=0.3, batch_size=4)    error_stacks = [        "TypeError: x is not a function\n"        "    at handleClick (app.js:120)\n"        "    at HTMLButtonElement.<anonymous> (app.js:88)",        "ReferenceError: foo is not defined\n"        "    at init (app.js:45)\n"        "    at main (app.js:10)",    ]    for i in range(20):        sdk.capture_error("js_error", "用户操作触发错误 %d" % i, error_stacks[i % 2])        sdk.capture_performance("lcp", round(random.uniform(1.5, 4.2), 2))    sdk.aggregate()    print("已上报事件总数: %d (采样率 %.0f%%)" % (sdk.sent_events, sdk.sample_rate * 100))

1. digest = sum(ord(ch) for ch in event_key) % 1000把事件关键信息映射成 0~999 的哈希值，决定这条数据是否被采样
2. fingerprint = "|".join(stack.split("\n")[:3])取堆栈前 3 行拼接成错误指纹，相同指纹视为同一错误
3. self.error_fingerprints[fingerprint] += 1用 Counter 统计每个指纹出现的次数，相当于错误去重
4. self._flush_if_needed()每次采集后检查缓冲区，满 batch_size 就触发送
5. self.buffer.clear()发送完成后清空缓冲队列，避免重复上报
6. self.error_fingerprints.most_common(3)聚合出出现频次最高的三个错误，就是“告警工单”的雏形

常见误区

面试题