th-gather

KO | EN

gitlite — search

#react #typescript #llm #android #machine-learning #deep-learning #linux #nodejs #macos #windows #awesome #vue #security #open-source

(★ 14)

前端全埋点脚本

th-gather 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# th-gather ![NPM](https://img.shields.io/npm/v/th-gather) ![License](https://img.shields.io/npm/l/th-gather)

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

# 一、安装和使用

## 安装

```npm
npm i th-gather
```

或者
 
```yarn
yarn add th-gather
```

## 使用

```ts
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;
  },
});
```

# 二、初始化选项

# 三、上报数据格式

上报的数据由`基本数据 + 对应类型数据`组成(**使用 gatherKeys 编辑的时候，只能编辑基本数据字段**)，收集的示例数据如下所示：

![image](https://user-images.githubusercontent.com/48620706/181671691-2c560695-e215-4b26-b892-811d969c6063.png)

# 四、收集字段含义

## 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 路由信息

## 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  |     错误信息     |

th-gather

th-gather 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

th-gather

th-gather 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README