前端工程化4：从0到1构建完整的前端监控平台

前言

一套完整的前端监控系统的主要部分：

数据上报方式
数据上送时机
性能数据采集
错误数据采集
用户行为采集
定制化指标
监控sdk

监控的目的：

一、数据上报方式

本文的方案是，优先navigator.sendBeacon，降级使用1x1像素gif图片，根据实际情况需要采用xhr/fetch。

1、图片打点

图片打点上报的优势：
1）支持跨域，一般而言，上报域名都不是当前域名，上报的接口请求会构成跨域
2）体积小且不需要插入dom中（相比之下，script、link要挂载到页面上才可以请求）
3）不需要等待服务器返回数据

图片打点缺点是：

1）url受浏览器长度限制

2）只能发送GET请求，无法获取相应结果

通过创建一个Image对象，将要上报的数据作为URL参数拼接到一个1x1像素的透明图片URL中，发送一个GET请求来触发上报。

const data = { event: 'click', element: 'button' };
const url = ` https://example.com/track?data= ${encodeURIComponent(JSON.stringify(data))}`;
const img = new Image();
img.src = url;

2、fetch请求上报

这类方法用于业务数据确实，模块未展示，需要紧急上报的情况

优点：可以灵活地设置请求头属性，post请求可以发送大体量数据，满足特定场景的埋点需求。

缺点：数据量大的请求占用带宽资源多，增加服务器压力。页面销毁时的监控埋点大概率上报失败。

3、sendBeacon

navigator.sendBeacon是一个用于发送少量数据到服务器的浏览器API。它有以下几个优点

异步和非阻塞

navigator.sendBeacon 是异步的，它不会阻塞浏览器的其他操作。这对于性能监控来说非常重要，因为都不希望监控的过程影响到页面的性能。
在页面卸载时仍然可以发送数据

当用户离开页面（例如关闭页面或者导航到其他页面）时，navigator.sendBeacon仍然可以发送数据。这对于捕获和上报页面卸载前的最后一些性能数据来说非常有用。
低优先级

navigator.sendBeacon 发送的请求是低优先级的，它不会影响到页面的其他网络请求。
简单易用

navigator.sendBeacon 的API非常简单，只需要提供上报的URL和数据，就可以发送请求。

与此同时，navigator.sendBeacon 也有一些限制。例如，它只能发送POST请求，不能发送GET请求。而且，它发送的请求没有返回值，不能接收服务器的响应。

最后，一些旧的浏览器可能不支持 navigator.sendBeacon。因此，在使用 navigator.sendBeacon 时，需要根据实际情况进行兼容性处理。

navigator.sendBeacon()可以在用户离开页面（包括关闭浏览器窗口、标签页，或者在移动设备上切换应用等情况）时进行数据上报。

navigator.sendBeacon()的设计目的是在页面卸载时异步发送数据，尽可能确保数据能够被发送出去而不影响页面的卸载流程。然而，当应用被强制终止时，操作系统可能会立即终止应用的所有进程，不给应用任何机会执行数据上报操作。

以下是一个使用navigator.sendBeacon()的示例代码：

function onPageUnload() {const data = { /* 要上报的数据 */ };const url = '/data-collection-endpoint';navigator.sendBeacon(url, JSON.stringify(data));
}window.addEventListener('unload', onPageUnload);

由于兼容问题，一些旧的浏览器可能不支持 navigator.sendBeacon。因此，在使用 navigator.sendBeacon 时，需要根据实际情况进行兼容性处理：

import {isSupportSendBeacon} from './util'// 如果浏览器不支持 sendBeacon，就使用图片打点
const sendBeacon = (function(){if(isSupportSendBeacon()){return window.navigator.sendBeacon.bind(window.navigator)}const reportImageBeacon = function(url, data){reportImage(url, data)}return reportImageBeacon
})()export function reportImage(url, data) {const img = new Image();img.src = url + '?reportData=' + encodeURIComponent(JSON.stringify(data));
}

三、数据上报时机

1、上报时机有三种：

采用 requestIdleCallback/setTimeout 延时上报。
在 beforeunload 回调函数里上报。
缓存上报数据，达到一定数量后再上报。

将三种方式结合一起上报：

先缓存上报数据，缓存到一定数量后，利用 requestIdleCallback/setTimeout 延时上报。在页面离开时统一将未上报的数据进行上报。

2、还有一种情况：

用户杀掉app进程时

将数据暂存在localStorage中，在用户下次进入应用时检查并上报是一种可行的方法，业内也有这样做的情况。

以下是一个示例代码实现：

