一、前端监控现状

近年来，前端监控是越来越火，目前已经有很多成熟的产品供我们选择使用，如下图所示

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/97f1b1914a374139970dc095eff2b1e6~tplv-k3u1fbpfcp-watermark.image

有这么多监控平台，那为什么还要学习搞前端监控？一方面人家是要钱的另一方面自己的项目需要定制化的功能。

二、前端监控的目的

1. 提升用户体验
2. 更快的发现发现异常、定位异常、解决异常
3. 了解业务数据，指导产品升级——数据驱动的思想

三、前端监控的流程

https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9293bdb421414e74ae3ab57ecd89816f~tplv-k3u1fbpfcp-watermark.image

3.1 采集

前端监控的第一个步骤就是数据采集，采集的信息包含环境信息、性能信息、异常信息、业务信息。

3.1.1 环境信息

环境信息是每个监控系统必备的内容，毕竟排查问题的时候需要知道来自哪个页面、浏览器是谁、操作用户是谁……,这样才能快速定位问题，解决问题。一般这些常见的环境信息主要包含：

1. url：正在监控的页面，该页面可能会出现性能、异常问题。获取方式为： window.location.href
2. ua:访问该页面时该用户的userAgent信息，包含操作系统和浏览器的类型、版本等。获取方式为： window.navigator.userAgent
3. token：记录当前用户是谁。通过记录该用户是谁。 一方面方便将该用户的所有监控信息建立联系，方便数据分析； 另一方面通过该标识可以查看该用户的所有操作，方便复现问题。

3.1.2 性能信息

页面的性能直接影响了用户留存率，，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。，Google DoubleClick 研究表明：如果一个移动端页面加载时长超过 3 秒，用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒，用户就会流失 10%。所以我们的追求就是提高页面的性能，为了提高性能需要监控哪些指标呢？