从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

已于 2025-05-08 15:01:22 修改
阅读量2.2k 收藏 31
点赞数 67
分类专栏： JavaScript 文章标签： 前端
于 2025-05-08 14:35:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42696432/article/details/147732424
版权

目录

前言

        在当今快速发展的Web开发领域中，无论是面试还是与同行交流时，“高大上”的技术术语层出不穷。还记得我第一次了解到前端埋点监控是在一家知名大厂的面试过程中。当面试官问及如何实现前端埋点监控时，我感到一阵茫然——脑海中一片模糊，各种概念交织却难以理清头绪。不出所料，那次面试的第三轮我没有通过。

        这次经历成为我深入学习前端埋点监控的起点。回到家中，我开始查阅大量资料、观看教学视频，逐步摸索出了一套学习路径。本文便是基于这段时间的学习和实践总结而成，旨在为那些刚开始接触前端埋点监控的朋友提供一个详尽的指南。

        文中涵盖了从PV统计、页面加载性能指标（如FMP、LCP、FID、FP、FCP）到Promise异常监控、错误监控以及资源加载监控等多方面的内容。为了确保每个细节都能被清晰理解，并且避免将来遗忘关键知识点，我在编写时尽可能地详尽描述了每一步骤和每一个概念。

        无论你是刚踏入前端领域的新人，还是希望进一步提升技能的开发者，相信这篇文章都能为你提供有价值的参考。让我们一起揭开前端埋点监控的神秘面纱，掌握这一提升网站性能和用户体验的重要工具。

        觉得内容有用？别忘了点个赞+收藏+关注，三连走一波！你的支持是我持续输出的动力 💪

gitee仓库地址：地址

为什么要做前端监控

珠峰架构公开课地址【下文根据公开课边学边做边实现，加上自己的个人想法】：珠峰公开课地址

更快发现问题和解决问题。
做产品的决策依据。
提升前端工程师的技术深度和广度。
为业务扩展提供更多可能性。

前端监控目标

稳定性

错误名称备注
JS错误JS执行错误或者promise异常
资源异常script，link资源加载异常
接口错误ajax或fetch接口请求异常
白屏页面白屏

用户体验

错误名称备注
加载时间各个阶段的加载时间
TTFB首字节时间是指浏览器发起第一个请求到数据返回第一个字节所消耗的时间，这个时间包含了网络请求时间，后端处理时间。
FP首次绘制首次绘制包括了任何用户自定义的背景绘制，它是将第一个像素点绘制到屏幕的时刻。
FCP首次内容绘制首次内容绘制是浏览器将第一个DOM渲染到屏幕的时间，可以是任何文本图像和SVG等的时间。
FMP首次有意义绘制首次有意义绘制是页面可用性的亮度标准。
FID首次输入延迟用户首次和页面交互到页面响应交互的时间
卡顿超过50ms的长任务

业务

错误名称备注
PVpage view 即页面浏览量或点击量
UV指访问某个站点不同IP地址的人数
页面停留时间用户在每一个页面停留的时间

前端监控流程

  • 前端埋点
  • 数据上报
  • 分析和计算将采集到的数据进行加工汇总
  • 可视化展示将数据按各个维度进行展示
  • 监控报警，发现问题后按一定条件触发报警
    从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
    上图中，前端主要关注埋点和数据采集两个阶段即可。

常见埋点方案

代码埋点

代码埋点就是以嵌入代码的形式进行埋点，比如需要监控用户的点击事件，会选择在用户点击时插入一段代码，保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给服务端。

优点： 可以在任意时刻，精确的发送或保存所需要的数据信息。
缺点： 工作量比较大

可视化埋点

通过可视化交互的手段，代替代码埋点，将业务代码和埋点代码分离，提供一个可视化交互的页面，输入业务代码，通过这个可视化系统可以在业务代码中自定义的增加埋点时间等等，最后输出的代码耦合了业务代码和埋点代码，可视化埋点其实是用系统来代替手工插入埋点代码。

无痕埋点

前端的任意一个事件都被绑定一个标识，所有的事件都被记录下来，通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析.

缺点： 数据传输和服务器压力增加，无法灵活定制数据结构。

创建项目

第一步、创建monitor文件，cmd进入文件进行npm init -y 项目初始化

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第二步、创建src/index.js和src/index.html文件

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第三步、创建webpack.config.js文件

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

const path = require('path')
// webpack打包项目的，HtmlWebpackPlugin生成产出HTML文件，user-agent 把浏览器的userAgent变成一个对象 
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: "./src/index.js", // 入口文件 
  context: process.cwd(), // 上下文目录 
  mode: "development", // 开发模式 
  output: {
    path: path.resolve(__dirname, "dist"), // 输出目录 
    filename: "monitor.js" // 文件名 
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"), // devServer静态文件目录，替换contentBase 
    },
  }, plugins: [new HtmlWebpackPlugin({ // 自动打包出HTML文件 
    template: "./src/index.html",
    inject: "head"
  })]
}

第四步、安装所需模块

npm install webpack webpack-cli html-webpack-plugin user-agent -D

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

npm i webpack-dev-server -D

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第五步、配置package.json

{
  "name": "monitor",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.6.3",
    "user-agent": "^1.0.4",
    "webpack": "^5.99.7",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.1"
  }
}

执行npm run build，执行后会出现两个文件
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
启动服务器： npm run dev
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

js报错，资源加载报错，promise报错采集上报脚本

监控错误和错误分类

  • JS错误：js报错。
  • promise异常 资源异常：监听error。

错误异常上报数据结构设计

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

js报错上报数据结构
{
	errorType: "jsError"
	filename: "http://localhost:8080/"
	kind: "stability"
	message: "Uncaught TypeError: Cannot set properties of undefined (setting 'error')"
	position: "25:30"
	selector: "html body div#container div.content input"
	stack: "TypeError: Cannot set properties of undefined (setting 'error')^errorClick (http://localhost:8080/:25:30)^HTMLInputElement.onclick (http://localhost:8080/:14:72)"
	timestamp: "1746587404145"
	title: "前端监控SDK"
	type: "error"
	url: "http://localhost:8080/"
}
promise报错上报数据结构
	errorType: "PromiseError"  // 错误类型
	filename: "http://localhost:8080/" // 访问的文件名
	kind: "stability" // 大类
	message: "Cannot set properties of undefined (setting 'error')"
	position: "30:32" // 报错行列
	selector: "html body div#container div.content input"
	stack: "TypeError: Cannot set properties of undefined (setting 'error')^http://localhost:8080/:30:32^new Promise (<anonymous>)^promiseErrirClick (http://localhost:8080/:29:9)^HTMLInputElement.onclick (http://localhost:8080/:19:11)" 
	timestamp: "1746587310847"
	title: "前端监控SDK" // 页面标题
	type: "error"  // 小类
	url: "http://localhost:8080/" // url
	userAgent:"chrome 135.0.0.0"  // 用户浏览器信息
