草根级前端监控系统

在经过两年多的线上沉淀后，将监控代码重新用 TypeScript 编写，删除冗余逻辑，正式开源。根据shin-monitor的目录结构可知，源码集中在src目录中。

页面奔溃包含两种场景，第一种是浏览器在加载网页时遇到问题导致的奔溃，另一种是因为脚本渲染出错导致页面空白无内容的奔溃。

在直播间有一个小时榜的Web页面，经常有用户反映点击小时榜，弹出的页面会有蛮长的一段（3秒上下）时间白屏。 查看性能监控中的白屏时间，发现最多1.6秒，最少0.4秒平均每小时的白屏在1秒左右。

公司目前在线上运行着一款小程序，为了能监控小程序的运行情况，自行开发了一个参数搜集的SDK，名称为 shin.js，放置在 utils 目录中。目前只搜集了打印、通信和错误。

在将监控日志的服务独立部署后，还是发现CPU会在不特定时间段（例如21 ~ 22、23 ~ 02等）飙到70%，内存也是一路飙升不会下降，明显是出现了内存泄漏，需要进一步做优化。

前端性能监控是个老话题了，各个团队都会对其有所关注，因为关注性能是工程师的本分。 页面性能对用户体验而言十分关键，每次重构或优化，仅靠手中的几个设备或模拟的测试，缺少说服力，需要有大量的真实数据来佐证

在将数据传送到后台之前，已经做了一轮清洗工作，如果有需要还可以再做一次清洗。 日志表中自增的 id 直接偷懒使用了 bigint，没有采用分表等其他技术。

目前市面上有许多成熟的前端监控系统，但我们没有选择成品，而是自己动手研发。这里面包括多个原因： 填补H5日志的空白 节约公司费用支出 可灵活地根据业务自定义监控 回溯时间能更长久 反哺运营和产品。