小落叶的个人知识库

外观

📖预计阅读时长：0 分钟字数：0

前端监控埋点平台 - 功能与优化头脑风暴 ​

针对前端监控 SDK 与埋点平台的能力扩展、优化项做系统性列举，并评估可行性及落地场景。
可作为产品路线图与技术方案的 checklist。

一、错误与异常监控 ​

功能/优化描述可行性落地场景
JS 运行时错误全局 window.onerror + window.addEventListener('error') 捕获未捕获异常高必做，所有 Web 应用
Promise 未处理拒绝unhandledrejection 捕获未 catch 的 Promise高必做，异步错误高发
资源加载失败监听 error 事件，过滤 target.tagName 为 IMG/SCRIPT/LINK 等高CDN 故障、404 资源、跨域脚本
框架错误边界Vue errorHandler / React Error Boundary 回调中上报高Vue/React 项目，组件树错误定位
Source Map 还原上报堆栈 + 后端/Worker 用 Source Map 还原为源码位置高生产环境必备，便于定位
错误指纹 / 聚合对堆栈或 message 做标准化生成 fingerprint，同质错误合并高降噪、告警去重、趋势统计
错误采样同一用户/同一错误在一定时间内只上报 N 次高高流量场景控制成本
Console 错误转发劫持 console.error/warn 可选上报中辅助排查，需防循环与噪音
iframe 内错误同源 iframe 可递归注入；跨域需 postMessage 约定中嵌入式、门户、微前端
Worker 内错误在 Worker 内单独注入 SDK 或 postMessage 到主线程上报中使用 Web Worker 的应用

二、性能监控 ​

功能/优化描述可行性落地场景
Core Web VitalsLCP、INP/FID、CLS，使用 PerformanceObserver高搜索引擎与体验评估标准
FP / FCP首次绘制、首次内容绘制，从 Performance 条目取高首屏体感、性能基线
TTI / TBT可交互时间、总阻塞时间（Long Task 汇总）中交互就绪时机、主线程卡顿
Long TaskPerformanceObserver 监听 longtask（>50ms）高卡顿分析、与 LCP/INP 关联
首屏时间自定义：首屏关键元素出现、或 FCP + 业务标记高业务侧最关心的指标
接口耗时劫持 fetch/XHR 或使用 PerformanceResourceTiming高接口 SLA、慢请求排查
资源加载瀑布通过 Performance 获取 script/link/img 等耗时高资源优化、CDN 效果
SPA 路由耗时劫持 History/pushState，记录路由切换到渲染完成高SPA 专项、录屏与路由关联
FMP（可选）首次有效绘制，算法复杂、定义不一低可被 LCP/首屏自定义替代
性能评分/等级基于 CWV 等算分（如 0–100），分级展示高大屏、周报、达标率
性能时序关联同一请求 ID 关联接口、长任务、LCP 等中根因分析、一次请求全链路

三、行为埋点与用户行为 ​

功能/优化描述可行性落地场景
点击埋点全局委托或关键节点监听 click，带元素路径/业务属性高转化漏斗、热力图
曝光埋点IntersectionObserver 监听元素进入视口高列表曝光、广告/内容曝光率
页面停留时长进入/离开时间差，注意 visibilitychange、beforeunload高内容质量、跳出率
路由/PV监听 History 与 hash 变化，上报 path + 来源高流量分析、路径分析
自定义事件SDK 提供 track(eventName, payload) 由业务调用高关键业务动作（下单、提交等）
无埋点/全埋点自动采集点击、曝光、页面，通过配置过滤高快速上线、减少业务接入成本
可视化圈选在后台用 DOM 选择器或可视化点选元素配置埋点中运营/产品自助配置，依赖后端与配置下发
埋点校验/回放开发环境或单独页面校验上报内容是否符合预期高上线前验收、回归
用户路径/会话同一 sessionId 串联事件，还原用户路径高路径分析、流失节点
AB 实验关联埋点带 experiment_id、variant，与行为关联分析中实验平台打通、效果评估

四、会话录制与回放 ​

