th-gather
th-gather
是简单易用且可扩展的前端全埋点脚本。可以统计上报接口请求,页面停留时间,用户设备等信息。为业务需求迭代提供数据参考。
或者
import init from 'th-gather' ;
init ( {
projectKey : 'pc_project' ,
url : '/log/record' ,
isLog : true ,
beforeInit ( ) {
console . log ( 'init start...' ) ;
} ,
mergeMsg ( ) {
// request ...
return new Promise ( ( resolve ) => {
setTimeout ( ( ) => {
resolve ( { name : '测试用户' , age : 12 , id : 'user_id' } ) ;
} , 1000 ) ;
} ) ;
} ,
beforeSendMsg ( data ) {
const newData = { ...data , newKey : 'add new value' } ;
return newData ;
} ,
} ) ;
参数
类型
描述
默认值
projectKey
string
自定义的项目标识,方便区分多个项目
-
url
string
上报的地址
-
gatherKeys
BaseMsg[]
配置需要收集的基本信息
defaultKeys
frequency
number
上报频率,默认为每满 10 条上报一次
10
isDiscard
boolean
是否在窗口关闭时,上报剩余的数据
true
isRoutes
boolean
是否收集路由跳转信息
true
isPerformance
boolean
是否监听浏览器性能信息
true
isPromiseError
boolean
是否监听 promise 错误(没有被 reject 处理的 promise 错误)
true
isResourceError
boolean
是否监听页面资源错误
true
isRequest
boolean
是否监听接口请求信息
true
isLog
boolean
是否需要打印日志
-
beforeInit
()=>void
脚本初始化之前运行
-
mergeMsg
() => (Record<string,any> or Promise<Record<string,any>>)
返回的值会被合并到每一条上报数据中, 可以用于从接口中读取用户信息, 此函数优先级在内置埋点事件开始监听之前
-
beforeSendMsg
(data: ExtraMsg & BaseMsg) => ExtraMsg & BaseMsg
上报数据之前,可以在此对数据进行加工
-
headers
Object
上报请求头, 因为页面卸载上报的时候无法设置请求头,可能会导致部分数据丢失
-
上报的数据由基本数据 + 对应类型数据
组成(使用 gatherKeys 编辑的时候,只能编辑基本数据字段 ),收集的示例数据如下所示:
默认包含以下选项['key','o','ua','ul','ct','vp','sr','logId','gmt','dpr','rf']
字段
描述
key
项目 key 值
o
当前页面路径
ua
ua
ul
浏览器语言
ct
网络类型
vp
浏览器宽高
sr
屏幕宽高
logId
每条记录的 id 值
gmt
数据生成时间
dpr
devicePixelRatio
rf
referer
字段
描述
type
标识为 performance
dns
dns 查询时间
tcp
tcp 连接耗时
ttfb
读取页面第一个字节的时间
bt
白屏时间
dt
解析 dom 树耗时
drt
dom 完成时间
rt
request 请求耗时
lt
页面完成时间
nv
当前页面如何导航到此处
字段
描述
type
标识为 pv
pathname
当前路由地址
from
上一个跳转地址
title
网页标题
stay
停留时间
tips: 收集所有由XMLHttpRequest发起的请求
字段
描述
type
标识为 interface
url
接口请求地址
tc
接口耗时
cd
状态码
rq
发送请求时间
rp
接受响应时间
字段
描述
type
标识为 error
st
错误类型 js
file
文件名
line
error.lineno
col
error.coln
msg
错误信息
字段
描述
type
标识为 error
st
错误类型 resource
file
资源链接
msg
错误信息
字段
描述
type
标识为 error
st
错误类型 promise
file
' '
msg
错误信息