前端监控 ​

//  初始化配置  【加载配置、载入配置】
function init(options: Options) {
    // 需要的配置: appid系统ID userId用户ID deary合并延迟时间
    new Tracker(options)
}

/**
 * 配置类型
 * @appId 系统ID
 * @userId 用户ID
 * @delay 合并间隔时长
 * @requestUrl 接口地址
 * @historyTracker history上报
 * @hashTracker hash上报
 * @domTracker 携带Tracker-key 点击事件上报
 * @historyTracker sdkVersion sdk版本
 * @jsError js 和 promise 报错异常上报
 * @sdkVersion SDK版本
 * @historyTracker extra 透传字段
 */
export interface DefaultOptions {
  appId: string
  userId: string
  requestUrl: string | undefined
  delay: number
  historyTracker: boolean
  hashTracker: boolean
  domTracker: boolean
  jsError: boolean
  skdVersion: string | number
  extra: Record<string, any> | undefined
}

export interface Options extends Partial<DefaultOptions> {
  appId: string
  userId: string
  requestUrl: string
}

// * 版本枚举
export enum TrackerConfig {
  version = '1.0.0',
}

export default class Tracker {
  public data: Options
  private version: string | undefined

  public constructor(options: Options) {
    // 将默认配置与传入配置合并
    this.data = Object.assign(this.defaultOptions(), options)
    this.installInnerTrack()
  }

  // * 默认配置
  private defaultOptions(): DefaultOptions {
    this.version = TrackerConfig.version
    return <DefaultOptions>{
      delay: 0,
      skdVersion: this.version,
      historyTracker: false,
      hashTracker: false,
      domTracker: false,
      jsError: false,
    }
  }

  // * 加载配置
  private installInnerTrack() {
	// ---------- 后期需要加载的配置都在这里进行 --------
    // 开启错误监控
    if (this.data.jsError) {
      errorTrackerReport()
    }
  }
}

export interface ResourceElement extends HTMLElement {
  src: string
  href: string
}

/**
 * 全局错误捕获【自动捕获并上报】
 */
export function errorTrackerReport() {
  // * 资源错误
  function resourceErrorTracker(e: ErrorEvent) {
    let target = e.target as ResourceElement
    const log = <ErrorReport>{
      message: `加载 ${target.tagName} 资源错误`,
      file: target.src || target.href,
      errorType: 'resourceError',
    }
    console.log('资源错误上报数据', log)
    // lazyReport('error', log)
  }

  // ----  js error --- 同步错误、资源错误
  window.addEventListener(
    'error',
    (e) => {
      // 判断是否为资源错误
      const target = e.target
      const isElementTarget =
        target instanceof HTMLScriptElement ||
        target instanceof HTMLLinkElement ||
        target instanceof HTMLImageElement
      if (isElementTarget) return resourceErrorTracker(e)

      const log = <ErrorReport>{
        errorType: 'jsError',
        message: e.message,
        file: e.filename,
        col: e.colno,
        row: e.lineno,
        error: e.error,
      }
      console.log('JS错误上报数据', log)
      // lazyReport('error', log)
    },
    true
  )

  // ---- Promise Error ---- 异步错误Promise
  window.addEventListener('unhandledrejection', (e) => {
    const log = <ErrorReport>{
      errorType: 'promiseError',
      error: e as unknown,
      message: e.reason,
    }
    console.log('Promise错误上报数据', log)
    // lazyReport('error', log)
  })
}

// * 错误上报数据格式
export interface DefaultErrorReport {
  message: string
  file: string
  row: string | number
  col: string | number
  error: string
  errorType: string
}

export interface ErrorReport extends Partial<DefaultErrorReport> {
  errorType: string
  message: string
  fill: string
}

export function errorCatcher(error: string, msg: string) {
  const log = <ErrorReport>{
    message: msg,
    error,
    errorType: 'catchError',
  }
  // console.log('手动捕获错误上报数据', log)
  lazyReport('error', log)
}

/**
 * 手动上报【手动埋点】
 */
export function actionCatcher(actionType: string, data: unknown) {
  const log = {
    actionType,
    data,
  }
  console.log('手动埋点上报---', log)
  // lazyReport('action', log)
}

