@fe-hl/monitor-sdk v1.2.3

前端监控 SDK

安装

npm i @fe-hl/monitor-sdk -S

使用

• 除了perfLog页面渲染性能监控，其他都是实时上报

参数说明

import MonitorSdk from '@fe-hl/monitor-sdk';

const monitorSdk = MonitorSdk({
	pid: '1000', // 产品ID
	reportUrl: 'http://127.0.0.1:9001/report', // 上报的地址
	debug: false, // 是否开启debug，开启后打印控制台不上报
	jsErrorLog: true, // js异常
	promiseErrorLog: true, // promise异常
	resourcesErrorLog: true, // 资源加载异常
	exposureLog: true, //  // 曝光
	automaticBurialPointLog: true,  // 自动埋点
	pageDwellTimeLog: true, // 页面停留时间
	pvLog: true, // PV
	xhrLog: true, // 接口监控
	resourcesPerfLog: true, // 资源加载性能
	perfLog: true, // 页面渲染性能
});

// 自定义上报
monitorSdk.report({
	type: 'click',
	message:"下单成功"
});

爆光埋点

• 给需要爆光的元素加上appear属性，当元素在可视区域内，上报接口

	<div appear="广告1">广告</div>
		<div appear="{id:100}">广告</div>

无痕埋点

• 当元素发生点击事件，如果元素有report属性会自动上报接口

<el-button type="primary" size="default" report="{userId:'1000'}">
	无痕埋点
 </el-button>

 <el-button type="primary" size="default" report="report1">
	无痕埋点
 </el-button>

关键指标

• TTI触发时机

  • 1、首次渲染（FP）已经完成：页面的第一个像素已经被绘制。
  • 2、主线程空闲时间达到一定阈值：在一段时间内，浏览器主线程没有耗时的任务在执行。这意味着页面的关键渲染路径已经完成，主要内容已经可见。
  • 3、页面元素的可操作性：页面上的交互元素（如按钮、链接、输入框等）可以响应用户的交互操作。这表示页面已经加载完成，并且用户可以进行有意义的交互。
  • 当以上条件都满足时，TTI 会被触发

• FID触发时机

  • 1、用户首次与页面进行交互：用户执行了一个交互动作，如点击按钮、滚动页面、选择下拉菜单等。
  • 2、浏览器主线程忙于处理其他任务：当用户进行交互时，如果主线程正忙于处理其他任务（如执行 JavaScript、处理样式计算等），则会导致延迟。

指标参考

TODO

• 用户链路追踪(待实现)
• 用户页面行为录制(待实现)