实现前端监控系统的胡思乱想

实现一个系统，统计前端页面性能、页面JS报错、用户操作行为、PV/UV、用户设备等信息，并进行必要的监控报警。方案你会如何设计，用什么技术点，什么样的系统架构，难点会在哪里等等？？

这个问题，因为确实没有相关的项目经验，也确实了解的不多🙅‍♂️。仅凭平日的一些积累和调研，先记录一下个人想法吧😂😂

开头

调研了一波发现，其实有很多成熟的前端监控框架，比如webfunny，通过向html页面中插入一段简单的JS探针代码，实现无埋点监控前端页面的用户行为。感觉有些 🐂 🍺，接下来就这个话题简单谈谈个人看法。

就我目前能力所知，一个成熟的监控系统，大致可以分为四个阶段：日志采集、日志存储、统计分析、监控告警。

设计思路

脚手架搭建 ：
create-react-app+ typescript + react-app-rewired + customize-cra

理由：

• 熟悉cra + ts的技术栈，相对于新技术栈学习成本较低😸
• ts 更具可维护性，可移植；
• 使用react-app-rewired为了无eject配置项目；
• 使用customize-cra，其可扩展性强，能应对复杂的任务，比如自定义loader、使用千奇百怪的轮子等；

前端监控

性能监控： 使用Resource Timing API 和 Performance Timing API，可以计算许多重要的指标，比如页面性能统计的起始点时间、首屏时间等。

异常监控： 前端捕获异常分为全局捕获和局部捕获。局部捕获作为补充，对某些特殊情况进行捕获，但分散，不利于管理。所以，我会选择全局捕获的方式，即通过全局的接口，将捕获代码集中写在一个地方。具体在实现项目中，我应该会采用badjs-report，它重写了 window.onerror 进行上报异常，无需编写任何捕获错误的代码。

前端埋点： 埋点的方案有手动埋点，即在需要监控的地方插入监控逻辑，但是工作量可能会很大；还有无埋点，前端自动采集全部事件，上报埋点数据，但是缺点是服务器压力会很大。我可能倾向于采用声明式埋点，将埋点代码和具体的业务逻辑解耦，只用关心需要埋点的控件，并且为这些控件声明需要的埋点数据即可，主要是为了降低埋点的成本吧。在dom元素上增添埋点信息，比如

// key表示埋点的唯一标识；act表示埋点方式
<button data-stat="{key:'buttonKey', act: 'click'}">埋点</button>

监控告警： 这里我认为最便捷、高效的方式，就是接入内部的告警组了吧，尤其是在阿里，似乎什么轮子都有，那可能需要考虑就是触发告警的阈值和时机了。

技术难点

我认为，可能整个系统比较复杂的就是如何高效合理的进行监控数据上传。除了异常报错信息本身，还需要记录用户操作日志，如果任何日志都立即上报，这无异于自造的DDOS攻击。那就需要考虑前端日志的存储，日志如何上传，上传前如何整理日志等问题。

可能会采取的方案

• indexDB存储日志，因为容量大、异步！不用考虑阻塞页面问题。
• 在一个webworker中对日志进行整理，比如对每一条日志打上标签，进行分类等操作。
• 上报日志也在webworker中进行，可以按照重要紧急度区分，判断是否延时或者立即上报。

相关调研

webfunny-无埋点监控
岳鹰-WEB前端监控
Fundebug - 不放过每一个BUG
Error reporting, monitoring, and resolution with Bugsnag
前端异常监控-BetterJS