web-tracing-core 2.1.0

package/src/lib/replace.ts

@@ -0,0 +1,371 @@
+import type { VoidFun } from '../types'
+import { _global } from '../utils/global'
+import {
+  on,
+  replaceAop,
+  throttle,
+  isValidKey,
+  getTimestamp,
+  off
+} from '../utils'
+import { EVENTTYPES } from '../common'
+import { eventBus } from './eventBus'
+
+// 存储原始方法，用于恢复
+const originalMethods = {
+  consoleError: null as any,
+  xhrOpen: null as any,
+  xhrSend: null as any,
+  fetch: null as any,
+  historyPushState: null as any,
+  historyReplaceState: null as any
+}
+
+// 存储事件监听器引用，用于移除
+const eventListeners = {
+  error: null as any,
+  unhandledrejection: null as any,
+  click: null as any,
+  load: null as any,
+  beforeunload: null as any,
+  hashchange: null as any,
+  popstate: null as any,
+  offline: null as any,
+  online: null as any
+}
+
+/**
+ * 根据入参初始化 重写、监听
+ *
+ * 定义一个产出模块
+ * 其注册所有模块所需要的 - 监听，改写
+ * 当那些模块要用的时候，去产出模块那数据，这个模块的数据不应该有业务数据
+ * 只负责去采集数据，具体怎么拿是业务模块需要去分辨的，采集哪些数据是注册的时候决定的
+ * 只会管兼容性问题，不兼容的api就不做动作
+ * 这样就不需要所有的模块都要init了，之后需要init的模块，可以专门去做模块内的事
+ * 注意这里面耦合性不能太高，不要抽了还不如不抽，做到模块内改了代码不需要去另外个文件再改
+ */
+export function initReplace(): void {
+  for (const key in EVENTTYPES) {
+    if (isValidKey(key, EVENTTYPES)) {
+      replace(key)
+    }
+  }
+}
+
+function replace(type: EVENTTYPES): void {
+  if (!isValidKey(type, EVENTTYPES)) return
+
+  const value = EVENTTYPES[type]
+  // debug('replace-初始化挂载事件:', value)
+  switch (value) {
+    case EVENTTYPES.ERROR:
+      listenError(EVENTTYPES.ERROR)
+      break
+    case EVENTTYPES.UNHANDLEDREJECTION:
+      listenUnhandledrejection(EVENTTYPES.UNHANDLEDREJECTION)
+      break
+    case EVENTTYPES.CONSOLEERROR:
+      replaceConsoleError(EVENTTYPES.CONSOLEERROR)
+      break
+    case EVENTTYPES.CLICK:
+      listenClick(EVENTTYPES.CLICK)
+      break
+    case EVENTTYPES.LOAD:
+      listenLoad(EVENTTYPES.LOAD)
+      break
+    case EVENTTYPES.BEFOREUNLOAD:
+      listenBeforeunload(EVENTTYPES.BEFOREUNLOAD)
+      break
+    case EVENTTYPES.XHROPEN:
+      replaceXHROpen(EVENTTYPES.XHROPEN)
+      break
+    case EVENTTYPES.XHRSEND:
+      replaceXHRSend(EVENTTYPES.XHRSEND)
+      break
+    case EVENTTYPES.FETCH:
+      replaceFetch(EVENTTYPES.FETCH)
+      break
+    case EVENTTYPES.HASHCHANGE:
+      listenHashchange(EVENTTYPES.HASHCHANGE)
+      break
+    case EVENTTYPES.HISTORYPUSHSTATE:
+      replaceHistoryPushState(EVENTTYPES.HISTORYPUSHSTATE)
+      break
+    case EVENTTYPES.HISTORYREPLACESTATE:
+      replaceHistoryReplaceState(EVENTTYPES.HISTORYREPLACESTATE)
+      break
+    case EVENTTYPES.POPSTATE:
+      listenPopState(EVENTTYPES.POPSTATE)
+      break
+    case EVENTTYPES.OFFLINE:
+      listenOffline(EVENTTYPES.OFFLINE)
+      break
+    case EVENTTYPES.ONLINE:
+      listenOnline(EVENTTYPES.ONLINE)
+      break
+
+    default:
+      break
+  }
+}
+
+/**
+ * 监听 - error
+ */
+function listenError(type: EVENTTYPES): void {
+  const errorHandler = function (e: ErrorEvent) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.error = errorHandler
+  on(_global, 'error', errorHandler, true)
+}
+/**
+ * 监听 - unhandledrejection（promise异常）
+ */
+function listenUnhandledrejection(type: EVENTTYPES): void {
+  const rejectionHandler = function (ev: PromiseRejectionEvent) {
+    eventBus.runEvent(type, ev)
+  }
+  eventListeners.unhandledrejection = rejectionHandler
+  on(_global, 'unhandledrejection', rejectionHandler)
+}
+/**
+ * 重写 - console.error
+ */
+function replaceConsoleError(type: EVENTTYPES): void {
+  originalMethods.consoleError = console.error
+  replaceAop(console, 'error', (originalError: VoidFun) => {
+    return function (this: any, ...args: any[]): void {
+      if (
+        !(args[0] && args[0].slice && args[0].slice(0, 12) === '@web-tracing')
+      ) {
+        eventBus.runEvent(type, args)
+      }
+      originalError.apply(this, args)
+    }
+  })
+}
+/**
+ * 监听 - click
+ */
+function listenClick(type: EVENTTYPES): void {
+  if (!('document' in _global)) return
+  const clickThrottle = throttle(eventBus.runEvent, 100, true)
+  const clickHandler = function (this: any, e: MouseEvent) {
+    clickThrottle.call(eventBus, type, e)
+  }
+  eventListeners.click = clickHandler
+  on(_global.document, 'click', clickHandler, true)
+}
+/**
+ * 监听 - load
+ */
+function listenLoad(type: EVENTTYPES): void {
+  const loadHandler = function (e: Event) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.load = loadHandler
+  on(_global, 'load', loadHandler, true)
+}
+/**
+ * 监听 - beforeunload
+ */
+function listenBeforeunload(type: EVENTTYPES): void {
+  const beforeunloadHandler = function (e: BeforeUnloadEvent) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.beforeunload = beforeunloadHandler
+  on(_global, 'beforeunload', beforeunloadHandler, false)
+}
+/**
+ * 重写 - XHR-open
+ */
+function replaceXHROpen(type: EVENTTYPES): void {
+  if (!('XMLHttpRequest' in _global)) return
+  originalMethods.xhrOpen = XMLHttpRequest.prototype.open
+  replaceAop(XMLHttpRequest.prototype, 'open', (originalOpen: VoidFun) => {
+    return function (this: any, ...args: any[]): void {
+      eventBus.runEvent(type, ...args)
+      originalOpen.apply(this, args)
+    }
+  })
+}
+/**
+ * 重写 - XHR-send
+ */
+function replaceXHRSend(type: EVENTTYPES): void {
+  if (!('XMLHttpRequest' in _global)) return
+  originalMethods.xhrSend = XMLHttpRequest.prototype.send
+  replaceAop(XMLHttpRequest.prototype, 'send', (originalSend: VoidFun) => {
+    return function (this: any, ...args: any[]): void {
+      eventBus.runEvent(type, this, ...args)
+      originalSend.apply(this, args)
+    }
+  })
+}
+/**
+ * 重写 - fetch
+ */
+function replaceFetch(type: EVENTTYPES): void {
+  if (!('fetch' in _global)) return
+  originalMethods.fetch = _global.fetch
+  replaceAop(_global, 'fetch', originalFetch => {
+    return function (this: any, ...args: any[]): void {
+      const fetchStart = getTimestamp()
+      const traceObj = {}
+      return originalFetch.apply(_global, args).then((res: any) => {
+        eventBus.runEvent(type, args[0], args[1], res, fetchStart, traceObj)
+        return res
+      })
+    }
+  })
+}
+/**
+ * 监听 - hashchange
+ */
+function listenHashchange(type: EVENTTYPES): void {
+  const hashchangeHandler = function (e: HashChangeEvent) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.hashchange = hashchangeHandler
+  on(_global, 'hashchange', hashchangeHandler)
+}
+/**
+ * 重写 - history-replaceState
+ */
+function replaceHistoryReplaceState(type: EVENTTYPES): void {
+  originalMethods.historyReplaceState = history.replaceState
+  replaceAop(history, 'replaceState', (originalReplaceState: VoidFun) => {
+    return function (this: any, ...args: any[]): void {
+      eventBus.runEvent(type, ...args)
+      originalReplaceState.apply(this, args)
+    }
+  })
+}
+/**
+ * 重写 - history-pushState
+ */
+function replaceHistoryPushState(type: EVENTTYPES): void {
+  originalMethods.historyPushState = history.pushState
+  replaceAop(history, 'pushState', (originalPushState: VoidFun) => {
+    return function (this: any, ...args: any[]): void {
+      eventBus.runEvent(type, ...args)
+      originalPushState.apply(this, args)
+    }
+  })
+}
+/**
+ * 监听 - popstate
+ */
+function listenPopState(type: EVENTTYPES): void {
+  const popstateHandler = function (e: PopStateEvent) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.popstate = popstateHandler
+  on(_global, 'popstate', popstateHandler)
+}
+
+/**
+ * 监听 - offline 网络是否关闭
+ */
+function listenOffline(type: EVENTTYPES): void {
+  const offlineHandler = function (e: Event) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.offline = offlineHandler
+  on(_global, 'offline', offlineHandler)
+}
+/**
+ * 监听 - online 网络是否开启
+ */
+function listenOnline(type: EVENTTYPES): void {
+  const offlineHandler = function (e: Event) {
+    eventBus.runEvent(type, e)
+  }
+  eventListeners.offline = offlineHandler
+  on(_global, 'offline', offlineHandler)
+}
+
+/**
+ * 销毁所有重写和监听
+ */
+export function destroyReplace(): void {
+  // 恢复 console.error
+  if (
+    originalMethods.consoleError &&
+    console.error !== originalMethods.consoleError
+  ) {
+    console.error = originalMethods.consoleError
+  }
+
+  // 恢复 XMLHttpRequest
+  if (
+    originalMethods.xhrOpen &&
+    XMLHttpRequest.prototype.open !== originalMethods.xhrOpen
+  ) {
+    XMLHttpRequest.prototype.open = originalMethods.xhrOpen
+  }
+  if (
+    originalMethods.xhrSend &&
+    XMLHttpRequest.prototype.send !== originalMethods.xhrSend
+  ) {
+    XMLHttpRequest.prototype.send = originalMethods.xhrSend
+  }
+
+  // 恢复 fetch
+  if (originalMethods.fetch && _global.fetch !== originalMethods.fetch) {
+    _global.fetch = originalMethods.fetch
+  }
+
+  // 恢复 history
+  if (
+    originalMethods.historyPushState &&
+    history.pushState !== originalMethods.historyPushState
+  ) {
+    history.pushState = originalMethods.historyPushState
+  }
+  if (
+    originalMethods.historyReplaceState &&
+    history.replaceState !== originalMethods.historyReplaceState
+  ) {
+    history.replaceState = originalMethods.historyReplaceState
+  }
+
+  // 移除全局事件监听器
+  if (eventListeners.error) {
+    off(_global, 'error', eventListeners.error, true)
+  }
+  if (eventListeners.unhandledrejection) {
+    off(_global, 'unhandledrejection', eventListeners.unhandledrejection)
+  }
+  if (eventListeners.click) {
+    off(_global.document, 'click', eventListeners.click, true)
+  }
+  if (eventListeners.load) {
+    off(_global, 'load', eventListeners.load, true)
+  }
+  if (eventListeners.beforeunload) {
+    off(_global, 'beforeunload', eventListeners.beforeunload, false)
+  }
+  if (eventListeners.hashchange) {
+    off(_global, 'hashchange', eventListeners.hashchange)
+  }
+  if (eventListeners.popstate) {
+    off(_global, 'popstate', eventListeners.popstate)
+  }
+  if (eventListeners.offline) {
+    off(_global, 'offline', eventListeners.offline)
+  }
+  if (eventListeners.online) {
+    off(_global, 'online', eventListeners.online)
+  }
+
+  // 清空存储
+  Object.keys(originalMethods).forEach(key => {
+    ;(originalMethods as any)[key] = null
+  })
+  Object.keys(eventListeners).forEach(key => {
+    ;(eventListeners as any)[key] = null
+  })
+}