/**
 * 自动上报【无痕埋点】
 */
export function autoTrackerReport() {
  // 自动上报【只埋点用户点击行为】
  document.body.addEventListener(
    'click',
    function (e) {
      const clickDOM = e.target as HTMLElement

      // 获取标签上的data-target属性的值
      let target = clickDOM.getAttribute('data-target')

      // 获取标签上data-no属性的值
      let no = clickDOM.getAttribute('data-no')

      // 避免重复上报
      if (no !== null) return

      if (target) {
        // 取出target的值作为上报内容
        const log = { actionType: 'click', data: target }
        console.log('自动埋点上报内容(data值)---', log)
        // lazyReport('action', log)
      } else {
        // 使用通用值作为上报内容
        const path = getPathTo(clickDOM)
        const log = { actionType: 'click', data: path }
        console.log('自动埋点上报内容(默认值)---', log)
        //lazyReport('action', log)
      }
    },
    false
  )
}

/**
 * 获取元素的dom路径
 * @param {*} element
 * @returns
 */
export function getPathTo(element: HTMLElement): string | undefined {
  if (element.id !== '') return '//*[@id="' + element.id + '"]'
  if (element === document.body) return element.tagName
  let ix = 0
  let siblings = element.parentElement!.children
  for (let i = 0; i < siblings.length; i++) {
    let sibling = siblings[i]
    if (sibling === element)
      return (
        getPathTo(element.parentElement as HTMLElement) + '/' + element.tagName + '[' + (ix + 1) + ']'
      )
    if (sibling?.nodeType === 1 && sibling.tagName === element.tagName) ix++
  }
}

//*[@id="root"]/DIV[1]/DIV[2]/BUTTON[1]

/**
 * 重写pushState方法和replaceState方法
 */
export  function createHistoryEvent<T extends keyof History>(type: T) {
  const origin = window.history[type]
  return function (this: any) {
    const res = origin.apply(this, arguments)
    const e = new Event(type)
    window.dispatchEvent(e)
    return res
  }
}

/**
 * history路由监听 【路由原pushState replaceState 部分浏览器监听不到】
 */
export function historyPageTrackerReport() {
    // 1. 替换pushState replaceState
    window.history.pushState = createHistoryEvent('pushState')
    window.history.replaceState = createHistoryEvent('replaceState')

    // 2. 监听事件 页面跳转、页面替换、页面前进后退、页面加载、页面卸载
    const eventList = ['pushState', 'replaceState', 'popstate', 'load', 'unload']

    pageTrackerReport(eventList)
}

function pageTrackerReport(eventList: string[]) {
    // 记录初始记录
    let beforePage = '' // 上一个页面
    let beforeTime = Date.now() // 进入页面时间

    // 计算页面停留时间
    function getStayTime() {
        const currentTime = Date.now()
        const stayTime = currentTime - beforeTime
        beforeTime = currentTime
        return stayTime
    }

    function listener() {
        const stayTime = getStayTime() // 停留时间
        const currentPage = window.location.href // 当前页面路径
        
        // 上报数据
        console.log({page: beforePage, stayTime})
        // lazyReport('visit', {page: beforePage, stayTime})
        beforePage = currentPage
    }

    captureEvents(eventList, listener)
}

/**
 * 连续绑定事件
 */
export function captureEvents(eventList: string[], handler: () => void) {
  eventList.forEach(event => {
    window.addEventListener(event, () => {
      handler && handler()
    })
  })
}

/**
 * hash路由监听
 */
export function hashPageTrackerReport() {
    // 【vue、react的routerHash模式还是触发pushState】
    window.history.pushState = createHistoryEvent('pushState')

    // 1. 监听事件 pushState、hash变化、页面加载、页面卸载、前进后退
    const eventList = ['pushState', 'hashchange', 'load', 'popstate', 'unload' ]
    pageTrackerReport(eventList)
}

// * 加载配置
  private installInnerTrack() {
    // 1. 开启history模式
    if (this.data.hashTracker) {
      hashPageTrackerReport()
    }
    // 2. 开启hash模式
    if (this.data.historyTracker) {
      historyPageTrackerReport()
    }
    // 3. 开启无痕埋点
    if (this.data.domTracker) {
      autoTrackerReport()
    }
    // 4. 开启错误监控
    if (this.data.jsError) {
      errorTrackerReport()
    }
  }