资源加载报错上报数据结构
{
	errorType: "resourceError", // 错误类型
	filename: "http://localhost:8080/monitor.css", // 访问的文件名
	kind: "stability", // 大类
	selector: "html head link" "selector", // 选择器
	tagName: "LINK",  // 标签名
	timestamp: "1746587169153",  // 时间戳
	title: "前端监控SDK",  // 页面标题
	type: "error", // 小类
	url: "http://localhost:8080/", // 页面URL
	userAgent:"chrome 135.0.0.0" // 用户浏览器信息
}

js异常监听上报

第一步、编写index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <input type="button" value="点击报错" onclick="errorClick()" />
        <input
          type="button"
          value="点击抛出Promise错误"
          onclick="promiseErrirClick()"
        />
      </div>
    </div>
    <script>
      function errorClick() {
        window.someVar.error = "error";
      }
    </script>
  </body>
</html>
第二步、创建/src/monitor/index.js文件

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第三步，入口文件中引入src/index.js

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第四步、创建/src/monitor/lib/jsError.js

创建/src/monitor/lib/jsError.js并导出export function injectJsError() { }
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第五步、/src/monitor/index.js导入jsError.js
import { injectJsError } from './lib/jsError'
injectJsError()
第六步、查看是否打印成功

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第七步、新建/src/monitor/utils/getLastEvent.js工具文件
let lastEvent;
['click', 'touchstart', 'mousedown', 'keydown', 'mouseover'].forEach(eventType => {
  document.addEventListener(eventType, function (e) {
    lastEvent = e
  }, {
    capture: true, // 捕获阶段监听
    passive: true, // 默认不阻止默认事件
  })
})
第八步、新建/src/monitor/utils/getSelector.js 获取报错元素路径文件
function getSelectors(path) {
  // 反转输入的元素和路径数组，并过滤掉document和window对象
  return path.reverse().filter(element => {
    return element !== document && element !== window
  }).map(element => {
    let selector = ""; // 初始化选择器字符串
    if (element.id) { // 如果元素有id属性，则使用id创建更具体的选择器
      return `${element.nodeName.toLowerCase()}#${element.id}`
    } else if (element.className && typeof element.className === "string") {
      // 如果元素没有id属性，但是有className属性，并且是个字符串，则尝试使用class来创建选择器
      return `${element.nodeName.toLowerCase()}.${element.className}`
    } else {
      // 如果既没有id也没有class则进返回元素的标签名作为选择器
      return selector = `${element.nodeName.toLowerCase()}`
    }
  }).join(" ") // 将所有选择器用空格拼接
}
export default function (path) {
  if (Array.isArray(path)) {
    return getSelectors(path)
  }
}
第八步、创建上报文件/src/monitor/utils/getSelector.js

监听错误后，调用send(data)方法，调用上报接口，将日志上报到阿里云日志中，当然如下的aliyun链接已经失效，可以换成自己的服务接口即可。

let host = 'en-beijing-log.aliyuncs.com';
let project = 'zhufengmonitor';
let logStore = 'zhufengmonitor-store';
let userAgent = require('user-agent');
function getExtraData() {
  return {
    title: document.title,
    url: location.url,
    timestamp: Date.now(),
    userAgent: userAgent.parse(navigator.userAgent)
    // 用户ID
  }
}
class SendTracker {
  constructor() {
    // 上报路径 ： 项目名.主机名/logstores/存储的名字/track
    this.url = `${project}.${host}/logstores/${logStore}/track` // 上报路径
    this.xhr = new XMLHttpRequest();
  }
  send(data = {}) {
    let extraData = getExtraData();
    let log = { ...extraData, ...data }
    // 对象的值不能是数字
    for (let key in log) {
      if (typeof log[key] === 'number') {
        log[key] = `${log[key]}`;
      }
    }
    console.log("send log:", log)
    let body = JSON.stringify(log);
    this.xhr.open('POST', this.url, true);
    this.xhr.setRequestHeader('Content-Type', 'application/json') // 请求体类型
    this.xhr.setRequestHeader('x-log-apiversion', '0.6.0') // 版本号
    this.xhr.setRequestHeader('x-log-bodyrawsize', body.length) // 请求体的大小
    this.xhr.onload = function () {
      console.log(this.xhr.response);
    }
    this.xhr.onerror = function (error) {
      console.log(error);
    }
    this.xhr.send(body);
  }
}
export default new SendTracker();
第八步、编写jsError.js文件

需要注意，要按照阿里云日志接口格式进行传输

let host = 'cn-beijing.log.aliyuncs.com';
let project = 'zhufengmonitor';
let logStore = 'zhufengmonitor-store';
let userAgent = require('user-agent');
function getExtraData() {
  return {
    title: document.title,
    url: location.url,
    timestamp: Date.now(),
    userAgent: userAgent.parse(navigator.userAgent)
    // 用户ID
  }
}
class SendTracker {
  constructor() {
    // 上报路径 ： 项目名.主机名/logstores/存储的名字/track
    this.url = `https://${project}.${host}/logstores/${logStore}/track` // 上报路径
    this.xhr = new XMLHttpRequest();
  }
  send(data = {}) {
    let extraData = getExtraData();
    let log = { ...extraData, ...data }
    // 对象的值不能是数字
    for (let key in log) {
      if (typeof log[key] === 'number') {
        log[key] = `${log[key]}`;
      }
    }
    let body = JSON.stringify({
      __logs__: [log]
    })
    this.xhr.open('POST', this.url, true);
    this.xhr.setRequestHeader('Content-Type', 'application/json') // 请求体类型
    this.xhr.setRequestHeader('x-log-apiversion', '0.6.0') // 版本号
    this.xhr.setRequestHeader('x-log-bodyrawsize', body.length) // 请求体的大小
    this.xhr.onload = function () {
      // console.log(this.xhr.response);
    }
    this.xhr.onerror = function (error) {
      // console.log(error);
    }
    this.xhr.send(body);
  }
}
export default new SendTracker();
第九步、上报效果查看

链接地址已经失效，如果实现换成自己的服务接口即可。
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
传输数据格式
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

Promise异常监听上报

第一步、promise监听异常上报方法实现

src/monitor/lib/jsError.js文件新增promise抛出异常监听代码：

