这是我参与「第四届青训营」笔记创作活动的的第1天
选择项目
在青训营会议中，字节大佬范文杰给我们提供了三个项目：前端监控系统、Low-code 平台、仿掘金官网，自己选择一个项目进行开发，当然也可以自定义项目。对于没有很好的 idea 的我来说，第一个项目———前端监控系统 是最好的选择。
为什么选择这个项目？
- 成长更大。前端监控系统是三个项目中我唯二没有接触过的，低代码平台我虽然也没接触过，但“没吃过猪肉，也见过猪跑”，以往看文章时我多多少少有见过一些低代码的文章，大致能了解到这是一个什么样的项目。但前端监控系统对我来说，是一个充满未知的项目，如果能攻克这个项目，就能极大地满足我的求知欲，我可以从中学到更多的知识。
- 难度更大。显而易见的，前端监控系统相比较 Low-code 平台而言，难度更大，恰恰我是一个喜欢有挑战的人，战胜有难度的 thing ，让我收获的成就感，是令我十分着迷的。
- 听起来更厉害。外貌协会的我对于第一印象比较看重，所以颜值要 up （doge）。
了解项目
对于这个神秘感十足的项目，我的首要任务就是尽可能了解这个项目的全貌，以便我有目的性地进行开发。
什么是前端监控系统
提到监控系统，可能大家首先想到的是后端监控，比如检测服务器性能、数据库性能、API 的访问流量、以及各种服务的运行情况等等，都与后端息息相关。
然而前端也有需要监控的地方，假如有这样一个场景：用户反馈某页面某按钮点了没有反应。那负责这块代码的前端程序员就会去检查里面的业务逻辑，一行一行代码 debug ，最后解决了用户的反馈。但如果之后有另一个用户反馈这个按钮又出问题了，那么不就又得去 debug 了吗。毫无疑问，这样的做法是低效率的，不同的用户在特定的场景下可能会触发不同的 bug ，我们无法判断，更捕捉不到报错信息。
那么如果在用户触发异常的那一刻，系统能自动获取到异常的数据并保存起来，然后在后台的某个地方能看到这些数据，我们就可以立刻找到错误原因，更加有针对性地处理 bug ，于是渐渐有了今天的前端监控。
当然了，今天的前端监控并不仅仅是监控异常数据，任何有利于产品分析的数据都可以加入监控。所以我认为前端监控，就是指采集用户使用系统过程中产生的关键数据，存储到数据库，后续可以查找和分析，这样的整套实现就被称为前端监控系统。
怎么做前端监控系统
事先说明：这不是一个企业级项目，在有限的时间内，以我们团队有限的知识储备，无法将这个项目做到像著名的监控项目那么完善，因此我们的定位是在达到青训营要求的前提下，尽可能完善及扩展更多功能。
开发流程：
- 明确要采集的数据
- 封装采集方法
- 发布 npm 包
- 接入测试项目
- 视图展示
