@lgfe/h5-simple-tracker

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

🔧 功能

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

⚙️ 安装

pnpm i @lgfe/h5-simple-tracker

🚀 快速开始

// 初始化
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'})

// 前端使用示例
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;

// 服务端示例，可自定义修改
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;