# h5-simple-tracker

**Repository Path**: lsprod/h5-simple-tracker

## Basic Information

- **Project Name**: h5-simple-tracker
- **Description**: h5简易埋点sdk
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-10-09
- **Last Updated**: 2023-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @lgfe/h5-simple-tracker

简易上报前端 sdk, 仅支持 h5 使用(很简陋，上个人项目可以，工业级还是去使用成熟的 sdk 合适)

## 🔧 功能

- 全局错误上报(同步、异步)
- 路由记录上报(hash、history 均支持，可借此实现 pv 统计)
- 通过 `data-listener`实现自定义事件上报（源码里只写了 click 事件，可 fork 修改）
- 通过`Map`传递元素自定义属性和要监听的事件，实现自定义属性监听
- 通过实例 `sendTracker`方法实现自定义上报

## ⚙️ 安装

`pnpm i @lgfe/h5-simple-tracker`

## 🚀 快速开始

```typescript
// 初始化
import { Tracker } from '@lgfe/sdk-demo';

/** eat为自定义属性，click为WindowEventMap之一 */
const map = new Map<string, keyof WindowEventMap>([['eat', 'click']]);

// 无侵入埋点
export const tracker = new Tracker({
  // 自行指定后台地址(需自己写后台)
  requestUrl: 'http://localhost:3000/tracker/',
  uid: 'xxxxid',
  extra: {
    // 额外参数
    name: 'luoge',
    age: 80
  },
  historyTracker: true,
  hashTracker: true,
  jsError: true,
  domTracker: true,
  dataOnly: true,
  element: map,
});

// 手动上报
tracker.sendTracker('xxx', { name: 'luoge'})
```

```typescript
// 前端使用示例
import { useState } from 'react';
import { Link } from 'react-router-dom';
import './App.css';

const testKey = 'data-listener';

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="card">
        <button
          eat={JSON.stringify({
            text: '我是自定义数据', // domTracker 和 element结合使用
          })}
          onClick={() => setCount((count) => count + 1)}
          {...{ [testKey]: '我是自定义数据22'}} // data-only上报
        >
          count is {count}
        </button>
      </div>
      <button
        onClick={() => {
          const a = 1;
          // jsError 事件上报(同步)
          console.log(a.aaa.bbb)
        }}
      >
        throw error
      </button>

      <button
        onClick={async () => {
          const a = 1;
          // jsError 事件上报(异步)
          console.log(a.aaa.bbb)
        }}
      >
        throw async error
      </button>
      {/* 路由上报 */}
      <Link to="/home">Home</Link>
      <p className="read-the-docs"></p>
    </>
  );
}

export default App;

```

```javascript
// 服务端示例，可自定义修改
var express = require('express');
var router = express.Router();

/* post  */
router.post('/history', function(req, res, next) {
  console.log('history', JSON.stringify(req.body, null, 2));

  res.json({ retCode: 0, retMsg: 'history' })
});

router.post('/dom', function(req, res, next) {
  console.log('dom', JSON.stringify(req.body, null, 2));

  res.json({ retCode: 0, retMsg: 'dom' })
});

router.post('/error', function(req, res, next) {
  console.log('error', JSON.stringify(req.body, null, 2));
  res.json({ retCode: 0, retMsg: 'error' })
});

router.post('/data-only', function(req, res, next) {
  console.log('data-only', JSON.stringify(req.body, null, 2));
  res.json({ retCode: 0, retMsg: 'dom' })
});

module.exports = router;

```