import getLastEvent from '../utils/getLastEvent.js'
import getSelector from '../utils/getSelector.js'
import tracker from '../utils/tracker.js'
export function injectJsError() {
  // 监听全局未捕获的错误
  window.addEventListener('error', function (event) {
    let lastEvent = getLastEvent() // 获取最后一个交互事件
    // 获取冒泡向上的dom路径
    var path = lastEvent.path || (function (evt) {
      var path = [];
      var el = evt.target;
      while (el) {
        path.push(el);
        el = el.parentElement;
      }
      return path;
    })(lastEvent);
    let log = {
      kind: 'stability', // 监控指标的大类
      type: 'error', // 小类型错误
      errorType: 'jsError', // JS执行错误
      filename: event.filename, // 错误所在的文件
      position: event.lineno + ':' + event.colno, // 错误所在的行和列的位置
      message: event.message, // 错误信息
      stack: getLines(event.error.stack), // 错误堆栈
      selector: lastEvent ? getSelector(path) : "" // 代表最后一个操作的元素
    }
    tracker.send(log)  // 上报数据
  })
// 监听全局promise错误异常
  window.addEventListener('unhandledrejection', function (event) {
    console.log("promise error：", event)
    let lastEvent = getLastEvent(); // 最后一个事件对象
    var path = lastEvent.path || (function (evt) {
      var path = [];
      var el = evt.target;
      while (el) {
        path.push(el);
        el = el.parentElement;
      }
      return path;
    })(lastEvent);
    let message;
    let filename;
    let line = 0;
    let column = 0;
    let stack = '';
    let reason = event.reason;
    if (typeof reason === 'string') {
      message = reason;
    } else if (typeof reason === 'object') {  // 说明是一个错误对象 
      if (reason.stack) {
        let matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/);
        filename = matchResult[1];
        line = matchResult[2];
        column = matchResult[3];
      }
      stack = getLines(reason.stack)
    }
    message = reason.message;
    tracker.send({
      kind: 'stability', // 监控指标的大类
      type: 'error', // 小类型错误
      errorType: 'PromiseError', // promise执行错误
      filename, // 错误所在的文件
      position: line + ':' + column, // 错误所在的行和列的位置
      message, // 错误信息
      stack, // 错误堆栈
      selector: lastEvent ? getSelector(path) : "" // 代表最后一个操作的元素
    })  // 上报数据
  }, true)
  // 拼接at报错方法一“^”拼接
  function getLines(stack) {
    return stack.split('\n').map(item => item.replace(/^\s+at\s+/g, '')).join('^');
  }
}
第二步、上报效果查看

接口换为公司上报接口即可：
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

资源加载异常监听上报

第一步、改造/src/monitor/jsError.js文件

如果 (JavaScript 文件、CSS 文件）如果加载失败都会触发window.addEventListener('error', (event) => {})的监听事件

import getLastEvent from '../utils/getLastEvent.js'
import getSelector from '../utils/getSelector.js'
import tracker from '../utils/tracker.js'
export function injectJsError() {
  // 监听全局未捕获的错误 
  window.addEventListener('error', (event) => {
    let lastEvent = getLastEvent() // 获取最后一个交互事件
    // 这是一个脚本加载错误
    if (event.target && (event.target.src || event.target.href)) {
      let log = {
        kind: 'stability', // 监控指标的大类
        type: 'error', // 小类型错误
        errorType: 'resourceError', // JS或者CS资源加载错误
        filename: event.target.src || event.target.href, // 哪个文件报错了
        tagName: event.target.tagName, // 错误所在标签
        // stack: getLines(event.error.stack), // 错误堆栈
        selector: getSelector(event.target) // 代表最后一个操作的元素
      }
      tracker.send(log)  // 上报数据
    } else {
      // 获取冒泡向上的dom路径
      var path = lastEvent.path || (function (evt) {
        var path = [];
        var el = evt.target;
        while (el) {
          path.push(el);
          el = el.parentElement;
        }
        return path;
      })(lastEvent);
      let log = {
        kind: 'stability', // 监控指标的大类
        type: 'error', // 小类型错误
        errorType: 'jsError', // JS执行错误
        filename: event.filename, // 错误所在的文件
        position: event.lineno + ':' + event.colno, // 错误所在的行和列的位置
        message: event.message, // 错误信息
        stack: getLines(event.error.stack), // 错误堆栈
        selector: lastEvent ? getSelector(path) : "" // 代表最后一个操作的元素
      }
      tracker.send(log)  // 上报数据
    }

  }, true)

  window.addEventListener('unhandledrejection', function (event) {
    console.log("异常错误");
    let lastEvent = getLastEvent(); // 最后一个事件对象
    var path = lastEvent.path || (function (evt) {
      var path = [];
      var el = evt.target;
      while (el) {
        path.push(el);
        el = el.parentElement;
      }
      return path;
    })(lastEvent);
    let message;
    let filename;
    let line = 0;
    let column = 0;
    let stack = '';
    let reason = event.reason;
    if (typeof reason === 'string') {
      message = reason;
    } else if (typeof reason === 'object') {  // 说明是一个错误对象 
      if (reason.stack) {
        let matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/);
        filename = matchResult[1];
        line = matchResult[2];
        column = matchResult[3];
      }
      stack = getLines(reason.stack)
    }
    message = reason.message;
    tracker.send({
      kind: 'stability', // 监控指标的大类
      type: 'error', // 小类型错误
      errorType: 'PromiseError', // JS执行错误
      filename, // 错误所在的文件
      position: line + ':' + column, // 错误所在的行和列的位置
      message, // 错误信息
      stack, // 错误堆栈
      selector: lastEvent ? getSelector(path) : "" // 代表最后一个操作的元素
    })  // 上报数据
  }, true)
  // 拼接at报错方法一“^”拼接
  function getLines(stack) {
    return stack.split('\n').map(item => item.replace(/^\s+at\s+/g, '')).join('^');
  }
}
第二步、修改/src/monitor/utils/getSelector.js方法
function getSelectors(path) {
  // 反转输入的元素和路径数组，并过滤掉document和window对象
  return path.reverse().filter(element => {
    return element !== document && element !== window
  }).map(element => {
    let selector = ""; // 初始化选择器字符串
    if (element.id) { // 如果元素有id属性，则使用id创建更具体的选择器
      return `${element.nodeName.toLowerCase()}#${element.id}`
    } else if (element.className && typeof element.className === "string") {
      // 如果元素没有id属性，但是有className属性，并且是个字符串，则尝试使用class来创建选择器
      return `${element.nodeName.toLowerCase()}.${element.className}`
    } else {
      // 如果既没有id也没有class则进返回元素的标签名作为选择器
      return selector = `${element.nodeName.toLowerCase()}`
    }
  }).join(" ") // 将所有选择器用空格拼接
}
export default function (pathOrTarget) {
  if (Array.isArray(pathOrTarget)) { // 可能是一个数组，也可能是一个对象 
    return getSelectors(pathOrTarget)
  } else {
    let path = []
    while (pathOrTarget) {
      path.push(pathOrTarget);
      pathOrTarget = pathOrTarget.parentNode;
    }
    return getSelectors(path)
  }
}
第三步、上报效果查看

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
上面换成公司服务上报接口即可

接口异常采集上报脚本

接口异常上报数据结构设计

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

接口监听上报

第一步、模拟接口请求

编写/src/index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <input
          id="successBtn"
          type="button"
          value="ajax成功请求"
          onclick="sendSuccess()"
        />
        <input
          id="errorBtn"
          type="button"
          value="ajax失败请求"
          onclick="sendError()"
        />
      </div>
    </div>
    <script>
      //
      function sendSuccess() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/checkParamConfig/getDetails",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send();
      }
      // 发送错误报错
      function sendError() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/systemConfig/getDetail",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.onerror = function (error) {
          console.log("error", error);
        };
        xhr.send();
      }
    </script>
  </body>
