这是我参与「第四届青训营」笔记创作活动的的第五天，今天介绍结营项目。我们小组本次参加青训营选择的项目是前端监控系统，本人主要完成SDK部分，采集上报数据。

项目简介

这个项目是做什么的

随着前端体量渐大，业务逐渐复杂，我们需要一个前端监控系统，帮我们监控前端各种数据，提升前端性能。一个监控系统大致包括四个阶段：日志采集上报、日志存储、统计与分析、数据展示。

监控前端页面在不同浏览器、微信、等APP上的异常、性能、业务数据。

仅SDK部分分析：

上报请求采取sendbeacon向下兼容。最简单粗暴的做法可能是直接写一个AJAX请求上报，但这种方式成功率不稳定，极易在页面切换时丢失日志；并且，对于大流量站点还需要考虑带宽节流等诉求。所以优先使用sendbeacon向下兼容。

收集性能和异常日志，在本地做一定的处理过滤等，将数据上报到服务器。

后端接收前端上报日志后会鉴权、过滤、清洗后存储入库，用于用户查看分析问题；一般选择搜索数据库和时序数据库。

通过预设的条件和规则，对存储的日志信息进行统计和筛选，用于用户进一步的分析规律找到问题根因。

通过提供一个可视化的数据面板，让用户可以看到统计趋势数据和具体日志信息，提供丰富的分析、对比、OLAP，更快速的定位和解决问题。

SDK部分：原本计划通过performance.timing可以拿到页面首次加载的性能数据，而在最新的标准中performance.timing已经被废弃，因此我们改为使用performance.getEntriesByType('navigation')。

虽然不能像预期计划一样完成，做出来的项目也不完美，但我们小组相互帮助，相互积极配合，经过短期磨合，在不到俩周的时间内完成项目设计，编写，调试，测试，并在后续时间持续优化，这让我非常有成就感。