功能/优化描述可行性落地场景
DOM 录屏（rrweb）录制 DOM 变更 + 输入等事件，回放还原操作高复现用户操作、客诉排查
控制台录屏同步录制 console.log/error 等（需脱敏）高与 DOM 回放一起看日志
隐私脱敏录制前/后对输入框、敏感 DOM 打码或忽略高合规、用户信任
采样率按用户/会话/错误等维度抽样录制，控制存储与成本高大流量必做
错误关联回放发生错误时提高该会话录制概率或强制录一段高错误复现率提升
SPA 快照断裂路由切换时主动打 DOM 快照 + 时间片（如 EventsMatrix）高SPA 录屏完整性
仅错误会话仅录制发生错误或特定行为的会话高成本与价值平衡
录制压缩增量、去重、压缩后再上报/存储中带宽与存储优化

五、白屏与可用性 ​

功能/优化描述可行性落地场景
白屏检测（采样点）多坐标 elementFromPoint 判断是否为根/空白容器高渲染失败、CDN 异常、框架未挂载
白屏与错误关联白屏时上报堆栈、资源错误、接口错误高根因归类
健康检查/心跳定时请求业务接口或静态资源，判断可用性中区域/网络故障发现
离线检测navigator.onLine + online/offline 事件高弱网提示、离线队列说明

六、上报与传输层 ​

功能/优化描述可行性落地场景
sendBeacon + fetch 双通道页面卸载用 sendBeacon，其余用 fetch，避免丢失高关闭/刷新页时的数据可靠性
批量上报内存队列攒一批再发，减少请求次数高高频埋点、错误爆发
压缩请求体 gzip/brotli 或 SDK 内压缩高大 payload（录屏、长堆栈）
离线队列IndexedDB 存失败或离线数据，恢复后重传高弱网、闪断、用户快速关页
重试与退避失败重试 + 指数退避，避免雪崩高服务端抖动、限流
采样按用户/会话/错误类型等维度采样上报高成本控制、大流量
降级策略请求失败过多时降级为抽样或仅关键数据中保证主业务、监控不拖垮
多端点/地域按地域或配置选择上报域名，降低延迟与跨域中全球化、合规
请求优先级错误 > 行为 > 性能，队列内按优先级发送中带宽紧张时保关键数据

七、SDK 架构与工程化 ​

功能/优化描述可行性落地场景
插件化核心只做采集与上报，录屏/白屏/性能等以插件注册高按需加载、体积与功能平衡
按需加载录屏等大模块动态 import，首包只含核心高首屏性能、核心 <10KB 目标
多格式构建tsup/vite 输出 ESM + CJS + UMD高不同项目接入方式
版本与灰度从配置或服务下发 SDK 版本/采样率/功能开关中灰度发布、A/B 实验
无侵入加载通过 script 标签 + 独立 bundle，不依赖业务构建高遗留项目、第三方接入
TypeScript全量 TS + 类型声明发布高接入体验、维护性
单例与多实例同一页只初始化一个实例，避免重复上报高微前端、多应用共存
与构建解耦不强制要求 webpack/vite 插件，可独立运行高通用性、接入门槛

八、安全与合规 ​

功能/优化描述可行性落地场景
敏感字段脱敏请求体、URL、header 中 token/密码等过滤或哈希高安全审计、合规
录屏脱敏输入框、特定 class 不录或打码高隐私合规
GDPR/同意管理用户未同意前不上报或仅上报匿名聚合中海外、合规要求
CSP 兼容SDK 尽量不用 eval、inline，或提供 CSP 友好版本中严格 CSP 环境
数据保留策略后端按类型/时间保留，前端可带「可删除」标识中合规、用户权利

九、分析与平台能力（服务端/中台） ​

功能/优化描述可行性落地场景
错误聚合与趋势按指纹/项目/时间聚合，趋势图、同比环比高日周报、稳定性看板
告警规则错误率/数量超阈值、突增等触发钉钉/邮件高故障发现、On-call
多维筛选按 URL、设备、浏览器、用户、版本等筛选高定位影响范围
错误与录屏关联错误详情页可跳转对应会话回放高复现与排查
性能分布P50/P90/P99、地域/设备分布高性能优化优先级
来源追踪从落地页、utm、渠道关联到错误/行为中渠道质量、投放评估
自定义 Dashboard用户自选指标与图表组合中各团队个性化看板
开放 API查询、导出、告警等 API 供内部系统集成中与 CI/运维/BI 打通