</html>
第二步、创建xhr.js监听接口上报文件

创建/src/monitor/lib/xhr.js文件，编写增强 XMLHttpRequest 对象的功能，以监控和记录所有的 AJAX 请求及其状态。通过重写 XMLHttpRequest.prototype.open 和 XMLHttpRequest.prototype.send 方法，可以在请求发出前、请求完成时以及请求失败或被取消时收集相关数据，并使用 tracker.send 方法将这些数据上报给某个监控系统。

import tracker from '../utils/tracker.js';
export default function injectXHR() {
  // 保存原始的 open 和 send 方法
  const originalXhrOpen = window.XMLHttpRequest.prototype.open;
  window.XMLHttpRequest.prototype.open = function (method, url, async) {
    console.log("url", url)
    // 上报请求不需要返回
    if (!url.match(/logstores/) && !url.match(/sockjs/)) {
      console.log("logstores")
      this.logData = {
        method,
        url,
        async,
        startTime: Date.now()
      };
    }
    return originalXhrOpen.apply(this, arguments);
  };
  const originalXhrSend = window.XMLHttpRequest.prototype.send;
  window.XMLHttpRequest.prototype.send = function (body) {
    if (this.logData) {
      const startTime = Date.now();
      const handler = (type) => (event) => {
        const duration = Date.now() - startTime;
        const status = this.status; // 状态码
        const statusText = this.response.error; // OK Server Error
        tracker.send({
          kind: 'stability',
          type: 'xhr',
          eventType: event.type,
          pathname: this.logData.url, // 请求路径
          status: `${status}-${statusText}`, // 状态码
          duration, // 持续时间
          response: JSON.stringify(this.response),
          requestData: body || '',
          params: this.logData.params, // 响应体
          timestamp: Date.now()
        });
      };

      this.addEventListener('load', handler('load'), false);
      this.addEventListener('error', handler('error'), false);
      this.addEventListener('abort', handler('abort'), false);
    }

    return originalXhrSend.apply(this, arguments);
  };
}
第三步、引入并使用上报监听

在src/monitor/index.js引入，并使用

import { injectJsError } from './lib/jsError'
import injectXHR from './lib/xhr'
injectJsError()
injectXHR()
第四步、查看接口监听上报效果

接口请求成功：（忽略上报接口）
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
接口请求失败：（忽略上报接口）
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
请求成功上报效果：
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

请求失败上报效果：
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

白屏采集上报脚本

白屏采集上报数据结构

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

思路

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
在页面中垂直交叉选取多个采样点，使用elementsFromPointAPI获取采样点下的HTML元素，判断采样点元素是否与容器元素相同，遍历采样点，设置采样点与容器元素相同的个数从而判断是否出现摆屏，这种方法精确度比较高，技术栈无关，通用性能好，但是开发成本比较高。

页面关键点采样对比技术实现白屏上报

第一步、创建onload.js文件方法

        新建src/monitor/utils/onload.js文件
        如果在页面完全没有加载完毕的时候【元素，样式表，iframe等外部资源】，dom可能还未稳定，就会导致document.elementsFromPoint() 获取到的元素并不是最终用户看到的那些。如果在这种情况下执行白屏检测，可能会错误地判断某些点为空白点，因为这些点对应的元素尚未加载或渲染完成。
        在页面加载过程中，JavaScript 可能会在 DOMContentLoaded 事件触发后立即执行，这时虽然HTML文档已经被完全加载和解析，但是页面上的图片、样式表等外部资源可能还没有加载完毕。因此，在这种状态下直接进行白屏检测，有可能会错过一些重要的视觉变化，导致误判。
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

export default function (callback) {
  if (document.readyState === 'complete') {
    callback()
  } else {
    window.addEventListener('load', () => {
      callback()
    })
  }
}
第二步、关键点采样对比监控白屏上报

创建/src/monitor/lib/xhr.js文件，页面关键点采样对比实现白屏上报功能：

import tracker from '../utils/tracker.js';
import onload from '../utils/onload.js';
// src/monitor/utils/onload.js

export default function blankScreen() {
  let warpperElements = ['html', 'body', '#container', ".content"]
  let enptyPoints = 0
  function getSelector(element) {
    if (element && element.id) {
      return "#" + element.id
    } else if (element && element.className) {
      //  a b c => .a .b .c
      return "." + element.className.split(' ').filter(item => !!item).join('.')
    } else {
      return element && element.nodeName.toLowerCase()
    }
  }
  //  是包裹元素++
  function isWrapper(element) {
    let selector = getSelector(element)
    if (warpperElements.indexOf(selector) != -1) {
      enptyPoints++
    }
  }
  // 当整个页面渲染完成了才去判断是否是白屏
  onload(function () {
    for (let i = 1; i <= 18; i++) {
      let xElement = document.elementsFromPoint(window.innerWidth * i / 10, window.innerHeight / 2)
      let yElement = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight * i / 10)
      isWrapper(xElement[0])
      isWrapper(yElement[0])
    }
    console.log("enptyPoints", enptyPoints)
    if (enptyPoints >= 16) {
      let centerElements = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2)
      tracker.send({
        kind: "stability",
        type: "blank",
        blankCount: enptyPoints, // 空白点
        screen: window.screen.width + "*" + window.screen.height, // 屏幕尺寸
        viewPoint: window.innerWidth + "*" + window.innerHeight, // 视口尺寸
        selector: getSelector(centerElements[0]),
        page: window.location.href, // 页面地址
        message: "页面空白点大于16个"
      })
    }
  });
}
第三步、编写可监听到白屏和非白屏的HTML文件

不触发白屏监听上报html文件,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word"></div>
    </div>
    <script>
      let content = document.getElementsByClassName("content")[0];
      content.innerHTML = "<span>aaa</span>".repeat(10000);
    </script>
  </body>
</html>

触发白屏监听上报html文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content">
        <input
          id="successBtn"
          type="button"
          value="ajax成功请求"
          onclick="sendSuccess()"
        />
        <input
          id="errorBtn"
          type="button"
          value="ajax失败请求"
          onclick="sendError()"
        />
      </div>
    </div>
    <script>
      //
      function sendSuccess() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/systemConfig/getDetail",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.send();
      }
      // 发送错误报错
      function sendError() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "POST",
          "http://192.168.60.38:32753/visiondevice/checkParamConfig/getDetailsAAAA",
          true
        );
        xhr.responseType = "json";
        xhr.onload = function () {
          console.log(xhr.response);
        };
        xhr.onerror = function (error) {
          console.log("error", error);
        };
        xhr.send();
      }
    </script>
  </body>
</html>
第四步、监测白屏上报和非白屏效果

填满<span>标签，就不会出现白屏，没有打印上报日志
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
不填满<span>标签，就会出现白屏空袭，就会打印上报日志并且发送给服务端
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
发送服务端数据
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

加载时间采集上报