package/src/lib/sendData.ts

@@ -0,0 +1,264 @@
+import { _support, _global } from '../utils/global'
+import { refreshSession } from '../utils/session'
+import { LocalStorageUtil } from '../utils/localStorage'
+import {
+  sendByBeacon,
+  sendByImage,
+  sendByXML,
+  nextTime,
+  map,
+  typeofAny,
+  randomBoolean,
+  getTimestamp,
+  isObjectOverSizeLimit
+} from '../utils'
+import { debug, logError } from '../utils/debug'
+import { baseInfo } from './base'
+import { options } from './options'
+import { AnyObj } from '../types'
+import { isFlase, isArray } from '../utils/is'
+import { SDK_LOCAL_KEY } from '../common/config'
+import { executeFunctions } from '../utils'
+import { computed } from '../observer'
+
+export class SendData {
+  private events: AnyObj[] = [] // 批次队列
+  private timeoutID: NodeJS.Timeout | undefined // 延迟发送ID
+  private isServerAvailable = true // 接口是否可用
+  private retryTimer: NodeJS.Timeout | undefined // 重试定时器
+
+  /**
+   * 发送事件列表
+   */
+  private send() {
+    if (!this.events.length) return
+    if (!this.isServerAvailable) return // 接口异常时暂停上报
+
+    // 选取首部的部分数据来发送,performance会一次性采集大量数据追加到events中
+    const sendEvents = this.events.slice(0, options.value.cacheMaxLength) // 需要发送的事件
+    this.events = this.events.slice(options.value.cacheMaxLength) // 剩下待发的事件
+
+    const time = getTimestamp()
+    const sendParams = computed(() => ({
+      baseInfo: {
+        ...baseInfo.base?.value,
+        sendTime: time,
+        userUuid: options.value.userUuid
+      },
+      eventInfo: map(sendEvents, (e: any) => {
+        e.sendTime = time
+        return e
+      })
+    }))
+
+    // 本地化拦截
+    if (options.value.localization) {
+      const success = LocalStorageUtil.setSendDataItem(
+        SDK_LOCAL_KEY,
+        sendParams.value
+      )
+      if (!success) options.value.localizationOverFlow(sendParams.value)
+      return
+    }
+
+    const afterSendParams = executeFunctions(
+      options.value.beforeSendData,
+      false,
+      sendParams.value
+    )
+    if (isFlase(afterSendParams)) return
+    if (!this.validateObject(afterSendParams, 'beforeSendData')) return
+
+    debug('send events', sendParams.value)
+
+    this.executeSend(options.value.dsn, afterSendParams).then((res: any) => {
+      if (res.success === false) {
+        this.handleServerError()
+      } else {
+        this.isServerAvailable = true
+        executeFunctions(options.value.afterSendData, true, {
+          ...res,
+          params: afterSendParams
+        })
+      }
+    })
+
+    // 如果一次性发生的事件超过了阈值(cacheMaxLength)，那么这些经过裁剪的事件列表剩下的会直接发，并不会延迟等到下一个队列
+    if (this.events.length) {
+      nextTime(this.send.bind(this)) // 继续传输剩余内容,在下一个时间择机传输
+    }
+  }
+
+  private handleServerError() {
+    this.isServerAvailable = false
+    // 定时重试，直到接口恢复
+    if (this.retryTimer) clearTimeout(this.retryTimer)
+    if (options.value.checkRecoverInterval === -1) return
+    const interval = (options.value.checkRecoverInterval ?? 1) * 60 * 1000
+    this.retryTimer = setTimeout(() => {
+      this.testServerAvailable()
+    }, interval)
+  }
+
+  private testServerAvailable() {
+    // 尝试发送一个空包检测接口是否恢复
+    sendByXML(options.value.dsn, { ping: 1 }, options.value.timeout)
+      .then(() => {
+        this.isServerAvailable = true
+        if (this.retryTimer) clearTimeout(this.retryTimer)
+        // 恢复上报
+        if (this.events.length) this.send()
+      })
+      .catch(() => {
+        this.handleServerError()
+      })
+  }
+
+  /**
+   * 发送本地事件列表
+   * @param e 需要发送的事件信息
+   */
+  public sendLocal(e: AnyObj) {
+    const afterSendParams = executeFunctions(
+      options.value.beforeSendData,
+      false,
+      e
+    )
+    if (isFlase(afterSendParams)) return
+    if (!this.validateObject(afterSendParams, 'beforeSendData')) return
+
+    debug('send events', afterSendParams)
+
+    this.executeSend(options.value.dsn, afterSendParams)
+  }
+  /**
+   * 记录需要发送的埋点数据
+   * @param e 需要发送的事件信息
+   * @param flush 是否立即发送
+   */
+  public emit(e: AnyObj, flush = false) {
+    if (!e) return
+    if (!_support.lineStatus.onLine) return
+    if (!flush && !randomBoolean(options.value.tracesSampleRate)) return
+    if (!isArray(e)) e = [e]
+
+    // 如果接口异常，且队列已达最大缓存数，则丢弃旧日志，保留最新日志
+    const maxQueueLength = options.value.maxQueueLength ?? 200
+    if (!this.isServerAvailable && this.events.length >= maxQueueLength) {
+      // 丢弃最旧的日志，保留最新日志
+      this.events = this.events
+        .slice(this.events.length - maxQueueLength + e.length)
+        .concat(e)
+      return
+    }
+
+    const eventList = executeFunctions(
+      options.value.beforePushEventList,
+      false,
+      e
+    )
+
+    if (isFlase(eventList)) return
+    if (!this.validateObject(eventList, 'beforePushEventList')) return
+
+    this.events = this.events.concat(eventList)
+    refreshSession()
+    // debug('receive event, waiting to send', e)
+    if (this.timeoutID) clearTimeout(this.timeoutID)
+
+    // 如果基础信息还未初始化完成，则等待完成后上报
+    if (!baseInfo._initSuccess) {
+      return
+    }
+
+    // 满足最大记录数,立即发送,否则定时发送
+    if (this.events.length >= options.value.cacheMaxLength || flush) {
+      this.send()
+    } else {
+      this.timeoutID = setTimeout(
+        this.send.bind(this),
+        options.value.cacheWatingTime
+      )
+    }
+  }
+  /**
+   * 发送数据
+   * @param url 目标地址
+   * @param data 附带参数
+   */
+  private executeSend(url: string, data: any) {
+    let sendType = 1
+    if (options.value.sendTypeByXmlBody) {
+      // 强制指定 xml body 形式
+      sendType = 3
+    } else if (_global.navigator) {
+      // sendBeacon 最大64kb
+      sendType = isObjectOverSizeLimit(data, 60) ? 3 : 1
+    } else {
+      // img 限制在 2kb
+      sendType = isObjectOverSizeLimit(data, 2) ? 3 : 2
+    }
+
+    return new Promise(resolve => {
+      switch (sendType) {
+        case 1:
+          resolve({ sendType: 'sendBeacon', success: sendByBeacon(url, data) })
+          break
+        case 2:
+          sendByImage(url, data)
+            .then(() => {
+              resolve({ sendType: 'image', success: true })
+            })
+            .catch(() => {
+              resolve({ sendType: 'image', success: false })
+            })
+          break
+        case 3:
+          sendByXML(url, data, options.value.timeout)
+            .then(() => {
+              resolve({ sendType: 'xml', success: true })
+            })
+            .catch(() => {
+              resolve({ sendType: 'xml', success: false })
+            })
+          break
+      }
+    })
+  }
+  /**
+   * 验证选项的类型 - 只验证是否为 {} []
+   * 返回 false意思是取消放入队列 / 取消发送
+   */
+  private validateObject(target: any, targetName: string): boolean | void {
+    if (target === false) return false
+
+    if (!target) {
+      logError(`NullError: ${targetName}期望返回 {} 或者 [] 类型，目前无返回值`)
+      return false
+    }
+    if (['object', 'array'].includes(typeofAny(target))) return true
+    logError(
+      `TypeError: ${targetName}期望返回 {} 或者 [] 类型，目前是${typeofAny(
+        target
+      )}类型`
+    )
+    return false
+  }
+
+  /**
+   * 销毁定时器和队列
+   */
+  public destroy() {
+    if (this.timeoutID) clearTimeout(this.timeoutID)
+    if (this.retryTimer) clearTimeout(this.retryTimer)
+    this.events = []
+    this.isServerAvailable = true
+  }
+}
+
+export let sendData: SendData
+
+export function initSendData() {
+  _support.sendData = new SendData()
+  sendData = _support.sendData
+}