// 上报数据的函数
function reportData(data) {// 发送数据到服务器的逻辑，这里只是示例fetch('/reporting-endpoint', {method: 'POST',body: JSON.stringify(data),headers: {'Content-Type': 'application/json',},}).then(response => response.json()).then(result => {console.log('数据上报成功：', result);// 上报成功后可以从 localStorage 中删除数据localStorage.removeItem('pendingData');}).catch(error => {console.error('数据上报失败：', error);// 上报失败可以考虑再次尝试或者在下次进入时继续尝试});
}// 在合适的时机尝试上报 localStorage 中的数据
function checkAndReportPendingData() {const pendingData = localStorage.getItem('pendingData');if (pendingData) {reportData(JSON.parse(pendingData));}
}// 在某个事件触发时（比如页面加载）调用检查函数
window.addEventListener('load', checkAndReportPendingData);// 在需要上报数据时，先将数据存入 localStorage
function saveDataForLaterReporting(data) {localStorage.setItem('pendingData', JSON.stringify(data));
}

这种方法的优点是可以在一定程度上提高数据上报的成功率，尤其是对于一些关键数据，即使在用户意外退出应用的情况下也有机会在下次进入时上报。

然而，这种方法也有一些局限性：

如果用户长时间不使用应用或者清除了浏览器缓存（包括localStorage数据），那么数据可能无法上报。
如果数据量较大，存储在localStorage中可能会占用较多的存储空间。
需要考虑数据的安全性和隐私性，确保存储在localStorage中的数据不会被恶意获取。

四、性能数据收集上报

以Spa页面来说，页面的加载过程大致是这样的：
在这里插入图片描述

包括dns查询、建立tcp连接、发送http请求、返回html文档、html文档解析等阶段

最初，可以通过 window.performance.timing 来获取加载过程模型中各个阶段的耗时数据，后来 window.performance.timing 被废弃，通过 PerformanceObserver 来获取。旧的 api，返回的是一个 UNIX 类型的绝对时间，和用户的系统时间相关，分析的时候需要再次计算。而新的 api，返回的是一个相对时间，可以直接用来分析。
根据最初的规划，性能监控需要收集的数据指标需要有FP、FCP、LCP、DOMContentLoaded、onload、资源加载时间、接口请求时间。

收集FP、FCP、LCP、资源加载时间具体是利用浏览器Performance API。关于Performance API：

// window.performance.timing 各字段说明
{navigationStart,  // 同一个浏览器上下文中，上一个文档结束时的时间戳。如果没有上一个文档，这个值会和 fetchStart 相同。unloadEventStart,  // 上一个文档 unload 事件触发时的时间戳。如果没有上一个文档，为 0。unloadEventEnd, // 上一个文档 unload 事件结束时的时间戳。如果没有上一个文档，为 0。redirectStart, // 表示第一个 http 重定向开始时的时间戳。如果没有重定向或者有一个非同源的重定向，为 0。redirectEnd, // 表示最后一个 http 重定向结束时的时间戳。如果没有重定向或者有一个非同源的重定向，为 0。fetchStart, // 表示浏览器准备好使用 http 请求来获取文档的时间戳。这个时间点会在检查任何缓存之前。domainLookupStart, // 域名查询开始的时间戳。如果使用了持久连接或者本地有缓存，这个值会和 fetchStart 相同。domainLookupEnd, // 域名查询结束的时间戳。如果使用了持久连接或者本地有缓存，这个值会和 fetchStart 相同。connectStart, // http 请求向服务器发送连接请求时的时间戳。如果使用了持久连接，这个值会和 fetchStart 相同。connectEnd, // 浏览器和服务器之前建立连接的时间戳，所有握手和认证过程全部结束。如果使用了持久连接，这个值会和 fetchStart 相同。secureConnectionStart, // 浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，返回 0。requestStart, // 浏览器向服务器发起 http 请求(或者读取本地缓存)时的时间戳，即获取 html 文档。responseStart, // 浏览器从服务器接收到第一个字节时的时间戳。responseEnd, // 浏览器从服务器接受到最后一个字节时的时间戳。domLoading, // dom 结构开始解析的时间戳，document.readyState 的值为 loading。domInteractive, // dom 结构解析结束，开始加载内嵌资源的时间戳，document.readyState 的状态为 interactive。domContentLoadedEventStart, // DOMContentLoaded 事件触发时的时间戳，所有需要执行的脚本执行完毕。domContentLoadedEventEnd,  // DOMContentLoaded 事件结束时的时间戳domComplete, // dom 文档完成解析的时间戳， document.readyState 的值为 complete。loadEventStart, // load 事件触发的时间。loadEventEnd // load 时间结束时的时间。
}

