th-gather

th-gather是简单易用且可扩展的前端全埋点脚本。可以统计上报接口请求，页面停留时间，用户设备等信息。为业务需求迭代提供数据参考。

一、安装和使用

安装

npm i th-gather

或者

yarn add 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 编辑的时候，只能编辑基本数据字段)，收集的示例数据如下所示：

四、收集字段含义

4.1 基本数据

默认包含以下选项['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

4.2 浏览器性能数据

字段	描述
type	标识为 performance
dns	dns 查询时间
tcp	tcp 连接耗时
ttfb	读取页面第一个字节的时间
bt	白屏时间
dt	解析 dom 树耗时
drt	dom 完成时间
rt	request 请求耗时
lt	页面完成时间
nv	当前页面如何导航到此处

4.3 路由信息

字段	描述
type	标识为 pv
pathname	当前路由地址
from	上一个跳转地址
title	网页标题
stay	停留时间

4.4 接口信息

tips: 收集所有由XMLHttpRequest发起的请求

字段	描述
type	标识为 interface
url	接口请求地址
tc	接口耗时
cd	状态码
rq	发送请求时间
rp	接受响应时间

4.5 js 错误信息

字段	描述
type	标识为 error
st	错误类型 js
file	文件名
line	error.lineno
col	error.coln
msg	错误信息

4.6 资源异常信息

字段	描述
type	标识为 error
st	错误类型 resource
file	资源链接
msg	错误信息

4.7 promise 错误信息

字段	描述
type	标识为 error
st	错误类型 promise
file	' '
msg	错误信息