package/src/observer/computed.ts

@@ -0,0 +1,52 @@
+import { Watcher } from './watcher'
+import { ObserverValue, AnyFun } from './types'
+import { OBSERVERSIGNBOARD } from './config'
+
+/**
+ * 计算属性响应式
+ */
+export class Computed<T> {
+  target: ObserverValue<T>
+  constructor(target: ObserverValue<T>) {
+    this.target = target
+  }
+  defineReactive() {
+    const computedWatcher = new Watcher(this, { computed: true })
+
+    // const proxyCache = new WeakMap<ObserverValue<any>, any>()
+    const handlers: ProxyHandler<ObserverValue<any>> = {
+      get() {
+        if (computedWatcher.proxy.dirty) {
+          // 代表这个属性已经脏了,需要更新(重新运算)
+          // console.log('计算属性：取新值')
+          computedWatcher.depend() // 添加上下文与此属性绑定
+          return computedWatcher.get()
+        } else {
+          // 代表这个属性不需要重新运算
+          // console.log('计算属性：取旧值')
+
+          // 取旧值的时候也要添加上下文绑定
+          // 因为其他值在依赖这个计算属性的时候,有可能会依赖到旧的值
+          // 所以在依赖到旧值时也要添加上下文绑定,从而当这个计算属性被改变时也能通知到对方改变
+          // 一开始我就是没进行这一步,从而导致莫名bug
+          computedWatcher.depend()
+          return computedWatcher.proxy.value
+        }
+      }
+    }
+    return new Proxy<ObserverValue<T>>(this.target, handlers)
+  }
+}
+
+export const computedMap = new WeakMap<Computed<any>, AnyFun>()
+
+export function computed<T>(fun: AnyFun) {
+  const target: any = { value: 0 }
+  target[OBSERVERSIGNBOARD] = true
+
+  const ob = new Computed<T>(target)
+  const proxy = ob.defineReactive()
+
+  computedMap.set(ob, fun)
+  return proxy
+}