1、收集上报FP;

FP（First Paint）首次绘制，即浏览器开始绘制页面的时间点。这包括了任何用户自定义的绘制，它是渲染任何文本、图像、SVG等的开始时间

import { getPageURL, isSupportPerformanceObserver } from '../utils/util'
import { lazyReportCache } from '../utils/report'export default function observePaint() {
if (!isSupportPerformanceObserver()) returnconst entryHandler = (list) => {        for (const entry of list.getEntries()) {if (entry.name === 'first-paint') {observer.disconnect()}const json = entry.toJSON()delete json.durationconst reportData = {...json,subType: entry.name,type: 'performance',pageURL: getPageURL(),}lazyReportCache(reportData)}
}const observer = new PerformanceObserver(entryHandler)
// buffered 属性表示是否观察缓存数据，也就是说观察代码添加时机比事情触发时机晚也没关系。
observer.observe({ type: 'paint', buffered: true })
}

代码中observer.disconnect()是PerformanceObserver对象的一个方法，用于停止观察性能指标并断开与回调函数的连接。

事实上

observer.observe({ type: 'paint', buffered: true })

包含两种性能指标：first-contentful-paint和first-paint。

当调用observer.disconnect()方法时，PerformanceObserver对象将停止观察性能指标，并且不再接收任何性能指标的更新。与此同时，与回调函数的连接也会被断开，即使有新的性能指标数据产生，也不会再触发回调函数。

这个方法通常在不再需要观察性能指标时调用，以避免不必要的资源消耗。

2、收集上报FCP

FCP（First Contentful Paint）：首次内容绘制，即浏览器首次绘制DOM内容的时间点，如文本、图像、SVG等。

看起来FCP和FP一致，其实还是有区别的

FCP（First Contentful Paint）：FCP是指页面上首次渲染任何文本、图像、非空白的canvas或SVG的时间点。它表示了用户首次看到页面有实际内容的时间，即页面开始呈现有意义的内容的时间点。

FP（First Paint）：FP是指页面上首次渲染任何内容的时间点，包括背景颜色、图片、文本等。它表示了页面开始呈现任何可视化内容的时间，但不一定是有意义的内容。

简而言之，FCP关注的是页面上首次呈现有意义内容的时间点，而FP关注的是页面上首次呈现任何可视化内容的时间点。FCP更关注用户感知的页面加载时间，因为它表示用户可以开始阅读或与页面进行交互的时间点。而FP则更关注页面开始渲染的时间点，无论内容是否有意义

