asai-vue-logger — 用户行为追踪 SDK

包信息

| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 | |------------|---------|-------------|------| | @estun/asai-vue-logger | src/index.ts | AsaiVueLogger → { ClassAsaiLogTracker, AsaiWebLog } | Feature |

概述

asai-vue-logger 是符合 GDPR 取向的轻量级无埋点行为追踪 SDK，自动监听点击等事件，匿名化后批量上报；附带 AsaiWebLog 展示组件。

集成方式

// monorepo — webclient/src/App.vue（首屏同步）
import AsaiVueLogger from './plugs/asai-vue-logger/src/index';
// npm
// import { ClassAsaiLogTracker, AsaiWebLog } from '@estun/asai-vue-logger';

useProvide({ plugs: { AsaiVueLogger } });

const tracker = new $fn.AsaiVueLogger.ClassAsaiLogTracker({
  saveTracker: (data) => fetch('/api/track', { method: 'POST', body: JSON.stringify(data) }),
  batchSize: 20,
  flushInterval: 5000,
});

独立性约束

• 禁止 cross-import 其它 plugs/*。
• 上报 URL 与存储由业务 saveTracker 回调实现，不依赖 Host API 插件。

主要 API / 导出

| 导出 | 说明 | |------|------| | ClassAsaiLogTracker | 追踪器类：track(), destroy() | | AsaiWebLog | 日志展示 Vue 组件 |

TrackerConfig: saveTracker, batchSize, flushInterval, eventTypes, ignoreSelectors, sampleRate, customElementParser

性能说明

• 首屏同步注册；追踪器本身轻量。
• 事件代理（单 document 监听器）、passive、rAF 节流；浏览器信息构造时缓存一次。
• pagehide / visibilitychange 强制 flush。

peerDependencies 建议

{
  "peerDependencies": {
    "vue": "^3.4.0"
  }
}

TrackEvent 字段

| 字段 | 说明 | |------|------| | pvid | 页面视图 ID（匿名） | | et | 事件类型 | | el | 元素标签（≤120 字符） | | ts | 时间戳 | | x / y / vw / vh | 坐标与视口 | | platform / brand | 环境信息 |

格式化输出

[HH:MM:SS.mmm]; 事件类型; 元素标签; pvid; x; y; vw; vh; platform; brand;

隐私

• 忽略 input[type="password"]
• URL 脱敏 token/session/user/email/password/auth 参数
• sampleRate 采样丢弃

文件结构

asai-vue-logger/
├── src/index.ts
└── src/components/ClassAsaiLogTracker.ts, AsaiWebLog.vue