浏览器加载一个网页的整个流程

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
上面一张图展示了浏览器加载一个网页的整个流程，从开始时间到页面完全加载完成。

流程中字段描述
字段描述
startTime（开始时间）这是整个加载过程的起点
Prompt for unload（准备卸载旧页面）如果当前页面是从另一个页面导航过来的，浏览器会触发卸载事件，准备卸载旧页面。
redirectStart（开始重定向）如果存在重定向，浏览器会在此时开始重定向过程。
redirectEnd（结束重定向）重定向过程结束。
fetchStart（开始获取文档）浏览器开始获取文档的时间点。
domainLookupStart（开始域名解析）浏览器开始进行DNS查询以解析域名。
domainLookupEnd（结束域名解析）DNS查询完成。
connectStart（开始链接）浏览器开始建立与服务器的TCP连接。
secureConnectionStart（开始安全连接）如果使用HTTPS，浏览器开始TLS握手过程。
connectEnd（结束连接）TCP连接建立完成。
requestStart（开始请求）浏览器开始发送HTTP请求到服务器。
Time to First Byte（TTFB，首次字节时间）从发送请求到接收到第一个字节响应的时间。
responseStart（响应开始）服务器开始发送响应数据。
responseEnd（响应结束）服务器完成响应数据的发送。
unloadEventStart（卸载事件开始）在前一个页面的卸载过程中，卸载事件开始。
unloadEventEnd（卸载事件结束）卸载事件结束。
domLoading（开始解析DOM）浏览器开始解析HTML文档并构建DOM树。
domInteractive（DOM结构基本解析完毕）DOM树的基本结构已经构建完成，可以进行交互操作。
domContentLoadedEventStart（DOMContentLoaded事件开始）DOM完全加载且解析完成，但不包括样式表、图片等外部资源。
domContentLoadedEventEnd（DOMContentLoaded事件结束）DOMContentLoaded事件处理程序执行完毕。
domComplete（DOM和资源解析都完成）所有资源（如图片、脚本等）都已加载完成。
loadEventStart（开始load回调函数）浏览器开始执行load事件的回调函数。
onLoad（加载事件）页面完全加载完成，触发load事件。
loadEventEnd（结束load回调函数）load事件的回调函数执行完毕。
其他辅助阶段字段描述
字段描述
appCache（缓存存储）应用缓存的处理过程
DNS（域名缓存）DNS缓存的处理过程
TCP（网络连接）TCP链接的处理过程
Request（请求）请求的处理过程
Response（相应）响应的处理过程
Procsssing（处理）对响应数据的处理过程
Load（加载）页面加载的最终阶段
需要上报字段描述
字段描述计算方式意义
unload前一个页面卸载耗时unloadEventEnd - unloadEventStart-
redirect重定向耗时redirectEnd - redirectStart重定向耗时
appCache缓存耗时domainLookupStart - fetchStart读取缓存的时间
dnsdns解析耗时domainLookupEnd - domainLookupStart可观察域名解析服务是否正常
tcptcp链接耗时connectEnd - cibbectStart建立连接耗时
sslSSL安全连接耗时connectEnd - secureConnectionStart反应数据安全连接建立耗时
ttfbTime to First Byte(TTFB)网络请求耗时responseStart - requestStartTTFB是发出页面请求到接收到应答数据第一个字节所花费的毫秒数
response相应数据传输耗时responseEnd - responseStart观察网络是否正常
domDOM解析耗时domInteractive - responseEnd观察DOM结构是否合理，是否有JS阻塞页面解析
dclDOMContentLoaded时间耗时domContentLoadedEventEnd - domContentLoadedEventStart当HTML文档被完全加载和解析完成之后，DOMContentLoaded事件等待样式表，图像和子框架完成加载
resources资源加载耗时domComplete - domContentLoadedEventEnd可观文档流量是否过大
domReadyDOM 阶段渲染耗时responseEnd - fetchStartDOM树和页面资源加载完成时间，会触发domContentLoaded事件
首次渲染耗时首次渲染耗时responseEnd - fetchStart加载文档到看到第一帧非空图像的时间，也叫做白屏时间
首次可交互事件首次可交互时间domInteractive - fetchStartDOM树解析完成时间，此时document.readyStart为interactive
首包时间耗时首包耗时responseStart - domainLookupStartDNS解析到响应返回给浏览器第一个字节的时间
页面完全加载时间页面完全加载时间loadEventSart - fetchStart-
onLoadonLoad事件耗时LoadEventEnd - loadEventStart-

浏览器加载和渲染网页的整个过程

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
这张图展示了浏览器加载和渲染网页的整个过程，从请求HTML文件开始，到最终页面渲染完成。
大致上图流程为是一个阶段，下面是对上图中十一个阶段的解读：

  1. 第一阶段，开始请求HTML文件，浏览器接收到用户输入的URL或者点击链接等操作后，开始向服务器发送HTTP请求，请求获取HTML文件。
  2. 第二阶段，响应HTML文件，服务器接收到请求后，返回HTML文件给浏览器。
  3. 第三阶段，开始加载，浏览器接收到HTML文件后，开始加载过程。
  4. 第四阶段，构建DOM文档对象模型，浏览器使用HTML解析器解析HTML文件构建DOM树，DOM树是HTML结构的表示形式，用于描述页面的层次结构，在构建DOM树的过程中，如果遇到<link>标签(CSS文件引用)或<script>标签(js文件引入)浏览器会进行预解析，并发起对CSS文件和JS文件的请求。
  5. 第五阶段，请求CSS文件和JS文件，浏览器在预解析过程中发现需要的CSS和JS文件后，分别向服务器发送请求，获取这些资源文件。
  6. 第六阶段，返回CSS数据和JavaScript，服务器接收到请求后，返回相应的CSS文件和JS文件给浏览器。
  7. 第七阶段，构建CSSOM也就是CSS对象模型，浏览器使用CSS解析器解析返回的CSS数据，构建CSSOM树，CSSOM树包含了所有样式信息，用于描述页面元素的央视。
  8. 第八阶段，执行JavaScript，浏览器使用V8解析器解析并执行返回的JavaScript代码，javaScript可以修改DOM和CSSOM，因此在这个阶段可能会继续构建DOM树。
  9. 第九阶段，继续构建DOM，如果JS代码中包含了对DOM的修改操作，浏览器会继续构建和更新DOM树。
    10.第十阶段，构建布局树，当DOM树和CSSOM树都构建完成后，浏览器会将他们合并成一个布局树也成为渲染树，布局树包含了所需要的渲染的节点及其央视信息
  10. 第十一阶段，渲染阶段，最后浏览器会根据布局树进行页面渲染，将页面内容展示给用户。

浏览器加载和渲染时间计算上报实现

        在讨论浏览器加载网页的过程时候，Performance(性能)通常指的是web性能，Performance也是只浏览器提供的一个内置对象，window.performance通过这个API，开发者可以获取到详细的页面加载时间和资源加载时间等信息，从而进行性能优化，windong.performance提供了多个属性和方法来帮助分析网页性能。