//  初始化配置
function init(options: Options) {
    // 需要的配置: appid系统ID userId用户ID deary合并延迟时间
    new Tracker(options)

    // ------UV统计------  页面初始化时就发送UV
    console.log({message: '加载应用'})
    // lazyReport('user', {message: '加载应用'})
}

/**
 * 上报API
 */
export function report(data: string[]) {
  const url = window._monitor_request_url
  // 上报方式:  1. ajax请求【跨域、增加请求量】  2. navigator请求【即使页面关闭了也会发送】 3. img【不会跨域、请求量少】
  // ---- navigator ---
  if (navigator.sendBeacon) {
    // 支持navigator的浏览器 【只能发送字符串格式】
    navigator.sendBeacon(url, JSON.stringify(data))
  } else {
    // 不支持navigator的浏览器
    const oImage = new Image()
    oImage.src = `${url}?logs=${data}`
  }
  // 后期加了合并
  // clearCache()
}

// * 加载配置
  private installInnerTrack() {
    const { requestUrl, userId, appId, delay } = this.data
    // -----系统ID-----
    if (appId) {
      window['_monitor_app_id_'] = appId
    }
    // --- userId --
    if (userId) {
      window['_monitor_user_id_'] = userId
    }
    // --- 合并上报的间隔 --
    if (delay) {
      window['_monitor_delay_'] = delay
    }
    // -----服务端地址------
    if (requestUrl) {
      window['_monitor_request_url'] = requestUrl
    }
    // 1. 开启history模式
    if (this.data.hashTracker) {
      hashPageTrackerReport()
    }
    // 2. 开启hash模式
    if (this.data.historyTracker) {
      historyPageTrackerReport()
    }
    // 3. 开启无痕埋点
    if (this.data.domTracker) {
      autoTrackerReport()
    }
    // 4. 开启错误监控
    if (this.data.jsError) {
      errorTrackerReport()
    }
  }

// cache.ts
// 合并上报 cache法
const cache: string[] = []

export function getCache() {
  return cache
}

export function addCache(data: string) {
  cache.push(data)
}

export function clearCache() {
  cache.length = 0
}


/**
 * 合并上报【懒加载上报请求-处理多个上报并合并】
 * @param {string} type
 * @param {object} params
 */
let timer: NodeJS.Timeout

export function lazyReport(type: RqType, params: object) {
  const appId = window['_monitor_app_id_']
  const userId = window['_monitor_user_id_']
  const delay = window['_monitor_delay_']
  const logParams: ReportType = {
    appId,
    userId,
    type,
    data: params, // 上报的数据
    currentTime: new Date().getTime(), // 时间戳
    currentPage: window.location.href, // 当前页面
    ua: navigator.userAgent, // ua信息
  }
  const logParamsString = JSON.stringify(logParams)
  // -- 添加到缓存组中
  addCache(logParamsString)
  const data = getCache()
  if (delay === 0) {
    // 不做延迟上报【不合并】
    report(data)
  }

  if (data.length > 10) {
    // 超过10个就不合并了
    report(data)
    clearTimeout(timer)
    return
  }

  clearTimeout(timer)
  // 延迟上报
  timer = setTimeout(() => {
    report(data)
  }, delay)
}

// * report上报数据格式
export type RqType = 'error' | 'action' | 'visit' | 'user'

export interface ReportType {
  appId: string // 项目AppID
  userId: string // 用户uuID
  type: RqType // 上报类型
  data: object, // 上报数据
  currentTime: number // 时间戳
  currentPage: string // 当前页面
  ua: string // ua信息
}

//  初始化配置
function init(options: Options) {
    // 需要的配置: appid系统ID userId用户ID deary合并延迟时间
    new Tracker(options)

    // ------UV统计------  页面初始化时就发送UV
    lazyReport('user', {message: '加载应用'})

    // ----- 防止卸载时还有剩余的埋点数据没发送 ----
    window.addEventListener('unload', () => {
        const data = getCache()
        if (data.length > 0) report(data)
    })
}