web-performance-monitor icon indicating copy to clipboard operation
web-performance-monitor copied to clipboard

Published 20 hours ago • verified publisher icon fz6m
→

Metadata

前端 18 项数据指标性能监控，浏览器信息，错误收集上报方案，前端工程化。

web-performance-monitor

网页性能监控 18 项数据指标，浏览器信息，错误收集上报方案，前端工程化。

version: 1.2

监控范围

通用

  • 浏览器信息

  • 网页标题

  • URL

  • 上报时间 ( YYYY-MM-DD HH:mm:ss / timestamp )

错误收集

  • JavaScript 语法错误

  • 资源加载错误

  • Promise 错误

性能监控

Base

  1. 上次页面卸载耗时

  2. 连接时间

  3. 重定向耗时

  4. 请求耗时

  5. 获取首字节时间 ( TTFB )

  6. 响应读取时间

  7. Dom 解析时间

  8. 脚本执行时间

  9. Dom 渲染耗时

  10. 首次可交互时间

  11. 页面完整加载时间

  12. 白屏时间

Render

  1. FMP ( First Meaningful Paint ) : 首次有意义的绘制

  2. LCP ( Large Contentful Paint ) : 最大内容渲染

  3. FP ( First Paint ) : 首次绘制时间

  4. FCP ( First Content Paint ) : 首次内容绘制时间

  5. FID ( First Input Delay ) : 首次交互延迟

Resource

  1. 资源加载时间 ( 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 中派发日志实例的出口。

上报一览

User-Agent

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 用户操作系统版本

Common

key 说明
title 网页标题
url 当前网址
timestamp 上报时的时间戳
date 上报时的格式化时间
type 上报类型 error / performance
subType 上报子类型

Error

JavaScript

key 说明
type 上报类型 error
subType 上报子类型 js_error
message 错误信息
position 错误位置
stack 栈信息
selector 错误元素选择器

Resource

key 说明
type 上报类型 error
subType 上报子类型 resource_error
tagName 错误节点标签名
selector 错误元素选择器

Promise

key 说明
type 上报类型 error
subType 上报子类型 promise_error
message 错误信息
position 错误位置
stack 栈信息
selector 错误元素选择器

Performance

Base

key 说明
type 上报类型 performance
subType 上报子类型 base
connect 连接时间
domContentLoaded 脚本执行时间
domRender Dom 渲染耗时
interactive 首次可交互时间
load 完整加载时间
parseDOM Dom 解析时间
redirect 重定向耗时
request 请求耗时
response 响应读取时间
ttfb 获取首字节时间
unload 上次页面卸载耗时
whiteScreen 白屏时间

Paint

Core
key 说明
type 上报类型 performance
subType 上报子类型 paint_core
FCP_duration 首次内容绘制时间延迟
FCP_startTime 首次内容绘制开始时间
FP_duration 首次绘制时间延迟
FP_startTime 首次绘制开始时间
FID
key 说明
type 上报类型 performance
subType 上报子类型 paint_fid
FID_duration 首次交互处理耗时
FID_inputDelay 首次交互处理延迟
FID_selector 首次交互元素选择器
FID_startTime 首次交互时间

Resource

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

← Metadata

27
Stars
12
Forks
Watchers

Owner

verified publisher icon fz6m

Metadata

前端 18 项数据指标性能监控，浏览器信息，错误收集上报方案，前端工程化。

Back