属性描述
navigation包含了相关的导航信息，比如页面是如何被加载的，以及设计重定向的次数。
timing提供了从开始导航到当前页面完全加载过程中各个关键时间的时间点，如重定向时间，DNS查询时间，TCP链接时间，请求发送时间，响应接收时间等。

打印Performance如下
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

第一步、创建/src/monitor/lib/timing.js文件

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

import tracker from '../utils/tracker.js';
import onload from '../utils/onload.js';
export default function timing() {
  onload(function () {
    setTimeout(() => {
      const {
        fetchStart,
        connectStart,
        connectEnd,
        requestStart,
        responseStart,
        responseEnd,
        domLoading,
        domInteractive,
        domContentLoadedEventStart,
        domContentLoadedEventEnd,
        loadEventStart,
      } = performance.timing;

      tracker.send({
        kind: 'exeprience', // 用户体验指标
        type: 'timing', // 统计每个阶段的时间
        connectTime: connectEnd - connectStart, // 连接时间
        ttfbTime: responseStart - requestStart, // 首字节到达时间
        responseTime: responseEnd - responseStart, // 响应时间
        parseDOMTime: loadEventStart - domLoading, // dom解析时间
        domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart, // dom加载完成时间
        timeToInteractive: domInteractive - fetchStart, // 首次可交互时间
        loadTime: loadEventStart - fetchStart, // 完整的加载时间
      });
    }, 3000)
  });
}
第二步、模拟DOM加载完成延迟inde.html文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word"></div>
    </div>
    <script>
      // Dom解析完成后，即使依赖的资源没有加载完成，也会触发这个事件 
      document.addEventListener("DOMContentLoaded", function () {
        let Start = Date.now();
        while (date.now() - Start < 5000) {}
      });
    </script>
  </body>
</html>
第三步、浏览器加载和渲染时间上报效果

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

性能指标采集上报

性能指标描述

字段全称描述
FPFirst Paint(首次绘制)包括了任何用户自定义的背景绘制，它是首先将像素会知道屏幕的时刻
FCPFirst Content Paint（首次内容绘制）是浏览器将第一个DOM元素渲染到屏幕的时间，可能是文本、图像、SVG等，这其实就是白屏的时间
FMPFirst Meaningfun Paint（首次有意义绘制）页面有意义的内容渲染时间
LCPLargest ContentFul Paint （最大内容渲染）代表在viewport中最大的页面元素加载的时间
DCLDomContentLoaded （DOM加载完成）当HTML文档被完全加载和解析完成之后，DOMContentLoaded时间被触发，无需等待样式表，图像和子框架的完成加载
LonLoad当以来的资源全部加载完毕之后才会触发。
TTITime to Interactive （可交互时间）用于标记应用以进行视觉渲染并能可靠相应用户输入的时间点。
FIDFirst Input Delay（首次输入延迟）用户首次和页面交互(单机链接，点击按钮等)到页面响应交互的时间

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

FMP有意义绘制是根据自己给定判断，如： h1.setAttribute("elementtiming", "meaningful");
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

各个性能指标获取

触发用例index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端监控SDK</title>
    <script src="monitor.js"></script>
  </head>
  <body>
    <div id="container">
      <p style="color: red">hello</p>
      <div class="content" style="width: 100%; word-wrap: break-word">
        <button id="CLICKBTN" onclick="clickMe()">Click Me</button>
      </div>
    </div>
    <script>
      function clickMe() {
        let start = Date.now();
        while (Date.now() - start < 1000) {}
      }
      setTimeout(() => {
        let content = document.getElementsByClassName("content")[0];
        let h1 = document.createElement("h1");
        h1.innerHTML = "我是这个页面中最有意义的内容";
        h1.setAttribute("elementtiming", "meaningful");
        content.appendChild(h1);
      }, 2000);
    </script>
  </body>
</html>
FMP 首次有意义绘制
// 增加一个性能条目的观察者
  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    FMP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['element'] }) // 观察页面中有意义的元素
LCP 最大内容渲染
  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    LCP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['largest-contentful-paint'] }) // 观察页面中最大的元素
FID 首次输入延迟
  new PerformanceObserver((entryList, observer) => {
    let lastEvent = getLastEvent();
    let firstInput = entryList.getEntries()[0]; // 渠道第一个条目
    console.log("FID", firstInput);
    if (firstInput) {
      // 开始处理的时间 - 开始点击的时间，的差值就是处理的延迟
      let inputDelay = firstInput.processingStart - firstInput.startTime;
      let duration = firstInput.duration; // 处理时长
      if (inputDelay > 0 || duration) {
        tracker.send({
          kind: 'exeprience', // 用户体验指标
          type: 'firstInputDeay', // 首次输入延迟
          inputDelay, // 输入延迟
          duration,  // 处理的时间
          startTime: firstInput.startTime,
          selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
        });
      }
    }
    observer.disconnect(); // 不需要观察
  }).observe({ type: 'first-input', buffered: true }) // 用户第一次交互，点击页面

首次点击效果：
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

FP 首次绘制
 let FP = performance.getEntriesByName('first-paint')[0]
FCP 首次内容绘制
 let FCP = performance.getEntriesByName('first-contentful-paint')[0]
性能指标上报整体代码
import tracker from '../utils/tracker.js';
import onload from '../utils/onload.js';
import getLastEvent from '../utils/getLastEvent.js';
import getSelector from '../utils/getSelector.js';
export default function timing() {
  let FMP, LCP;
  // 增加一个性能条目的观察者
  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    FMP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['element'] }) // 观察页面中有意义的元素

  new PerformanceObserver((entryList, observer) => {
    let perfEntriens = entryList.getEntries();
    LCP = perfEntriens[0];
    observer.disconnect(); // 不需要观察
  }).observe({ entryTypes: ['largest-contentful-paint'] }) // 观察页面中最大的元素


  new PerformanceObserver((entryList, observer) => {
    let lastEvent = getLastEvent();
    let firstInput = entryList.getEntries()[0]; // 渠道第一个条目
    console.log("FID", firstInput);
    if (firstInput) {
      // 开始处理的时间 - 开始点击的时间，的差值就是处理的延迟
      let inputDelay = firstInput.processingStart - firstInput.startTime;
      let duration = firstInput.duration; // 处理时长
      if (inputDelay > 0 || duration) {
        tracker.send({
          kind: 'exeprience', // 用户体验指标
          type: 'firstInputDeay', // 首次输入延迟
          inputDelay, // 输入延迟
          duration,  // 处理的时间
          startTime: firstInput.startTime,
          selector: lastEvent ? getSelector(lastEvent.path || lastEvent.target) : ''
        });
      }
    }
    observer.disconnect(); // 不需要观察
  }).observe({ type: 'first-input', buffered: true }) // 用户第一次交互，点击页面
  onload(function () {

    setTimeout(() => {
      const {
        fetchStart,
        connectStart,
        connectEnd,
        requestStart,
        responseStart,
        responseEnd,
        domLoading,
        domInteractive,
        domContentLoadedEventStart,
        domContentLoadedEventEnd,
        loadEventStart,
      } = performance.timing;
      // console.log("performance timing:", performance)

      tracker.send({
        kind: 'exeprience', // 用户体验指标
        type: 'timing', // 统计每个阶段的时间
        connectTime: connectEnd - connectStart, // 连接时间
        ttfbTime: responseStart - requestStart, // 首字节到达时间
        responseTime: responseEnd - responseStart, // 响应时间
        parseDOMTime: loadEventStart - domLoading, // dom解析时间
        domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart, // dom加载完成时间
        timeToInteractive: domInteractive - fetchStart, // 首次可交互时间
        loadTime: loadEventStart - fetchStart, // 完整的加载时间
      });
      let FP = performance.getEntriesByName('first-paint')[0]
      let FCP = performance.getEntriesByName('first-contentful-paint')[0]
      // 开始发送性能指标
      console.log("FP", FP);
      console.log("FCP", FCP);
      console.log("FMP", FMP);
      console.log("LCP", LCP);


      tracker.send({
        kind: 'exeprience', // 用户体验指标
        type: 'paint', // 统计每个阶段的时间
        firstPant: FP.startTime, // 首次绘制
        firstContentFulPant: FCP.startTime,
        firstMeaningfulPant: FMP.startTime,
        largestContentFulPaint: LCP.startTime,  // 最大内容绘制
      });
    }, 3000)
  });
}
查看各项性能指标采集上报效果

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

