埋点管理

enum IEventType = {
  PAGE_SHOW = 'pageShow',
  CLICK = 'behavior.click',
  EXPOSURE = 'behavior.exposure',
}

interface IEvent {
  eventId: string, //  行为 `id`，比如下载download, 分享 share, 登录 login
  eventType: IEventType,
  eventTarget: IEventTarget[], // 事件对象的描述，类似 `js` 里的 `event.target`
  timestamp: number, // 发生时间
}

{
  eventId: 'share',
  eventType: IEventType.CLICK,
  eventTarget: [
    {
      goodId: '1',
      channel: 'wechat',
    },
    {
      goodId: '2',
      channel: 'wechat',
    }
  ],
  timestamp: Date.now()
}

{
  eventId: 'share',
  eventType: IEventType.CLICK,
  eventTarget: [
    {
      projectId: '1',
    },
    {
      projectId: '2',
    },
  ],
  timestamp: Date.now()
}

interface IEventTarget {
  targetKey: string // 这个就是前文中的 goodId/projectId
  targetValue: string
  extend?: { [k: string]: any }
}

{
  eventId: 'share',
  eventType: IEventType.CLICK,
  eventTarget: [
    {
      targetKey: 'goodId',
      targetValue: '1'
      extend: {
        channel: 'wechat',
      }
    },
    {
      targetKey: 'goodId',
      targetValue: '2'
      extend: {
        channel: 'wechat',
      }
    }
  ],
  timestamp: Date.now()
}

interface ITrack {
  common: {
    appId: string // 应用ID
    appName: string, // 应用名称
    appVersion: string // 应用版本
        
    os: string, // 系统
    ua: string, // 浏览器
    sr: string, // 屏幕分辨率
  },
  page: {
    url: string,
    // pageId: string, // 只要能区分page即可
  },
  user: {
    userId?: string
  },
  event?: IEvent,
  timestamp: Number, // 发送日志的时间
}

type IUser = {
  userId: string
}

type IOption = {
  appId: string,
  appName: string,
  appVersion: string
  
  userInfo: () => IUser
}

class MyTracker {
  private common
  private pageStack: MyPage
  private _transform

  constructor(opts: IOption) {
    const { appId, appName, appVersion } = options || {}
    
    this.common = {
      os: getOS(), // 系统
      ua: getBrowser(), // 浏览器
      sr: getScreen(), // 屏幕分辨率
      
      appId,
      appName,
      appVersion,
    }
 
    this.pageStack = new MyPage() 
    
    // 插件注册
    this._transform = compose(options?.plugins || [])
  }
}

class MyPage {
  private history: { url: string }[]
  private maxLength
  constructor(opts?) {
    this.maxLength = opts?.maxLength || 1
  }
  record() {
    this.history.push({ url: location.href })
    this.history.slice(-1 * this.maxLength)
  }
  last() {
    return this.history[this.history.length - 1]
  }
}

// 上报pageShow
page(page?: IPage, params = null) {
  this.pageStack.record(page)
  this._report({
    type: IEvent_TYPE.PAGE_SHOW,
  })
}

// 上报behavior
track(log: IEvent) {
  this._report({
    type: IEvent_TYPE.CLICK,
    log,
  })
}

export function compose(plugins) {
  if (!Array.isArray(plugins)) {
    throw new Error('plugins must be an array')
  }

  if (plugins?.some(p => !isFunction(p))) {
    throw new Error('plugins must be all functions')
  }

  return (ctx, initialData, doneCallback) => {
    let lastIndex = -1
    
    const step = async (index: number, data: any) => {
      if (index == lastIndex) {
        throw new Error('next() called multiple times')
      }

      if (index == plugins.length) {
        return doneCallback(data)
      }
      
      lastIndex = index
      
      const callback = plugins[index]
      await callback(ctx, data, (nextData: any) => {
        step(index + 1, nextData)
      })
    }

    step(0, initialData)
  }
}

class TrackDebug extend HTMLElement {
  container

  constructor() {
    super()
    
    const shadowRoot = this.attachShadow({ mode: 'open' })
    shadowRoot.appendChild(this.template())
    this.container = shadowRoot.querySelector('#track-list')
  }
  private template() {
    const template = document.createElement('template')
    template.innerHTML = `<ul id="track-list"></ul>`
    return template.content.cloneNode(true)
  }

  static get observedAttributes() {
    return ['data-list']
  }
  attributeChangedCallback() {
    this.render()
  }
  addLog(data: {
    log: string
    timestamp: string
  }) {
    const list = this.list || []

    list.unshift(data)

    this.setAttribute('data-list', JSON.stringify(list))
  }
  render() {
    let data = []
    try {
      data = JSON.parse(this.getAttribute('data-list'))
    } catch (e) {}

    const liStr = data.map((item: { log: string; timestamp: string; }) => {
      return `
        <li>
          <p>${item.log}</p>
          <span>${formatTime(item.timestamp)}</span>
        </li>`
      }).join('')
    
    this.container.innerHTML = liStr
  }
}
customElements.define('track-debug', TrackDebug)

let trackIns
export default async (ctx, data, next) => {
  if (!trackIns) {
    trackIns = document.createElement('track-debug')
    document.body.appendChild(trackIns)
  }
  trackIns?.addLog(data)
  next()
}

export default async (ctx, data, next) => {
  // 数据校验
  let valid = true
  if (ctx.options.validate) {
    try {
      const res = ctx.options.validate ? await checkValid(data) : await Promise.resolve({ data: true })
      valid = !!res?.data
    } catch (e) {}
  }
  
  // 校验成功，才执行下一个插件
  if (!ctx.options.validate || valid) {
    next(data)
  }
}

private _report(data: { type: IEvent_Type, log?: IEvent }) {
  const logData: ITrack = {
    common: this.common,
    user: this.options?.userInfo()
    page: this.pageStack.last,
    timestamp: Date.now(),
    event: log,
  }

  // 插件处理
  this._transform(this, logData, (finalData) => {
    sendImmediateLog(finalData)
  })
}