网页性能监控 18 项数据指标,浏览器信息,错误收集上报方案,前端工程化。
version: 1.2
-
浏览器信息
-
网页标题
-
URL
-
上报时间 ( YYYY-MM-DD HH:mm:ss / timestamp )
-
JavaScript 语法错误
-
资源加载错误
-
Promise 错误
-
上次页面卸载耗时
-
连接时间
-
重定向耗时
-
请求耗时
-
获取首字节时间 ( TTFB )
-
响应读取时间
-
Dom 解析时间
-
脚本执行时间
-
Dom 渲染耗时
-
首次可交互时间
-
页面完整加载时间
-
白屏时间
-
FMP ( First Meaningful Paint ) : 首次有意义的绘制
-
LCP ( Large Contentful Paint ) : 最大内容渲染
-
FP ( First Paint ) : 首次绘制时间
-
FCP ( First Content Paint ) : 首次内容绘制时间
-
FID ( First Input Delay ) : 首次交互延迟
- 资源加载时间 ( JavaScript / Css / Img )
本项目默认基于 Aliyun 日志监控服务上报,你可以在 ./src/config/index.js
配置日志上报地址:
// 上报服务器
export const __HOST__ = 'region.log.aliyuncs.com'
// 上报项目
export const __PROJECT__ = 'project-name'
// 上报存储区
export const __LOG_STORE__ = 'store-name'
// 上报时间(单位 s)
// 当未满 __LIMIT__ 条日志时,每隔 __MAX_TIME__ 秒上报一次
export const __MAX_TIME__ = 10
// 单次上报日志数
export const __LIMIT__ = 10
之后执行构建:
yarn build
最后在网站链入 ./dist/web-monitor.min.js
即可开启上报:
<body>
<!-- ... -->
<script src="/dist/web-monitor.min.js"></script>
</body>
开发构建:
yarn dev
之后在 ./test/index.html
进行本地调试,当处于 development 模式时,所有上报均会在控制台打印。
如果你需要自定义上报,可以在统一发送出口 ./src/sender/send.js
实现 logger.send()
方法。
实现前:
import { generalInfo } from '../monitor/general'
import { getLogger } from './index'
// 原上报方法
export function send(logstore, msg, pre = '') {
const logger = getLogger(logstore)
logger.send(pre, {
...generalInfo(), // 通用信息对象
...msg // 当前上报信息对象
})
}
实现后:
import { generalInfo } from '../monitor/general'
// 新上报方法
export function send(logstore, msg, pre = '') {
const logger = new NewLogger(options)
logger.send({
...generalInfo(),
...msg
})
}
如果需要满足更复杂的场景,可以继续实现 ./src/sender/index.js
中派发日志实例的出口。
key | 说明 |
---|---|
UA_ua |
user-agent |
UA_browser_name |
浏览器名 |
UA_browser_major |
浏览器主版本 |
UA_browser_version |
浏览器版本 |
UA_cpu_architecture |
系统 cpu 架构 |
UA_engine_name |
浏览器渲染引擎 |
UA_engine_version |
浏览器渲染引擎版本 |
UA_os_name |
用户操作系统 |
UA_os_version |
用户操作系统版本 |
key | 说明 |
---|---|
title |
网页标题 |
url |
当前网址 |
timestamp |
上报时的时间戳 |
date |
上报时的格式化时间 |
type |
上报类型 error / performance
|
subType |
上报子类型 |
key | 说明 |
---|---|
type |
上报类型 error
|
subType |
上报子类型 js_error
|
message |
错误信息 |
position |
错误位置 |
stack |
栈信息 |
selector |
错误元素选择器 |
key | 说明 |
---|---|
type |
上报类型 error
|
subType |
上报子类型 resource_error
|
tagName |
错误节点标签名 |
selector |
错误元素选择器 |
key | 说明 |
---|---|
type |
上报类型 error
|
subType |
上报子类型 promise_error
|
message |
错误信息 |
position |
错误位置 |
stack |
栈信息 |
selector |
错误元素选择器 |
key | 说明 |
---|---|
type |
上报类型 performance
|
subType |
上报子类型 base
|
connect |
连接时间 |
domContentLoaded |
脚本执行时间 |
domRender |
Dom 渲染耗时 |
interactive |
首次可交互时间 |
load |
完整加载时间 |
parseDOM |
Dom 解析时间 |
redirect |
重定向耗时 |
request |
请求耗时 |
response |
响应读取时间 |
ttfb |
获取首字节时间 |
unload |
上次页面卸载耗时 |
whiteScreen |
白屏时间 |
key | 说明 |
---|---|
type |
上报类型 performance
|
subType |
上报子类型 paint_core
|
FCP_duration |
首次内容绘制时间延迟 |
FCP_startTime |
首次内容绘制开始时间 |
FP_duration |
首次绘制时间延迟 |
FP_startTime |
首次绘制开始时间 |
key | 说明 |
---|---|
type |
上报类型 performance
|
subType |
上报子类型 paint_fid
|
FID_duration |
首次交互处理耗时 |
FID_inputDelay |
首次交互处理延迟 |
FID_selector |
首次交互元素选择器 |
FID_startTime |
首次交互时间 |
key | 说明 |
---|---|
type |
上报类型 performance
|
subType |
上报子类型 resource
|
res_type_n_name |
type 类型的第 n 个资源名称 |
res_type_n_duration |
type 类型的第 n 个资源加载耗时 |
res_type_n_protocol |
type 类型的第 n 个资源所用协议 |
res_type_n_size |
type 类型的第 n 个资源大小 |
默认统一采用 s
为单位,保留 3
位小数,你可以在 ./src/config/index.js
修改:
/**
* 上报保留位数
* 默认为小数点后 3 位
*/
export const __RETAIN__ = 3