卡顿监听上报

监听方案

当任务阻塞主线程达到 100 ms或更长时间时，将引发诸多问题，例如，可交互时间延迟、严重不稳定的交互行为 (轻击、单击、滚动、滚轮等) 延迟、严重不稳定的事件回调延迟、紊乱的动画和滚动等。我们将任何主 UI 线程连续不间断繁忙 1000毫秒及以上的时间区间定义为长任务（Long task）。目前，浏览器中存在一个 Long Tasks API，借助该 API 与PerformanceObserver 的结合使用，我们能够精准地定位长任务，从而有效实现对卡顿现象的检测，当然还有心跳检测，fps帧率检测卡顿等方法，先从最简单的实现，借助new PerformanceObserver的回调方法参数entry.duration判断是否大于100ms，如果大于则可以认为卡顿。

数据结构

{
	"title":"前端监控",
	"url":"192.168.60.32:8080/", // 卡顿页面
	"timestamp":"158654654845", // 时间戳
	"userAgent":"", // 浏览器信息
	"kind":"experience",
	"type":"longTask",
	"eventType":"mouseover",
	"startTime":"9331",
	"duration":"150",
	"selector":"HTML BODY#container .content",
}

借助Long Tasks API实现卡顿上报

第一步、创建longTask.js文件
import tracker from '../utils/tracker.js';
import getLastEvent from '../utils/getLastEvent.js';
import getSelector from '../utils/getSelector.js';
export default function longTask() {
  new PerformanceObserver((entryList, observer) => {
    entryList.getEntries().forEach(entry => {
      if (entry.duration > 100) {
        let lastEvent = getLastEvent();
        var path = lastEvent.path || (function (evt) {
          var path = [];
          var el = evt.target;
          while (el) {
            path.push(el);
            el = el.parentElement;
          }
          return path;
        })(lastEvent);
        console.log("longTask:", getSelector(path))
        tracker.send({
          kind: 'experience',
          type: 'longTask',
          eventType: lastEvent.type,
          startTime: entry.startTime, // 开始时间
          duration: entry.duration,  // 持续时间
          selector: lastEvent ? getSelector(path) : "",
        })
      }
    })
  }).observe({ entryTypes: ['longtask'] })
}
第二步、循环模仿卡顿效果
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container">
      <div class="content" style="width: 100%; word-wrap: break-word">
        <button id="button">点击卡顿</button>
      </div>
    </div>
    <script>
      document.getElementById("button").addEventListener("click", function () {
        // 模拟页面卡顿
        for (let i = 0; i < 1000000000; i++) {
          // do nothing
        }
      });
    </script>
  </body>
</html>
第三步、查看卡顿上报效果

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

PV、UV、页面停留时间采集上报

PV(page view) 是页面浏览量。
UV(Unique visitor)用户访问量。
PV 只要访问一次页面就算一次。
UV同一天内多次访问只算一次。

对于前端来说，只要每次进入页面上报一次 PV 就行，UV 的统计放在服务端来做，主要是分析上报的数据来统计得出 UV。

实现pv和页面停留时间监听

第一步、创建pv.js
import tracker from '../utils/tracker.js';
// utils.js 或者直接放在你的文件中
function getPageURL() {
  return window.location.href;
}

function getUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0,
      v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

export default function pv() {
  tracker.send({
    kind: "business",
    type: "pv",
    startTime: performance.now(),
    pageURL: getPageURL(),
    referrer: document.referrer,
    uuid: getUUID(),
  });
  let startTime = Date.now();
  window.addEventListener(
    "beforeunload",
    () => {
      let stayTime = Date.now() - startTime;
      tracker.send({
        kind: "business",
        type: "stayTime",
        stayTime,
        pageURL: getPageURL(),
        uuid: getUUID(),
      });
    },
    false
  );
}
第二步、查看上报结果

从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现
从0到1构建前端监控系统：错误捕获、性能采集、用户体验全链路追踪实战指南SDK实现

完结~

觉得内容有用？别忘了点个赞+收藏+关注，三连走一波！你的支持是我持续输出的动力 💪

