代码拉取完成，页面将自动刷新
npm i @fe-hl/monitor-sdk -S
perfLog页面渲染性能监控，其他都是实时上报| 参数 | 是否必传 | 默认值 | 说明 |
|---|---|---|---|
| pid | true | - | 产品ID |
| reportUrl | true | - | 上报接口地址 |
| debug | false | false | debug模式打印控制台，不上报接口 |
| jsErrorLog | false | false | js异常 |
| promiseErrorLog | false | false | promise异常 |
| resourcesErrorLog | false | false | 资源加载异常 |
| exposureLog | false | false | 曝光埋点 |
| automaticBurialPointLog | false | false | 自动埋点 |
| pageDwellTimeLog | false | false | 页面停留时间 |
| pvLog | false | false | pv |
| xhrLog | false | false | 接口监控 |
| resourcesPerfLog | false | false | 资源加载性能 |
| perfLog | false | false | 页面渲染性能 |
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>
| 指标 | 计算方式 | 说明 |
|---|---|---|
| TTFB | responseStart-redirectStart | 首字节时间(页面重定向到服务器接收页面的第一个字节) |
| FP | responseEnd - fetchStart | 首次绘制时间-白屏时间(背景颜色绘制，它是将第一个像素点绘制到屏幕的时刻) |
| FCP | 谷歌web-vitals | 首次内容绘制时间(浏览器将第一个DOM渲染到屏幕的时间) |
| FMP | 谷歌web-vitals | 首次有意义绘制时间(FMP 是一个主观的指标，触发时机可能是主要内容的绘制、用户页面交互) |
| LCP | 谷歌web-vitals | 最大内容渲染时间(LCP 是一个动态的指标，它可能在页面加载过程中发生变化触发时机可能是主要内容绘制完成、用户页面交互) |
| DCL | domContentLoadedEventEnd - domContentLoadedEventStart | DOMContentLoaded事件耗时 |
| L | loadEventStart - fetchStart | 页面完全加载总时间 |
| TTI | 谷歌web-vitals | 首次可交互时间(页面从加载开始到用户可以进行有意义的交互操作) |
| FID | 谷歌web-vitals | 首次输入延迟时间(用户首次输入与页面响应之间的延迟时间) |
TTI触发时机
FID触发时机
| 指标 | 优 | 中 | 差 | 说明 |
|---|---|---|---|---|
| TTFB | 0-800(ms) | 800-1800(ms) | 1800-~(ms) | 第一字节时间 |
| FCP | 0-1.8(sec) | 1.8-3.0(sec) | 3.0-~(sec) | 首次内容绘制 |
| FID | 0-100(ms) | 100-300(ms) | 300-~(ms) | 首次输入延迟 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
