这是我参与「第四届青训营 」笔记创作活动的第4天
前端监控系统需求分析
前端监控目标
1 稳定性 stability
- js错误：js执行错误、promise异常
- 资源错误：js、css资源加载异常
- 接口错误：ajax、fetch请求接口异常
- 白屏：页面空白
2 用户体验 experience
3 业务 business
- pv：页面浏览量和点击量
- uv：访问某个站点的不同ip的人数
- 用户在每一个页面的停留时间
前端监控系统通过监听、上报和存储异常数据，来展示网站/小程序等的稳定性。
其中，异常数据主要包括：JS异常、接口异常、白屏异常和资源加载异常。
- 首先，我们来分析一下JS异常，对于前端应用来说，Js错误的发生直接影响前端应用的质量。监控流程：监控错误 -> 搜集错误 -> 存储错误 -> 分析错误 -> 错误报警-> 定位错误 -> 解决错误。我们通过实时监听页面中JS错误类型、 JS错误信息、JS错误堆栈、JS错误发生的位置以及相关位置的代码；JS错误发生的几率、浏览器的类型，版本号，设备机型等等辅助信息，来分析前端项目JS错误的情况。可以得到以下有效信息，并进行归因分析展示：
如： 一段时间内，应用JS报错的走势(chart图表)、JS错误发生率、JS错误在PC端发生的概率、JS错误在IOS端发生的概率、JS错误在Android端发生的概率，以及JS错误的归类。然后，我们再去其中的Js错误进行详细的分析，辅助我们排查出错的位置和发生错误的原因。
- 其次是资源加载错误，当一个前端项目出现资源加载错误，就意味着用户需要的信息或模块无法显示，因此，此类错误不容小觑。正常情况下，html页面中主要包含的静态资源有：js文件、css文件、图片文件，这些文件加载失败将直接对页面造成影响甚至瘫痪，因此我们需要统计出出现资源加载错误的文件类型、次数、出现的页面以及影响用户数等信息。
- 再次是接口异常，我们要监控接口报错的情况，及时定位线上问题产生的原因，并分析接口的性能，以辅助我们对前端应用的优化。最终统计出报错接口、对应页面以及发生次数等信息。
- 最后是白屏异常，白屏异常是指：用户看到的一直是白屏，页面没有任何内容。比如渲染函数报错、Vue或React路由页面没有内容、网页加载很慢很慢以至规定的时间范围内一直没内容。通过实时测试页面关键点来判断是否出现白屏异常。