十、多端与扩展 ​

功能/优化描述可行性落地场景
微信/支付宝小程序适配小程序 API（错误、性能、请求）、独立 SDK 或统一抽象高多端统一监控
React Native / UniApp适配各端错误与性能 API，统一上报格式中多端一致体验
Node 端请求日志、未捕获异常、关键链路耗时高BFF/服务端监控统一
npm 依赖监控构建时或定期扫描依赖漏洞/过期版本并告警中安全与维护性
API 可用性前端按接口维度统计成功率、耗时、超时率高与后端监控互补
用户反馈关联反馈入口带 session/error 上下文，与错误关联中客诉快速定位

十一、体验与可观测性增强 ​

功能/优化描述可行性落地场景
卡顿帧率requestAnimationFrame 计算 FPS，低于阈值上报中动画/滚动卡顿感知
内存占用（采样）少量采样 performance.memory（Chrome）或 Worker 估算低内存泄漏辅助，兼容性有限
网络类型navigator.connection 上报 effectiveType 等高弱网策略、问题归类
设备与环境分辨率、ua、referrer、语言等标准化上报高多维分析、兼容性统计
与 RUM 关联同一 session 关联错误、性能、行为、录屏高一次问题全链路可观测

十二、落地优先级建议（按阶段） ​

  • P0（首版必做）
    错误采集（含 Promise）、Source Map 还原、错误聚合、sendBeacon+fetch、批量+重试、基础性能（CWV/FP/FCP）、基础行为（PV/点击/自定义事件）、SDK 插件化与多格式构建。

  • P1（第二波）
    白屏检测、离线队列、会话录制（rrweb + SPA 优化）、错误关联录屏、采样与降级、埋点校验、性能评分与看板。

  • P2（增强）
    可视化圈选、健康检查、多端（小程序/Node）、告警与开放 API、隐私与合规增强。

  • P3（按需）
    卡顿帧率、内存采样、AB 实验关联、用户反馈关联、自定义 Dashboard、npm 依赖监控。

十三、开源社区主流方案举例 ​

以下为当前前端监控领域常见开源或「开源 SDK + 云服务」方案，便于对照能力与选型。

方案类型核心能力特点与局限
Sentry商业 + 开源 SDK错误追踪、性能、Session Replay、Source Map生态成熟、集成多，Replay 与部分能力收费；自建需 Sentry self-hosted，成本高
OpenReplay开源可自建会话录屏、网络/控制台/错误/状态、DevTools 式调试、Assist 远协、分析全栈开源、~26KB 采集端，自托管；偏「录屏+分析」一体化，错误聚合与告警需自研或对接
rrweb开源库仅录屏：DOM 序列化 + 事件回放无上报与后台，需自建管道；SPA 路由断裂需自行补快照，适合作为 SDK 的录屏引擎
Grafana Faro开源RUM：错误、性能、Trace，对接 OpenTelemetry与 Grafana 栈打通、标准协议；无录屏、无现成分析 UI，需自建或接 Grafana
GlitchTip开源错误追踪（Sentry 兼容 API）轻量、可替代 Sentry 自建；无性能/录屏，偏错误单点
Webfunny开源（国内）错误、性能、录屏、访问统计，可自部署前后端一体、中文文档；社区与迭代相对小，需评估长期维护
腾讯 Aegis开源 SDK错误、性能、上报、离线队列、自定义上报轻量、适合内部或二次开发；无官方自建后台，需自建服务端
字节 Falcon部分开源/内部错误、性能、多端大厂实践，完整方案多为内部版，开源能力有限
Fundebug商业（国内）错误、录屏、Source Map、微信小程序开箱即用；SaaS 收费、数据在第三方，合规场景受限
PostHog开源产品分析、Session Replay、Feature Flag、Survey偏产品/行为分析；错误与性能非主战场，可作行为侧补充

