5、监控原理
错误监控
1. JS 执行错误
要捕获 JS 的运行时错误，只需要监听 onerror 事件。
window.onerror = (message, source, lineno, colno, error) => {
};
2. promise 执行错误
要捕获没有被用户 catch 的 promise 错误，可以通过监听 unhandledrejection 事件实现。
window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
const reason = event && stringifyPlus(event.reason);
this.publishErrorLog({
msg: `PROMISE_ERROR: ${reason}`,
level: LogType.PROMISE_ERROR,
});
};);
3. 资源加载失败
只要监听 error 事件就能获取到资源加载失败的信息。
window.document.addEventListener('error', (event: Event) => {
const target = event?.target || event?.srcElement;
const url = target.src || target.href;
const { tagName } = target;
...
}, true);
4. 接口请求异常
要获取接口请求的异常，需要劫持 XMLHttpRequest 和 fetch 这 2 个浏览器 API，在请求返回的时候判断是否有错误。
性能监控
1. 页面测速
Performance API
2. Web Vitals
Web Vitals 的获取方式比较简单，直接使用 google 提供的 npm 包就能获取到，我们就简单归类为浏览器 API 的直接调用。
import {getFCP, getLCP, getFID, getCLS} from 'web-vitals/base'
目前 Google 的 web-vitals 源码 中提供了5个指标，分别为
-
CLS（Cumulative Layout Shift - 累积布局移位）: CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。得分是零到任意正数，其中 0 表示无偏移，且数字越大，网页的布局偏移越大。
-
FCP（First Contentful Paint - 首次内容绘制）：FCP 度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间，页面内容包括文本、图像（包括背景图像）、
-
FID（First Input Delay - 首次输入延迟）：从用户首次与您的网页互动（点击链接、点按按钮，等等）到浏览器响应此次互动之间的用时。这种衡量方案的对象是被用户首次点击的任何互动式元素。
-
LCP（Largest Contentful Paint - 最大内容绘制）：LCP 度量从用户请求网址到在视口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频，也可能是大型块级文本元素。
-
TTFB (Time To First Byte - 从服务器接收到第一个字节耗时) TTFB 是发出页面请求到接收到应答数据第一个字节的时间总和，它包含了 DNS 解析时间、 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节的时间。
目前 RUM & TAM 采有了其中最重要的三个属性：LCP，FID，CLS。
3. 接口测速
要对接口进行测速，同样需要劫持 XMLHttpRequest和 fetch这 2 个浏览器 API，记录接口发起调用和返回数据的时间差。
4. 资源测速
资源测速是使用 PerformanceObserver 来实现的。
const observer = new window.PerformanceObserver((list) => {
const entries = list.getEntries();
for (let i = 0, l = entries.length; i < l; i++) {
const entry = entries[i];
const duration = entry.duration.toFixed(2);
...
}
});
observer.observe({ entryTypes: ['resource'] });