前言

文章分成以下六部分来介绍：

• 自研监控平台解决了哪些痛点，实现了什么亮点功能？
• 相比传统的监控方案，自研监控的优势有哪些？
• 前端监控的目的、监控的设计方案
• 数据的采集方式：错误信息、性能数据、用户行为、加载资源、个性化指标等
• 自研监控平台亟待优化的方面

痛点

系统上线之后，出现意料之外的问题，无法点击、跳转、白屏、用户会有异常情况，机型兼容情况等等，事前没有第一时间发现异常并上报，问题溯源费时、排查难。

亮点

监控平台提供了三种方式还原错误：

• 支持定位源码
• 支持播放录屏
• 记录用户行为

优势

• 采用pnpm + monorepo开发模式，可以将不同功能的SDK统一成一个
• 监控自定义的个性化指标，比如memory页面内存、首屏加载时间、long task
• 提供了更多的错误还原方式，更细致的还原用户行为栈，更快的排查线上错误
• 提供了 采样对比+ 轮询修正机制 的白屏检测方案

监控的目的

• 事前预警：当监控的数据达到阙值时，通知开发人员避免造成大面积的错误
• 事后分析：通过监控信息，分析故障原因和故障发生点，防止类似情况再次发生
• 性能优化：采集页面关键性能指标，帮助开发者了解页面的性能情况，为页面优化提供方向
• 提供决策：通过监控平台采集各个项目的PV、UV、健康状况、性能指标等数据，帮助决策者了解页面的整体运行情况，为决策提供数据支撑

监控的设计方案

监控流程：

• 监控SDK（使用AOP切片编程思想，发布-订阅设计模式，作用：数据采集与上报）
• 数据看板（参考sentry的数据看板）
• 错误还原
• 监控报警

监控SDK

• 错误采集：接口报错、JS 代码运行错误、语法错误、异步错误、静态资源加载错误
• 用户行为数据采集：用户页面操作、页面跳转、网络请求、页面报错、用户自定义事件
• 性能数据采集：FP、LCP、TTFB、FID、CLS
• 资源数据采集：资源列表、资源缓存率
• 个性化指标采集：long task、内存使用情况、首屏加载时间
• 数据上报：优先使用sendBeacon上报，若数据量大，再使用图片打点上报和fetch上报（常规请求）

数据看板

• 性能指标汇总
• 报错列表
• PV、UV等

错误还原

• sourcemap代码还原
• rrweb前端录屏
• 用户行为栈

监控报警

• 报警规则设置
• 报警方式设置

数据的采集方式

• try/catch
• window.onerror
• window.addEventListener
• unhandledrejection
• Vue.config.errorHandler
• React的ErrorBoundary
• window.addEventListener("error")
• 重写XMLHttpRequest拦截请求错误
• 通过 PerformanceObserver 采集性能数据
• 重写pushState、replaceState事件
• performance.getEntriesByType('resource')和 PerformanceResourceTiming来采集资源加载的详细数据
• performance.memory可以采集此刻内存占用情况
• 利用MutationObserver采集首屏的加载时间

自研监控平台亟待优化的方面

• 图片打点缺点是：url受浏览器长度限制
• 打包生产版本没有map，需要定位错误位置，则在生产环境时，开启sourcemap选项，把map文件放到指定的服务器地址，不可对外暴露
• rrweb前端录屏慎用，开启录屏对前端的性能有一定的影响，主要在于录屏数据的压缩与上传，可考虑worker
• 页面复杂DOM数量多的情况下，全量快照会很耗时，页面渲染会被阻塞，用户强感知
• 异常后自动上报，一旦发生整站故障，那么大概率会所有用户一起上报，重复率很高，server迎来流量洪峰，考虑下怎么扛
• 兜底开关，业务系统接入录屏，一旦发生性能问题，远程一键关闭及时止损
• 不支持ie11及以下的浏览器（什么是ie浏览器!）