import { getPageURL, isSupportPerformanceObserver } from '../utils/util'
import { lazyReportCache } from '../utils/report'export default function observePaint() {
if (!isSupportPerformanceObserver()) returnconst entryHandler = (list) => {        for (const entry of list.getEntries()) {if (entry.name === 'first-contentful-paint') {observer.disconnect()}const json = entry.toJSON()delete json.durationconst reportData = {...json,subType: entry.name,type: 'performance',pageURL: getPageURL(),}lazyReportCache(reportData)}}const observer = new PerformanceObserver(entryHandler)// buffered 属性表示是否观察缓存数据，也就是说观察代码添加时机比事情触发时机晚也没关系。observer.observe({ type: 'paint', buffered: true })}

3、收集上报LCP

LCP（Largest Contentful Paint）：最大内容绘制，即视口中最大的图像或文本块的渲染完成的时间点

import { getPageURL, isSupportPerformanceObserver } from '../utils/util'
import { lazyReportCache } from '../utils/report'export default function observeLCP() {
if (!isSupportPerformanceObserver()) {
return
}const entryHandler = (list) => {if (observer) {observer.disconnect()}for (const entry of list.getEntries()) {const json = entry.toJSON()delete json.durationconst reportData = {...json,target: entry.element?.tagName,name: entry.entryType,subType: entry.entryType,type: 'performance',pageURL: getPageURL(),}lazyReportCache(reportData)}}const observer = new PerformanceObserver(entryHandler)observer.observe({ type: 'largest-contentful-paint', buffered: true })}

4、收集上报DOMContentLoaded

DOMContentLoaded：当HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，无需等待样式表、图像和子框架的完成加载

import { lazyReportCache } from '../utils/report'export default function observerLoad() {
['DOMContentLoaded'].forEach(type => onEvent(type))
}function onEvent(type) {function callback() {lazyReportCache({type: 'performance',subType: type.toLocaleLowerCase(),startTime: performance.now(),})window.removeEventListener(type, callback, true)}window.addEventListener(type, callback, true)
}

5、收集上报onload数据

onload：当所有需要立即加载的资源（如图片和样式表）已加载完成时的时间点

import { lazyReportCache } from '../utils/report'export default function observerLoad() {
\['load'].forEach(type => onEvent(type))
}function onEvent(type) {
function callback() {
lazyReportCache({
type: 'performance',
subType: type.toLocaleLowerCase(),
startTime: performance.now(),
})window.removeEventListener(type, callback, true)}window.addEventListener(type, callback, true)}

6、收集上报资源加载时间

收集资源加载时间

observer.observe({ type: 'resource', buffered: true })

我在想什么是资源加载时间？应该就是下面的entry.duration的。我觉得写监控SDK很有意义，可以更加深入的学习浏览器模型。了解浏览器是怎么看待各种html文件资源的

import { executeAfterLoad, isSupportPerformanceObserver} from '../utils/util'
import { lazyReportCache } from '../utils/report'export default function observeEntries() {executeAfterLoad(() => {observeEvent('resource')})
}export function observeEvent(entryType) {
function entryHandler(list) {const data = list.getEntries()for (const entry of data) {if (observer) {observer.disconnect()}lazyReportCache({name: entry.name, // 资源名称subType: entryType,type: 'performance',sourceType: entry.initiatorType, // 资源类型duration: entry.duration, // 资源加载耗时dns: entry.domainLookupEnd - entry.domainLookupStart, // DNS 耗时tcp: entry.connectEnd - entry.connectStart, // 建立 tcp 连接耗时redirect: entry.redirectEnd - entry.redirectStart, // 重定向耗时ttfb: entry.responseStart, // 首字节时间protocol: entry.nextHopProtocol, // 请求协议responseBodySize: entry.encodedBodySize, // 响应内容大小responseHeaderSize: entry.transferSize - entry.encodedBodySize, // 响应头部大小resourceSize: entry.decodedBodySize, // 资源解压后的大小startTime: performance.now(),})}}let observerif (isSupportPerformanceObserver()) {observer = new PerformanceObserver(entryHandler)observer.observe({ type: entryType, buffered: true })}}

7、收集上报接口请求时间

这里通过覆写原生xhr对象方法，对方法做拦截实现接口时间收集以及上报

import { originalOpen, originalSend, originalProto } from '../utils/xhr'
import { lazyReportCache } from '../utils/report'function overwriteOpenAndSend() {originalProto.open = function newOpen(...args) {this.url = args\[1]this.method = args\[0]originalOpen.apply(this, args)}originalProto.send = function newSend(...args) {this.startTime = Date.now()const onLoadend = () => {this.endTime = Date.now()this.duration = this.endTime - this.startTimeconst { status, duration, startTime, endTime, url, method } = thisconst reportData = {status,duration,startTime,endTime,url,method: (method || 'GET').toUpperCase(),success: status >= 200 && status < 300,subType: 'xhr',type: 'performance',}lazyReportCache(reportData)this.removeEventListener('loadend', onLoadend, true)}this.addEventListener('loadend', onLoadend, true)originalSend.apply(this, args)}}export default function xhr() {
overwriteOpenAndSend()
}

五、错误数据收集上报

根据最初的规划需要收集资源加载错误、js错误和promise错误。

1、收集上报资源加载错误

收集 JavaScript、CSS 和图片的加载错误，使用window.addEventListener监听错误

import { lazyReportCache } from '../utils/report'
import { getPageURL } from '../utils/util'export default function error() {// 捕获资源加载失败错误 js css img...window.addEventListener('error', e => {const target = e.targetif (!target) returnif (target.src || target.href) {const url = target.src || target.hreflazyReportCache({url,type: 'error',subType: 'resource',startTime: e.timeStamp,html: target.outerHTML,resourceType: target.tagName,paths: e.path.map(item => item.tagName).filter(Boolean),pageURL: getPageURL(),})}}, true)}

2、收集上报js错误

收集 JavaScript 错误，可以使用 window.onerror 或者 window.addEventListener('error', callback)

import { lazyReportCache } from '../utils/report'
import { getPageURL } from '../utils/util'export default function error() {// 监听 js 错误window.onerror = (msg, url, line, column, error) => {lazyReportCache({msg,line,column,error: error.stack,subType: 'js',pageURL: url,type: 'error',startTime: performance.now(),})}}

说明一下window.onerror无法捕获资源加载错误，所以这里可以单独拿来监听js错误。

3、收集上报promise错误

收集 Promise 错误，可以使用 window.addEventListener(‘unhandledrejection’, callback)

import { lazyReportCache } from '../utils/report'
import { getPageURL } from '../utils/util'export default function error() {// 监听 promise 错误 缺点是获取不到列数据window.addEventListener('unhandledrejection', e => {lazyReportCache({reason: e.reason?.stack,subType: 'promise',type: 'error',startTime: e.timeStamp,pageURL: getPageURL(),})})}

为了减少对html文件代码的干扰，错误收集可以添加一个缓存代理。

六、行为数据收集上报

根据最初的规划，行为数据收集pv、uv，页面停留时长，用户点击。

1、收集上报pv、uv

收集 pv（Page View，页面浏览量）和 uv（Unique Visitor，独立访客）数据，需要在每次页面加载时发送一个请求到服务器，然后在服务器端进行统计

import { lazyReportCache } from '../utils/report'
import getUUID from './getUUID'
import { getPageURL } from '../utils/util'export default function pv() {lazyReportCache({type: 'behavior',subType: 'pv',startTime: performance.now(),pageURL: getPageURL(),referrer: document.referrer,uuid: getUUID(),})
}

这里只能收集了pv数据，uv数据统计需要在服务端进行。

2、页面上报停留时长

收集页面停留时长，可以在页面加载时记录一个开始时间，然后在页面卸载时记录一个结束时间，两者的差就是页面的停留时长。这个计算逻辑可以放在beforeunload事件里做

import { report } from '../utils/report'
import { onBeforeunload, getPageURL } from '../utils/util'
import getUUID from './getUUID'export default function pageAccessDuration() {onBeforeunload(() => {report({type: 'behavior',subType: 'page-access-duration',startTime: performance.now(),pageURL: getPageURL(),uuid: getUUID(),}, true)})
}

3、用户点击上报

收集用户点击事件，可以使用 addEventListener 来监听 click 事件，这里借助了冒泡

import { lazyReportCache } from '../utils/report'
import { getPageURL } from '../utils/util'
import getUUID from './getUUID'export default function onClick() {
['mousedown', 'touchstart'].forEach(eventType => {let timerwindow.addEventListener(eventType, event => {clearTimeout(timer)timer = setTimeout(() => {const target = event.targetconst { top, left } = target.getBoundingClientRect()lazyReportCache({top,left,eventType,pageHeight: document.documentElement.scrollHeight || document.body.scrollHeight,scrollTop: document.documentElement.scrollTop || document.body.scrollTop,type: 'behavior',subType: 'click',target: target.tagName,paths: event.path?.map(item => item.tagName).filter(Boolean),startTime: event.timeStamp,pageURL: getPageURL(),outerHTML: target.outerHTML,innerHTML: target.innerHTML,width: target.offsetWidth,height: target.offsetHeight,viewport: {width: window.innerWidth,height: window.innerHeight,},uuid: getUUID(),})}, 500)})})}

七、改造完善四维监控类

将性能数据、错误数据、行为数据入口文件的收集方法在监控类四维init方法内初始化

import performance from './performance/index'
import behavior from './behavior/index'
import error from './error/index'class FourDimension {constructor() {this.init()}// 初始化init() {performance()error()behavior()}
}new FourDimension().init()

在具体使用过程中，采用异步加载的方式引入。

八、自定义指标

1、long task

执行时间超过50ms的任务，被称为 long task 长任务

获取页面的长任务列表：

const entryHandler = list => {for (const long of list.getEntries()) {// 获取长任务详情console.log(long);}
};let observer = new PerformanceObserver(entryHandler);
observer.observe({ entryTypes: ["longtask"] });

2、memory页面内存

performance.memory 可以显示此刻内存占用情况，它是一个动态值，其中：

jsHeapSizeLimit 该属性代表的含义是：内存大小的限制。
totalJSHeapSize 表示总内存的大小。
usedJSHeapSize 表示可使用的内存的大小。

通常，usedJSHeapSize 不能大于 totalJSHeapSize，如果大于，有可能出现了内存泄漏

// load事件中获取此时页面的内存大小
window.addEventListener("load", () => {console.log("memory", performance.memory);
});

3、首屏加载时间

首屏加载时间和首页加载时间不一样，首屏指的是屏幕内的dom渲染完成的时间
比如首页很长需要好几屏展示，这种情况下屏幕以外的元素不考虑在内
计算首屏加载时间流程
1）利用MutationObserver监听document对象，每当dom变化时触发该事件
2）判断监听的dom是否在首屏内，如果在首屏内，将该dom放到指定的数组中，记录下当前dom变化的时间点
3）在MutationObserver的callback函数中，通过防抖函数，监听document.readyState状态的变化
4）当document.readyState === 'complete'，停止定时器和取消对document的监听
5）遍历存放dom的数组，找出最后变化节点的时间，用该时间点减去performance.timing.navigationStart 得出首屏的加载时间