前端监控基础知识

前端监控的流程

前端监控的流程大致上包括了数据收集、组装上报、清晰存储、数据消费。

数据收集

• PV 监控：页面切换后新的 URL，页面切换的原因（如初始化的加载、hash mode、history mode）
• JS 错误：错误的类型、描述、行列号、堆栈、错误发生前的用户交互、错误的上下文，目标是更快地定位错误并修复
• 性能监控：首屏加载各阶段的耗时、性能指标、SPA 切换耗时、long task 等等
• 请求监控：请求的路径、状态码、请求头、响应头、请求各阶段的耗时
• 白屏监控：白屏发生的页面、关联的异常、相关的上下文，目的是快速复现白屏原因并解决
• 静态资源监控、用户行为监控、自定义监控

组装上报

• 基础信息保证：页面路径、页面标识、全局 context、部署的版本、部署的环境、网络情况等等
• 采样逻辑：可能在某些页面不需要上传某些数据，可以配置一些条件采样
• 预上报流程：利用一些生命周期的钩子，补充更多的上下文，或者进行信息的脱敏
• 一条条的信息暂存在队列中，最后聚合上报
• sendBeacon：用户关闭页面但是暂存的数据还未发送，这时候需要立即使用 sendBeacon 进行发送，因为它不会阻碍页面的卸载

清洗存储

• User-Agent 解析：解析浏览器的版本、系统版本、机型、设备品牌等
• IP 解析：地区、省市、城市、运营商、地理位置等
• 分类型进行落表落库
• 处理 JS 错误：堆栈归一化（即堆栈格式化）和堆栈反解析（将混淆堆栈通过 source map 反解析成原始的堆栈）
• clickhouse 存储

数据消费

• 总览分析：站点总体的评分情况
• 各功能模块多维度分析：不同功能模块的关注点不同，比如 JS 错误模块主要关注具体错误的跟进和修复；性能模块主要关注某个页面的性能指标，进行针对性优化；站点查询为用户从进入站点到退出站点全过程的操作
• 数据订阅：将业务关注的指标实时地推送给业务
• 实时报警：引导业务设置某些报警的边界信息，当满足条件的时候主动地推送给业务

前端监控关注点

• 可交互性
  • 卡顿监控：由业务逻辑导致，通过用户行为来定位具体的问题
  • 请求监控：长期关注，并关注突变情况，以此为基准衡量服务端的性能
• 服务稳定性：关注请求的成功率
• 加载速度：首屏性能，明确得出可优化的阶段，并指导优化
• 可用性
  • 白屏错误：JS 错误、静态资源错误、请求错误等
  • 请求错误：长期关注错误率的变化、短期的波动等
  • JS 错误：source map 反解，以及对应 issue 的管理
  • 静态资源错误：着重展示能定位到问题的静态资源，排除由于用户自身网络情况导致的问题，降低噪音
• 业务数据
  • PV / UV：用户的留存率
  • 自定义事件

前端监控的目标

• 及时发现线上问题，让一切有迹可循
• 监控站点体验，指导性能优化
• 运行态的稳定性建设
• 主动聚焦和智能诊断