tracker-sdk's Introduction

Tracker

A SDK data burying tool for the front end, the specific implementation details can be viewed 'src/core/index.ts'.

Of course, you can expand private needs on the basis of this library.

Buried point monitoring is usually to provide some data to the product

For example, how many messages have been sent to wechat
Logs monitor the upstream interface and downstream output So that the page error can locate the problem

Therefore, data monitoring is indispensable in the development process.

Options introduction:

# configuring params
/**
 * @uuid user Id
 * @requestUrl 数据上报地址
 * @historyTracker history上报
 * @hashTracker hash上报
 * @domTracker 事件上报（需携带 Tracker-key）
 * @sdkVersion sdk版本
 * @extra User DIY 透传字段
 * @jsError js 和 promise 报错异常上报
 */
export interface DefaultOptons {
  uuid: string | undefined;
  requestUrl: string | undefined;
  historyTracker: boolean;
  hashTracker: boolean;
  domTracker: boolean;
  jsError: boolean;
  sdkVersion: string | number;
  extra: Record<string, any> | undefined;
}


# coustom report
export type reportTrackerData = {
  [ErrType: string]: {
    [key: string]: any;
    event: string;
    targetKey: string;
  };
};

Usage:

const tr = new Tracker.Tracker({
  requestUrl: "http://localhost:3300/xxxx", //接口地址
  historyTracker: true,
  domTracker: true,
  jsError: true,
});

Feature:

Page Viewer: historyTracker: true or hashTracker: true
Dom tracker: domTracker: true
Js Error: jsError: true, following events are monitored internally:
1. SyntaxError
2. RangeError
3. ReferenceError
4. EvalError
5. TypeError
6. URIError
7. Ajax(safeRange: 200 < code < 400) |
8. 资源加载错误

# Dom tracker: 通过在元素上添加 target-key 属性，这样表可以在上报时携带元素数据信息
<button target-key="埋点值">按钮</button>
const tr = new Tracker({
  requestUrl: "http://localhost:3000/xxxx", //接口地址
  domTracker: true,
});


# 用户唯一表示 可以在登录之后通过接口返回的 id 进行设置值 提供了 setUserId
# 主要是给需要监听的元素添加一个属性 用来区分是否需要监听 target-key
tr.setUserId();


# Tracker 提供了自定义上报的能力，必须包含 event 和 targetKey  两个字段
tr.sendTracker({
	event: "",
	targetKey: "",
 });

# 同时，也存在一个可供用户进行数据携带的方法
tr.setExtra<T extends DefaultOptons["extra"]>()

tracker-sdk's People

Contributors

Stargazers

Watchers

tracker-sdk's Issues

TypeError: Failed to execute 'fetch' on Window': Illegal invocation

I try to rewrite the fetch to fetch request error event to intercept, code 164 line.

However, this error occurs when initiating a fetch request: TypeError: Failed to execute 'fetch' on Window': Illegal invocation.

In the fetch . I try to through bind to fix this, but not ideal

window.fetch.bind(window, 'httas')
.then(res => console.log(res.json()))
.then(async res => console.log('====='))
.catch(error => console.log(error, '--=-=-=-=-=-='));

Recommend Projects