选择项目

在青训营会议中，字节大佬范文杰给我们提供了三个项目：前端监控系统、Low-code 平台、仿掘金官网，自己选择一个项目进行开发，当然也可以自定义项目。对于没有很好的 idea 的我来说，第一个项目———前端监控系统是最好的选择。

为什么选择这个项目？

成长更大。前端监控系统是三个项目中我唯二没有接触过的，低代码平台我虽然也没接触过，但“没吃过猪肉，也见过猪跑”，以往看文章时我多多少少有见过一些低代码的文章，大致能了解到这是一个什么样的项目。但前端监控系统对我来说，是一个充满未知的项目，如果能攻克这个项目，就能极大地满足我的求知欲，我可以从中学到更多的知识。
难度更大。显而易见的，前端监控系统相比较 Low-code 平台而言，难度更大，恰恰我是一个喜欢有挑战的人，战胜有难度的 thing ，让我收获的成就感，是令我十分着迷的。
听起来更厉害。外貌协会的我对于第一印象比较看重，所以颜值要 up （doge）。

了解项目

对于这个神秘感十足的项目，我的首要任务就是尽可能了解这个项目的全貌，以便我有目的性地进行开发。

什么是前端监控系统

提到监控系统，可能大家首先想到的是后端监控，比如检测服务器性能、数据库性能、API 的访问流量、以及各种服务的运行情况等等，都与后端息息相关。

然而前端也有需要监控的地方，假如有这样一个场景：用户反馈某页面某按钮点了没有反应。那负责这块代码的前端程序员就会去检查里面的业务逻辑，一行一行代码 debug ，最后解决了用户的反馈。但如果之后有另一个用户反馈这个按钮又出问题了，那么不就又得去 debug 了吗。毫无疑问，这样的做法是低效率的，不同的用户在特定的场景下可能会触发不同的 bug ，我们无法判断，更捕捉不到报错信息。
那么如果在用户触发异常的那一刻，系统能自动获取到异常的数据并保存起来，然后在后台的某个地方能看到这些数据，我们就可以立刻找到错误原因，更加有针对性地处理 bug ，于是渐渐有了今天的前端监控。

当然了，今天的前端监控并不仅仅是监控异常数据，任何有利于产品分析的数据都可以加入监控。所以我认为前端监控，就是指采集用户使用系统过程中产生的关键数据，存储到数据库，后续可以查找和分析，这样的整套实现就被称为前端监控系统。

怎么做前端监控系统

事先说明：这不是一个企业级项目，在有限的时间内，以我们团队有限的知识储备，无法将这个项目做到像著名的监控项目那么完善，因此我们的定位是在达到青训营要求的前提下，尽可能完善及扩展更多功能。

开发流程：

明确要采集的数据
封装采集方法
发布 npm 包
接入测试项目
视图展示

但笔者在实践过程中发现，其实并不一定要完全遵守这个流程，比如在封装采集方法时，可以暂时跳过 npm 包的发布，先接入测试项目，以便判断封装的采集方法是否正确，代码是否健壮等，等所有采集方法确定正确后，再发布 npm 包，这时可以保证项目能够准确运行。

同时，在开发前还有一件基础工作需要确定，那就是业务逻辑，只有明确了业务逻辑，才能开始搭项目、编码。但其实上面这个开发流程是不准确的，也就是说笔者的开发思路有误，下面我会更正这个项目的开发流程，具体业务逻辑会在下文讲解。

更正开发流程

搭建项目框架
前端监控原生 SDK 开发

明确要采集的数据
封装采集方法
数据上报后端
接入项目测试

将 SDK 发布到 npm

测试项目通过 npm 接入 SDK

后端开发
web 视图展示

接下来笔者会把篇幅留给具体的开发流程。

搭建项目框架

在这里我们首先需要捋清这个项目的业务逻辑，我们要明白这个项目要做什么事，要达到什么目的：我们要监控项目，采集数据，将数据上报给服务器，将数据展示在网页上。

笔者想到这里，自以为懂了，可以开始 coding 了，却没有深入思考：监控项目是指在 React 或 Vue 等框架上封装监控函数吗？ 答案是否定的，框架那么多，怎么可能在一个框架上写监控呢，自然是自己用 js/ts 写原生 SDK 实现监控了。想到这里，我茅塞顿开：既然如此，视图展示和原生 SDK 应该是同级目录，另外加上后端服务，也就是说我要在一个文件夹下管理 3 个项目：

项目文件结构