JS 埋点 SDK

使用示例

// 初始化
const tracker = new Tracker({
  appId: 'your-app-id',
  endpoint: 'https://your-api.com/track',
  autoTrack: {
    pageView: true,
    click: true,
    performance: true,
    error: true
  },
  debug: true
});

// 手动上报事件
tracker.event('button_click', {
  button_id: 'submit',
  category: 'form'
});

// 设置用户属性
tracker.setUserProfile({
  name: '张三',
  level: 'vip',
  registration_date: '2024-01-01'
});

// 用户行为
tracker.action('search', {
  keyword: 'JavaScript',
  results_count: 42
});

参数说明

const config = {
  // 必填：应用ID
  appId: 'your-app-id',
  
  // 必填：上报地址
  endpoint: 'https://api.example.com/track',
  
  // 自动跟踪配置
  autoTrack: {
    pageView: true,      // 页面浏览
    click: false,        // 点击事件（生产环境建议关闭，数据量大）
    performance: true,   // 性能监控
    error: true,         // 错误监控
    jsError: true,       // JS错误
    resourceError: true, // 资源加载错误
    ajaxError: false     // AJAX错误（需要时开启）
  },
  
  // 采样率：0-1，1表示100%上报
  sampling: 1,
  
  // 批量上报配置
  batch: {
    enabled: true,  // 启用批量上报
    size: 10,       // 每10条数据批量上报
    timeout: 5000   // 5秒后自动上报
  },
  
  // 发送前回调（可用于数据过滤、增强）
  beforeSend: function(data) {
    // 返回 false 阻止发送
    // 或返回修改后的数据
    data.custom_field = 'custom_value';
    return data;
  },
  
  // 调试模式
  debug: false
}

功能特性

1. 支持多种事件类型：页面浏览、点击事件、自定义事件等。
2. 支持性能监控：页面性能指标（如加载时间）、资源加载错误等。
3. 支持错误监控：JS错误、Promise错误等。
4. 支持数据批量上报和单个上报，并具有重试机制。
5. 支持在页面卸载前上报数据（使用sendBeacon）。
6. 支持用户自定义扩展和配置。
7. 确保数据脱敏和隐私保护（如对敏感信息进行哈希处理）。
8. 支持采样率控制。

设计思路

• 使用单例模式，确保全局只有一个实例。
• 配置化：允许用户传入配置，如上报地址、采样率、是否自动监控等。
• 事件队列：将待上报的事件放入队列，可以批量上报。
• 上报方式：支持图片打点、fetch、sendBeacon等，并根据情况选择。

实现步骤

1. 定义配置项和默认配置。
2. 初始化SDK，根据配置决定是否自动开启性能监控、错误监控等。
3. 提供公开API，如trackPageView、trackEvent、trackError等。
4. 内部实现数据组装、上报逻辑。