package/src/observer/config.ts

@@ -0,0 +1 @@
+export const OBSERVERSIGNBOARD = '__webtracingobserver__'

package/src/observer/dep.ts

@@ -0,0 +1,21 @@
+import { Watcher } from './watcher'
+
+export class Dep {
+  // set结构可以自动去重,因为不可避免有些依赖会被重复添加
+  // 例如有两个计算属性是依赖于dataA,第一遍计算出那两个计算属性时,dataA的dep是收集了他俩的watcher
+  // 但是当其中一个计算属性重新计算时(比如另外一个依赖项改动了会影响此计算属性重新计算),会再次调取dataA
+  // 的get拦截,也就是会再次触发 dep.addSub(),如果不加重复过滤这样的场景会一直递增下去,然后当dataA发生
+  // 更改时遍历其subs,届时有太多不需要遍历的watcher,很大概率卡死
+  subs = new Set<Watcher>()
+  static target: Watcher | undefined // 全局唯一收集容器
+  addSub() {
+    if (Dep.target) this.subs.add(Dep.target)
+  }
+  notify(...params: any[]) {
+    // 在某个属性发生变化时会执行其 dep.notify(),用来通知依赖这个属性的所有 watcher
+    this.subs.forEach(function (watcher: any) {
+      watcher.proxy.dirty = true // 标明数据脏了,当再次使用到这个值会重新计算
+      watcher.update(...params)
+    })
+  }
+}