小结：

  • 全栈开源且「错误 + 性能 + 录屏 + 自托管」一体的以 OpenReplay 为代表；Sentry 是错误与性能的事实标准但完整能力偏商业。
  • 仅要「录屏能力」可嵌 rrweb；要与现有可观测栈（Grafana/OTel）统一可看 Grafana Faro。
  • 国内自建、希望 SDK 可控可改的常见选择有 Aegis、Webfunny 等，后台与告警往往需自行补齐。

十四、我们能做出的不一样的地方（差异化方向） ​

在现有开源与商业方案基础上，可从以下方向做出差异，形成「你的平台」的卖点或内部价值。

方向具体做法差异化点
体积与加载策略核心 <10KB、录屏/高级能力按需异步加载；构建多格式（ESM/CJS/UMD）且与业务构建解耦对首屏与 LCP 更友好，在性能监控场景下自身不拖累指标，与「大而全一次性加载」形成对比
SPA 与框架深度适配针对 Vue/React 路由做「路由切换时主动打 DOM 快照」、EventsMatrix 等时间片方案，减少录屏断裂；与 Error Boundary / errorHandler 深度打通开源方案多数对 SPA 录屏断裂处理不足，可主打「SPA 可用的完整回放」
白屏与可用性闭环白屏检测 + 同一会话内的错误/资源/接口一并上报并聚合展示，一键看到「白屏时发生了什么」把白屏从「现象」做成「可归因的告警与报表」，与单纯错误或单纯录屏区分开
上报与可靠性sendBeacon + fetch 双通道、IndexedDB 离线队列、弱网重试与退避、请求优先级（错误优先）在页面关闭/弱网场景下尽量不丢数据，可强调「关键场景零丢失」或「离线可补发」
成本与采样智能化按错误/白屏/关键行为自动提高该会话采样率，正常会话低采样或仅元数据；按用户/版本/地域多维采样配置在同样预算下「把录制与上报花在出问题的会话上」，与无差别全量采集形成对比
一体化但不臃肿一套 SDK：错误 + 性能 + 行为 + 录屏 + 白屏，但插件化架构、按需启用；同一 session 内所有数据打通（错误详情可跳转录屏、性能可关联接口）不依赖多产品拼凑，一次接入即可做「从报错到回放到性能」的完整排查
合规与隐私录屏与上报前可配置脱敏（输入框、敏感 DOM、URL 参数）；支持「仅聚合不落库」或数据保留策略，便于满足 GDPR/行业合规面向金融、医疗、海外等对合规要求高的场景，强调数据可控与可配置脱敏
垂直场景如：针对中后台/表单场景的「提交失败 + 录屏 + 表单快照」打包分析；或针对活动页的「关键按钮点击 + 转化 + 错误」漏斗不做大而泛，而在 1～2 个场景做深做透，形成可复制的场景方案
与现有基础设施对齐支持对接现有 Trace（如 OpenTelemetry）、日志（如 ELK）、告警（钉钉/飞书）与 CI；Source Map 支持多种上传与解析方式降低「替换现有监控」的成本，主打「可嵌入现有体系」
开发体验与可观测提供埋点校验/回放工具、本地或测试环境一键看上报内容、TypeScript 类型与文档完善让接入方「接得快、查得准」，与只提供 SDK 无配套工具的方案区分

落地建议：

  • 先选 1～2 个方向做深（如「体积 + SPA 录屏」或「白屏闭环 + 一体化」），再逐步扩展。
  • 差异化不必全部自研：可基于 rrweb/Faro 等做集成与增强，把精力放在「编排、策略、平台与体验」上。

附录：可行性说明 ​

  • 高：技术成熟、社区有实践、投入产出比明确，建议优先做。
  • 中：需要一定设计或依赖后端/中台配合，或存在兼容性/合规细节，可排期落地。
  • 低：实现复杂、收益不确定或依赖环境（如内存仅部分浏览器），可作为探索项。

可根据实际团队规模、业务类型（ToB/ToC、国内/海外）与合规要求，从表中勾选功能并调整优先级，形成自己的路线图与迭代计划。

Copyright@ 2024 Luoye Zero