大数据时代：如何构建高效的数据中台架构？
AI天才研究院
05-08 678
随着企业日均产生PB级数据，传统数据仓库难以应对实时分析、多源整合与敏捷响应需求。本文聚焦数据中台架构设计的核心技术体系，覆盖从底层数据接入到上层业务服务的全链路，提供技术选型、组件集成、治理规范等实操指南，适用于大中企业数据团队构建数字化转型基础设施。本文采用"概念解析→技术架构→实施路径→实战案例→趋势展望"的逻辑结构，通过理论结合代码的方式，详细解析数据中台的核心组件设计。数据中台与传统数据架构的技术演进对比基于微服务的Data API网关设计数据质量评估的数学模型构建。
端云协同下的异常检测与智能恢复机制实战：多源感知、任务诊断与自愈闭环体系构建
努力分享一些人工智能相关的知识干货！
05-07 650
随着 AI 推理服务在边缘端与云端之间的深度融合，系统在高并发任务、模型热更新、异构资源调度中面临大量潜在异常，如模型响应失败、节点崩溃、请求丢失与任务链断裂等。为了保障业务连续性与服务可用性，必须构建一套覆盖“异常实时发现 → 故障精准定位 → 联动式修复 → 自动任务恢复”的完整智能恢复机制。本文聚焦企业级端云智能体系统，通过多源感知、调用链追踪、模型健康评估与自愈策略协同，构建 AI 推理系统的高韧性闭环能力，实现故障快速判别与任务链自适应修复的实战落地路径。
利用反向代理服务器，加快国内对国外主机的访问
weixin_30596023的博客
07-23 2967
快速阅读 利用反向代理服务器，加快国内对国外主机的访问。 国外服务器如何让访问速度变快。 国内因为域名要备案，而备案比较麻烦，所以好多人直接买好域名以后，用的是国外的服务器，可以直接建站。 但是国外的服务器有个麻烦之外就是国内访问速度太慢。 所以有必要设置一个反向代理，增加文章 。 国外服务器用域名访问，环境是lnmp的环境 ，在域名配置文件中。增加反向代理 ，地址指向国内的服务器。 通...
如何做好前端监控方案
weixin_43843897的博客
02-19 927
要做好前端监控方案，需要从多个方面入手，确保监控的全面性、准确性和实时性。
蚂蚁金服如何把前端性能监控做到极致?
大灰狼的小绵羊哥哥的博客
03-07 5801
本文来自蚂蚁金服前端技术专家杨森在 ArchSummit 北京 2018 的分享，他将分享如何通过 Performance 相关的 API 准确的采集用户性能数据，并如何通过大数据计算加工最终产出用户性能分析产品，以及如何通过性能数据纵向衡量产品性能、发现性能瓶颈。 本文的主要从以下四个方面阐述： 前端性能监控的两种主要技术方案； 怎么样去做一个真实用户性能数据的采集； ...
如何进行 web 性能监控 ？
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-09 1286
文章转载自: AlloyTeam：http://www.alloyteam.com/2020/01/14184/作者: liu, summerqy也许你有听过一个问题，你这款 web 应...
【JS】2322- 深入解析前端插件机制：以埋点SDK与Webpack为例
pingan8787
03-20 42
最近在做前端监控的全链路项目, 刚好埋点SDK这边的架构设计需要用到插件机制, 就想着和之前学过的webpack插件机制进行一个类比, 看看有哪些共通和差异之处。在现代软件开发中，插件机制是实现系统扩展性和灵活性的核心设计模式之一。插件机制通过将核心功能与扩展功能分离，使得系统能够在不修改核心代码的情况下扩展能力。：ByteTop 的监控场景要求“永不中断”，Webpack 的构建场景允许“快速失败”。为例，深入探讨两者的插件机制设计异同，并揭示其背后的设计哲学。
【万字总结】前端全方位性能优化指南（九）——FSP（First Screen Paint）像素级分析、RUM+合成监控、Lighthouse CI
yong_su的博客
04-02 1110
监控与持续优化体系在数字化体验至上的时代，用户对应用性能的容忍度正以毫秒级速度衰减。传统的单一监控手段已难以应对多维度性能瓶颈的精准定位，而偶发的性能劣化如同暗流般蚕食着用户体验与商业转化。本文聚焦智能监控网络的体系化构建，通过融合RUM真实用户行为数据与合成监控的主动探测能力，实现98%性能异常捕获率的关键突破；创新性引入FSP（首屏渲染）像素级眼动追踪指标，结合深度集成DevOps流水线的自动化阻断机制，构建起覆盖用户感知、代码级诊断到持续交付的全链路防护网。
【万字总结】前端全方位性能优化指南（完结篇）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
yong_su的博客
04-03 1206
fill:#333;color:#333;color:#333;fill:none;网络中断缓存缺失完全离线正常模式基础功能模式核心内容模式静态兜底页。
深入解析前端插件机制：以埋点SDK与Webpack为例
zz_jesse的博客
03-31 39
最近在做前端监控的全链路项目, 刚好埋点SDK这边的架构设计需要用到插件机制, 就想着和之前学过的webpack插件机制进行一个类比, 看看有哪些共通和差异之处。在现代软件开发中，插件机制是实现系统扩展性和灵活性的核心设计模式之一。插件机制通过将核心功能与扩展功能分离，使得系统能够在不修改核心代码的情况下扩展能力。：ByteTop 的监控场景要求“永不中断”，Webpack 的构建场景允许“快速失败”。为例，深入探讨两者的插件机制设计异同，并揭示其背后的设计哲学。
异构推理资源调度与性能监控一体化实践：GPU × DPU × CPU 的统一管理体系构建
努力分享一些人工智能相关的知识干货！
05-07 776
随着 AI 推理系统走向多模型、多场景和多节点部署，异构计算资源（GPU、DPU、CPU）的协同效率已成为影响系统稳定性与扩展能力的关键因素。单一设备管理方式已无法支撑 DPU 网络前处理、GPU 主干推理与 CPU 控制调度等任务并行运行的高效协同需求。本文基于工程实战路径，系统梳理 GPU × DPU × CPU 异构资源的统一调度体系设计、运行状态指标采集机制、任务执行链路打通策略，以及如何构建一个面向 AI 推理平台的全链路性能监控系统。结合实际部署经验，展示如何实现资源利用率提升 2 倍、任务平均
【海思Hi3516DV300芯片：全面揭秘】：从入门到性能调优的15大实战技巧
[海思 Hi3516DV300 芯片用户指南](https://ebaina.oss-cn-hangzhou.aliyuncs.com/production/direct/mark/202208/11/DdwNP2ZTtsjkZSz2NbFBcYjfhK5Y5skA1660180526565.png?x-oss-process=image/watermark,text_ZWJhaW...
Kubernetes 排障实战：用 Prometheus 提升集群可用性和排障效率
weixin_39009745的博客
12-27 796
一份超详细的用 Prometheus 监控 Kubernetes 平台指南
如何选择合适的企业级商城系统前端状态管理方案？
万米商云的博客
05-14 565
在复杂的电商场景中，前端状态管理是保障系统高性能、可维护性和数据一致性的核心环节。面对商品数据实时更新、多模块状态共享、高并发请求等挑战，如何选择合适的状态管理方案？
上集：一个前端的血泪复仇记 —— 静态部署的胜利
十步杀一人-千里不留行
05-17 1370
在《上集：一个前端的血泪复仇记 —— 静态部署的胜利》中，作者分享了在部署一个前后端分离的小项目时遇到的挑战和解决方案。项目后端使用Spring Boot，前端使用Next.js。在部署过程中，前端静态资源的处理成为主要难题。作者通过将Next.js生成的静态文件直接放入Spring Boot的static目录，简化了部署流程。然而，Spring Security的默认配置阻止了对这些静态资源的访问，导致403错误。通过调整SecurityConfig和WebConfig，作者成功解决了这一问题。此外，前端
MySQL、FastAPI 和 React 构建一个完整的全栈待办事项应用
最新发布
No trade is free, but my contents are.
05-18 1138
MySQL 数据库：存储待办事项FastAPI 后端：提供 RESTful APIReact 前端：用户界面。
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
小破孩的博客
05-15 384
Vuetify框架使用(一)之v-snackbar 组件封装及全局使用
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】
2401_87493916的博客
05-15 475
Weblogic中存在一个SSRF漏洞，利用该漏洞可以发送任意HTTP请求，进而攻击内网中redis、fastcgi等脆弱组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值