这是我参与「第四届青训营」笔记创作活动的第13天，学习内容为《前端监控》

异常监控：

• JS异常

  • 使用try-catch的话捕捉不到具体语法错误和异步错误，所以推荐用在可预见情况下的错误监控
  • 使用 window.onerror ，比try-catch强，不过也捕获不到资源加载异常或者接口异常，推荐用来捕获预料之外的错误
  • 上报有两种方式，一种是如上面代码中的用 AJAX，会有跨域所以需要服务端支持；还有一种是用 Image 对象，这有一个好处就是图片请求没有跨域；注意URL长度不要超过限制就行。后面的例子中就不一一列举了

• 接口异常

• 白屏异常

  • 意义

    这里和测速的白屏不同，测速的白屏是指：导航页面开始到TTFB之间的时间称之为白屏时间。白屏异常是指：用户看到的一直是白屏，页面没有任何内容。比如渲染函数报错、Vue或React路由页面没有内容、网页加载很慢很慢以至规定的时间范围内一直没内容。监控白屏异常能发现一些遗漏的bug并及时修复。

  • 捕获方法

    页面加载后2秒或进入页面后12秒（兼容一些特殊页面不会触发load事件）检查关键节点是否有内容，默认检查#app节点，如果#app节点没有则检查#whiteScreen节点，查找节点是否有内容。

  • 上报参数：

  当资源加载异常时，上报以下信息：   1、path: string // 页面url   2、detail?: string, // 关键节点内容
  

• 资源异常

  使用 addEventListener('error', callback, true) 在捕获阶段捕捉资源加载错误信息，然后上报服务器

关键性能数据监控：

load（Onload Event），它代表页面中依赖的所有资源加载完的事件。

DCL（DOMContentLoaded），DOM解析完毕。

FP（First Paint），表示渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。

FCP（First Contentful Paint），表示渲染出第一个内容，这里的“内容”可以是文本、图片、canvas。

FMP（First Meaningful Paint），首次渲染有意义的内容的时间，“有意义”没有一个标准的定义，FMP的计算方法也很复杂。

LCP（largest contentful Paint），最大内容渲染时间。

FP、FCP：

• 于是有FP、FCP、FMP被提出来，它们关注的不是“加载”，而是“渲染”，因此能更好地表现用户看到的情况。

  FP、FCP这两个指标虽然表达了渲染的事件，但对“用户关注的内容”没有体现，比如首屏渲染出来一个背景，或者一个loading，可能对于用户来说和白屏区别不大。FMP虽然体现了“关键内容”的要素，但它是复杂的、模糊的，甚至是错误的，并不能准确识别页面主要内容的加载时机。

  后来LCP指标被提出来，表示“用于度量视口中最大的内容元素何时可见”，它用来代替FMP，表征页面的关键元素何时可以被用户看到。

  除了加载性能，还有可交互时间、稳定性指标、流畅性指标，在不同的业务场景都可以被监控用来作为提升用户体验的依据。

DOM Ready：

DNS：

用户行为数据：

PV：

• PV（Page View）访问量, 即页面浏览量或点击量，衡量网站用户访问的网页数量；在一定统计周期内用户每打开或刷新一个页面就记录1次，多次打开或刷新同一页面则浏览量累计。 说白了就是统计一下某些页面在一段时间比如一天内被访问了多少次，哪怕是同一个用户访问多次也没关系，说不定这个用户就是特别钟爱这个页面呢？所以重复访问是计算为有效的。

UV：

• UV（Unique Visitor）独立访客，统计1天内访问某站点的用户数(以cookie为依据);访问网站的一台电脑客户端为一个访客。可以理解成访问某网站的电脑的数量。网站判断来访电脑的身份是通过来访电脑的cookies实现的。如果更换了IP后但不清除cookies，再访问相同网站，该网站的统计中UV数是不变的。如果用户不保存cookies访问、清除了cookies或者更换设备访问，计数会加1。00:00-24:00内相同的客户端多次访问只计为1个访客。 说白了就是根据用户登陆后所记录的cookie（来源可能是session或者token）来标识一个用户，以统计有多少用户访问应用。