web-tracing-core 2.1.1 → 2.1.2

package/src/common/constant.ts

@@ -0,0 +1,57 @@
+/**
+ * 事件类型
+ */
+export enum EVENTTYPES {
+  ERROR = 'error',
+  CONSOLEERROR = 'consoleError',
+  UNHANDLEDREJECTION = 'unhandledrejection',
+  CLICK = 'click',
+  LOAD = 'load',
+  BEFOREUNLOAD = 'beforeunload',
+  FETCH = 'fetch',
+  XHROPEN = 'xhr-open',
+  XHRSEND = 'xhr-send',
+  HASHCHANGE = 'hashchange',
+  HISTORYPUSHSTATE = 'history-pushState',
+  HISTORYREPLACESTATE = 'history-replaceState',
+  POPSTATE = 'popstate',
+  READYSTATECHANGE = 'readystatechange',
+  ONLINE = 'online',
+  OFFLINE = 'offline'
+}
+
+/**
+ * 触发的事件是什么类型 - eventType
+ */
+export enum SEDNEVENTTYPES {
+  PV = 'pv', // 路由跳转
+  PVDURATION = 'pv-duration', // 页面停留事件
+  ERROR = 'error', // 错误
+  PERFORMANCE = 'performance', // 资源
+  CLICK = 'click', // 点击
+  DWELL = 'dwell', // 页面卸载
+  CUSTOM = 'custom', // 手动触发事件
+  INTERSECTION = 'intersection' // 曝光采集
+}
+
+/**
+ * 触发的事件id - eventID
+ */
+export enum SENDID {
+  PAGE = 'page', // 页面
+  RESOURCE = 'resource', // 资源
+  SERVER = 'server', // 请求
+  CODE = 'code', // code
+  REJECT = 'reject', // reject
+  CONSOLEERROR = 'console.error' // console.error
+}
+
+/**
+ * 网页的几种加载方式
+ */
+export const WEBPAGELOAD: Record<number, string> = {
+  0: 'navigate', // 网页通过点击链接,地址栏输入,表单提交,脚本操作等方式加载
+  1: 'reload', // 网页通过“重新加载”按钮或者location.reload()方法加载
+  2: 'back_forward', // 网页通过“前进”或“后退”按钮加载
+  255: 'reserved' // 任何其他来源的加载
+}

package/src/common/index.ts

@@ -0,0 +1,2 @@
+export * from './config'
+export * from './constant'

package/src/lib/base.ts

@@ -0,0 +1,129 @@
+import { DEVICE_KEY, SDK_VERSION } from '../common'
+import { _support, getGlobal, isTestEnv } from '../utils/global'
+import { load } from '../utils/fingerprintjs'
+import { getCookieByName, uuid } from '../utils'
+import { getSessionId } from '../utils/session'
+import { options } from './options'
+import { getIPs } from '../utils/getIps'
+import { AnyObj } from '../types'
+import { computed } from '../observer'
+import type { ObserverValue } from '../observer/types'
+import { sendData } from './sendData'
+
+interface Device {
+  clientHeight: number
+  clientWidth: number
+  colorDepth: number
+  pixelDepth: number
+  screenWidth: number
+  screenHeight: number
+  deviceId: string
+  vendor: string
+  platform: string
+}
+interface Base extends Device {
+  userUuid: string
+  sdkUserUuid: string
+  ext: AnyObj
+  appName: string
+  appCode: string
+  pageId: string
+  sessionId: string
+  sdkVersion: string
+  ip: string
+}
+
+export class BaseInfo {
+  public base: ObserverValue<Base> | undefined
+  public pageId: string
+  private sdkUserUuid = ''
+  private device: Device | undefined
+  // 基础信息是否初始化成功
+  public _initSuccess = false
+
+  constructor() {
+    this.pageId = uuid() // 当前应用ID，在整个页面生命周期内不变，单页应用路由变化也不会改变；加载SDK时创建且只创建一次
+
+    this.initSdkUserUuid()
+      .then(() => {
+        this.initDevice()
+        this.initBase()
+      })
+      .finally(() => {
+        this._initSuccess = true
+        sendData.emit([])
+      })
+  }
+  private initDevice() {
+    const { screen } = getGlobal()
+    const { clientWidth, clientHeight } = document.documentElement
+    const { width, height, colorDepth, pixelDepth } = screen
+    let deviceId = getCookieByName(DEVICE_KEY)
+    if (!deviceId) {
+      deviceId = `t_${uuid()}`
+      document.cookie = `${DEVICE_KEY}=${deviceId};path=/;`
+    }
+    this.device = {
+      clientHeight, // 网页可见区高度
+      clientWidth, // 网页可见区宽度
+      colorDepth, // 显示屏幕调色板的比特深度
+      pixelDepth, // 显示屏幕的颜色分辨率
+      deviceId, // id
+      screenWidth: width, // 显示屏幕的宽度
+      screenHeight: height, // 显示屏幕的高度
+      vendor: navigator.vendor, // 浏览器名称
+      platform: navigator.platform // 浏览器平台的环境,不是电脑系统的x64这样的(浏览器平台的环境可能是x32)
+    }
+  }
+  /**
+   * 初始化 base 数据
+   */
+  private initBase() {
+    // 与一般业务上理解的sessionId做区分,此session与业务无关,单纯就是浏览器端和后端直接的联系
+    const sessionId = getSessionId()
+    let ip = ''
+
+    this.base = computed<Base>(() => ({
+      ...this.device!,
+      userUuid: options.value.userUuid,
+      sdkUserUuid: this.sdkUserUuid,
+      ext: options.value.ext,
+      appName: options.value.appName,
+      appCode: options.value.appCode,
+      pageId: this.pageId,
+      sessionId,
+      sdkVersion: SDK_VERSION,
+      ip
+    }))
+
+    !isTestEnv &&
+      getIPs().then((res: any) => {
+        this.base!.value.ip = res[0]
+        ip = res[0]
+      })
+  }
+  /**
+   * 初始化sdk中给用户的唯一标识
+   */
+  private initSdkUserUuid() {
+    return isTestEnv
+      ? Promise.resolve().then(() => {
+          this.sdkUserUuid = 'unit-test-id'
+          options.value.sdkUserUuid = 'unit-test-id'
+        })
+      : load({})
+          .then((fp: any) => fp.get())
+          .then((result: any) => {
+            const visitorId = result.visitorId
+            this.sdkUserUuid = visitorId
+            options.value.sdkUserUuid = visitorId
+          })
+  }
+}
+
+export let baseInfo: BaseInfo
+
+export function initBase() {
+  baseInfo = new BaseInfo()
+  _support.baseInfo = baseInfo
+}

package/src/lib/err-batch.ts

@@ -0,0 +1,134 @@
+import { sendData } from './sendData'
+import { AnyFun } from '../types'
+import { debounce, throttle, groupArray } from '../utils'
+
+const SETTIMEA = 2000
+const SETTIMEB = 20000
+const MAXLENGTHA = 5
+const GROUPARRAYKEY = ['errMessage', 'eventId', 'requestUrl']
+
+/**
+ * 判断是否为批量错误
+ * 判断流程:
+ * 1. 先把所有错误都放入 a栈
+ * 2. 每次发生错误后防抖 2s查 a栈是否有批量错误(批量错误: errMessage、errType相同且发生个数大于等于5)
+ *     1. 如果为批量错误则合并这些错误并加入[时间区间参数、发生个数参数]后放入 b栈
+ *     2. 不为批量错误则发送这些错误
+ * 3. 每次推入错误到b栈后延迟 20s查 b栈并发送这些错误
+ * 4. 在这个过程中，如果用户关闭了网页，会统一把 a栈、b栈内的数据发送
+ * 5. 在这个过程中，a栈每满50个错误也会强制触发a栈和b栈的错误处理（处理结果为直接发送批量错误）
+ */
+class BatchError {
+  cacheErrorA: any[]
+  cacheErrorB: any[]
+  throttleProxyAddCacheErrorA: AnyFun
+  throttleProxyAddCacheErrorB: AnyFun
+  constructor() {
+    this.cacheErrorA = []
+    this.cacheErrorB = []
+    this.throttleProxyAddCacheErrorA = debounce(
+      this.proxyAddCacheErrorA,
+      SETTIMEA
+    )
+    this.throttleProxyAddCacheErrorB = throttle(
+      this.proxyAddCacheErrorB,
+      SETTIMEB
+    )
+  }
+  proxyAddCacheErrorA() {
+    let len = this.cacheErrorA.length
+    if (!len) return
+    const arr = groupArray(this.cacheErrorA, ...GROUPARRAYKEY)
+    const arrA = arr.filter(item => item.length < MAXLENGTHA)
+    const arrB = arr.filter(item => item.length >= MAXLENGTHA)
+
+    if (arrA.length) {
+      sendData.emit(arrA.flat(Infinity))
+    }
+    if (arrB.length) {
+      const arrBsum: any[] = []
+      arrB.forEach(item => {
+        const sumItem = item[0]
+        sumItem.batchError = true
+        sumItem.batchErrorLength = item.length
+        sumItem.batchErrorLastHappenTime = item[item.length - 1].triggerTime
+        arrBsum.push(sumItem)
+      })
+      this.cacheErrorB.push(...arrBsum)
+      this.throttleProxyAddCacheErrorB()
+    }
+
+    while (len--) {
+      this.cacheErrorA.shift()
+    }
+  }
+  proxyAddCacheErrorB() {
+    let len = this.cacheErrorB.length
+    if (!len) return
+    const arr = groupArray(this.cacheErrorB, ...GROUPARRAYKEY)
+
+    while (len--) {
+      this.cacheErrorB.shift()
+    }
+
+    // 将区间报错合并
+    const emitList: any[] = []
+    arr.forEach((itemList: any[]) => {
+      const sumItem = itemList[0]
+      if (itemList.length > 1) {
+        sumItem.batchErrorLength = itemList.reduce(
+          (p, item) => (p += item.batchErrorLength),
+          0
+        )
+        sumItem.batchErrorLastHappenTime =
+          itemList[itemList.length - 1].triggerTime
+      }
+      emitList.push(sumItem)
+    })
+    sendData.emit(emitList)
+  }
+  /**
+   * 获取所有的错误
+   * 用户突然关闭页面时调用此方法集成错误
+   */
+  sendAllCacheError() {
+    const errInfoList = this.cacheErrorA.concat(this.cacheErrorB)
+    const arr = groupArray(errInfoList, ...GROUPARRAYKEY)
+    const arrA = arr.filter(item => item.length < MAXLENGTHA)
+    const arrB = arr.filter(item => item.length >= MAXLENGTHA)
+
+    if (arrA.length) {
+      sendData.emit(arrA.flat(Infinity), true)
+    }
+    if (arrB.length) {
+      const arrBsum: any[] = []
+      arrB.forEach(item => {
+        const sumItem = item[0]
+        sumItem.batchError = true
+        sumItem.batchErrorLength = item.length
+        sumItem.batchErrorLastHappenTime = item[item.length - 1].triggerTime
+        arrBsum.push(sumItem)
+      })
+      sendData.emit(arrBsum, true)
+    }
+  }
+  pushCacheErrorA(errorInfo: any) {
+    this.cacheErrorA.push(errorInfo)
+    this.throttleProxyAddCacheErrorA()
+
+    // 每 50 个触发一次强制发送事件
+    if (this.cacheErrorA.length >= 50) {
+      this.proxyAddCacheErrorA()
+      this.proxyAddCacheErrorB()
+    }
+  }
+}
+
+export let batchError: BatchError
+
+/**
+ * 初始化错误缓存
+ */
+export function initBatchError() {
+  batchError = new BatchError()
+}

package/src/lib/err.ts

@@ -0,0 +1,323 @@
+import { EVENTTYPES, SEDNEVENTTYPES, SENDID } from '../common'
+import { map, filter, getLocationHref, getTimestamp } from '../utils'
+import { _global } from '../utils/global'
+import { sendData } from './sendData'
+import { eventBus } from './eventBus'
+import { isArray, isRegExp } from '../utils/is'
+import { options } from './options'
+import { zip, getEventList } from './recordscreen'
+import { debug } from '../utils/debug'
+import { initBatchError, batchError } from './err-batch'
+import { RecordEventScope } from '../types'
+
+/**
+ * 序列化console.error的参数
+ * 处理各种类型的参数，包括对象、函数、Error等
+ */
+function serializeConsoleArgs(args: any[]): string {
+  const serializedArgs = args.map((arg: any) => {
+    if (arg === null) return 'null'
+    if (arg === undefined) return 'undefined'
+    if (typeof arg === 'string') return arg
+    if (typeof arg === 'number' || typeof arg === 'boolean') return String(arg)
+    if (typeof arg === 'function')
+      return `[Function: ${arg.name || 'anonymous'}]`
+    if (arg instanceof Error) {
+      return `${arg.name}: ${arg.message}${arg.stack ? '\n' + arg.stack : ''}`
+    }
+    if (typeof arg === 'object') {
+      try {
+        // 尝试JSON序列化对象，保持缩进格式
+        return JSON.stringify(arg, null, 2)
+      } catch (error) {
+        // 如果JSON序列化失败（如循环引用），使用toString
+        return arg.toString()
+      }
+    }
+    return String(arg)
+  })
+  return serializedArgs.join(' | ')
+}
+
+interface ErrorStack {
+  errMessage: string
+  errStack: string
+}
+
+type InstabilityNature = {
+  lineNumber: string
+  fileName: string
+  columnNumber: string
+}
+
+/**
+ * 格式化错误对象信息
+ * @param err Error 错误对象
+ */
+function parseStack(err: Error): ErrorStack {
+  const { stack = '', message = '' } = err
+  const result = { eventId: SENDID.CODE, errMessage: message, errStack: stack }
+
+  if (stack) {
+    const rChromeCallStack = /^\s*at\s*([^(]+)\s*\((.+?):(\d+):(\d+)\)$/
+    const rMozlliaCallStack = /^\s*([^@]*)@(.+?):(\d+):(\d+)$/
+    // chrome中包含了message信息,将其去除,并去除后面的换行符
+    const callStackStr = stack.replace(
+      new RegExp(`^[\\w\\s:]*${message}\n`),
+      ''
+    )
+    const callStackFrameList = map(
+      filter(callStackStr.split('\n'), (item: string) => item),
+      (str: string) => {
+        const chromeErrResult = str.match(rChromeCallStack)
+        if (chromeErrResult) {
+          return {
+            triggerPageUrl: chromeErrResult[2],
+            line: chromeErrResult[3], // 错误发生位置的行数
+            col: chromeErrResult[4] // 错误发生位置的列数
+          }
+        }
+
+        const mozlliaErrResult = str.match(rMozlliaCallStack)
+        if (mozlliaErrResult) {
+          return {
+            triggerPageUrl: mozlliaErrResult[2],
+            line: mozlliaErrResult[3],
+            col: mozlliaErrResult[4]
+          }
+        }
+        return {}
+      }
+    )
+    const item = callStackFrameList[0] || {}
+    return { ...result, ...item }
+  }
+  return result
+}
+
+/**
+ * 分析错误信息
+ * @param e 错误源信息
+ * @returns 相对标准格式的错误信息
+ */
+function parseError(e: any) {
+  if (e instanceof Error) {
+    // fileName: 引发此错误的文件的路径 (此属性为非标准，所以下面得区分)
+    const { message, stack, lineNumber, fileName, columnNumber } = e as Error &
+      InstabilityNature
+    if (fileName) {
+      return {
+        errMessage: message,
+        errStack: stack,
+        eventId: SENDID.CODE,
+        line: lineNumber, // 不稳定属性 - 在某些浏览器可能是undefined，被废弃了
+        col: columnNumber, // 不稳定属性 - 非标准，有些浏览器可能不支持
+        triggerPageUrl: fileName // 不稳定属性 - 非标准，有些浏览器可能不支持
+      }
+    }
+    return parseStack(e)
+  }
+  if (e.message) return parseStack(e)
+
+  // reject 错误
+  if (typeof e === 'string') return { eventId: SENDID.REJECT, errMessage: e }
+
+  // console.error 暴露的错误
+  if (isArray(e)) {
+    return { eventId: SENDID.CONSOLEERROR, errMessage: serializeConsoleArgs(e) }
+  }
+
+  return {}
+}
+
+/**
+ * 判断是否为 promise-reject 错误类型
+ */
+function isPromiseRejectedResult(
+  event: ErrorEvent | PromiseRejectedResult
+): event is PromiseRejectedResult {
+  return (event as PromiseRejectedResult).reason !== undefined
+}
+
+function parseErrorEvent(event: ErrorEvent | PromiseRejectedResult) {
+  // promise reject 错误
+  if (isPromiseRejectedResult(event)) {
+    return { eventId: SENDID.CODE, ...parseError(event.reason) }
+  }
+
+  // html元素上发生的异常错误
+  const { target } = event
+  if (target instanceof HTMLElement) {
+    // 为1代表节点是元素节点
+    if (target.nodeType === 1) {
+      const result = {
+        initiatorType: target.nodeName.toLowerCase(),
+        eventId: SENDID.RESOURCE,
+        requestUrl: ''
+      }
+      switch (target.nodeName.toLowerCase()) {
+        case 'link':
+          result.requestUrl = (target as HTMLLinkElement).href
+          break
+        default:
+          result.requestUrl =
+            (target as HTMLImageElement).currentSrc ||
+            (target as HTMLScriptElement).src
+      }
+      return result
+    }
+  }
+
+  // 代码异常
+  if (event.error) {
+    // chrome中的error对象没有fileName等属性,将event中的补充给error对象
+    const e = event.error
+    e.fileName = e.filename || event.filename
+    e.columnNumber = e.colno || event.colno
+    e.lineNumber = e.lineno || event.lineno
+    return { eventId: SENDID.CODE, ...parseError(e) }
+  }
+
+  // 兜底
+  // ie9版本,从全局的event对象中获取错误信息
+  return {
+    eventId: SENDID.CODE,
+    line: (_global as any).event.errorLine,
+    col: (_global as any).event.errorCharacter,
+    errMessage: (_global as any).event.errorMessage,
+    triggerPageUrl: (_global as any).event.errorUrl
+  }
+}
+
+/**
+ * 判断错误源信息是否为需要拦截的
+ * @param error 错误源信息
+ */
+function isIgnoreErrors(error: any): boolean {
+  if (!options.value.ignoreErrors.length) return false
+  let errMessage = error.errMessage || error.message
+  if (!errMessage) return false
+  errMessage = String(errMessage)
+
+  return options.value.ignoreErrors.some(item => {
+    if (isRegExp(item)) {
+      if ((item as RegExp).test(errMessage)) {
+        debug(`ignoreErrors拦截成功 - 截条件:${item} 错误信息:${errMessage}`)
+        return true
+      } else {
+        return false
+      }
+    } else {
+      if (errMessage === item) {
+        debug(`ignoreErrors拦截成功 - 截条件:${item} 错误信息:${errMessage}`)
+        return true
+      } else {
+        return false
+      }
+    }
+  })
+}
+
+/**
+ * 获取错误录屏数据
+ */
+function getRecordEvent(): RecordEventScope[] {
+  const _recordscreenList: RecordEventScope[] = JSON.parse(
+    JSON.stringify(getEventList())
+  )
+  return _recordscreenList
+    .slice(-2)
+    .map(item => item.eventList)
+    .flat()
+}
+
+/**
+ * 发送错误事件信息
+ * @param errorInfo 信息源
+ */
+function emit(errorInfo: any, flush = false): void {
+  const info = {
+    ...errorInfo,
+    eventType: SEDNEVENTTYPES.ERROR,
+    recordscreen: options.value.recordScreen ? zip(getRecordEvent()) : null,
+    triggerPageUrl: getLocationHref(),
+    triggerTime: getTimestamp()
+  }
+
+  options.value.scopeError
+    ? batchError.pushCacheErrorA(info)
+    : sendData.emit(info, flush)
+}
+
+/**
+ * 初始化错误监听
+ */
+function initError(): void {
+  if (!options.value.error.core) return
+
+  if (options.value.scopeError) {
+    initBatchError()
+    // 如果开启了检测批量错误 则要挂载卸载事件以防缓存池内的错误丢失
+    eventBus.addEvent({
+      type: EVENTTYPES.BEFOREUNLOAD,
+      callback: () => {
+        batchError.sendAllCacheError()
+      }
+    })
+  }
+
+  // 捕获阶段可以获取资源加载错误,script.onError link.onError img.onError,无法知道具体状态
+  eventBus.addEvent({
+    type: EVENTTYPES.ERROR,
+    callback: (e: ErrorEvent) => {
+      const errorInfo = parseErrorEvent(e)
+      if (isIgnoreErrors(errorInfo)) return
+      emit(errorInfo)
+    }
+  })
+
+  // promise调用链未捕获异常
+  // 只捕获未处理的 reject的错误，如果对reject进行了回调处理这边不进行捕获
+  eventBus.addEvent({
+    type: EVENTTYPES.UNHANDLEDREJECTION,
+    callback: (e: PromiseRejectedResult) => {
+      const errorInfo = parseErrorEvent(e)
+      if (isIgnoreErrors(errorInfo)) return
+      emit(errorInfo)
+    }
+  })
+
+  // 劫持console.error
+  eventBus.addEvent({
+    type: EVENTTYPES.CONSOLEERROR,
+    callback: e => {
+      const errorInfo = parseError(e)
+      if (isIgnoreErrors(errorInfo)) return
+      emit({ eventId: SENDID.CODE, ...errorInfo })
+    }
+  })
+}
+
+/**
+ * 主动触发错误上报
+ * @param eventId 事件ID
+ * @param message 错误信息
+ * @param options 自定义配置信息
+ */
+function handleSendError(options = {}, flush = false): void {
+  emit(options, flush)
+}
+
+/**
+ * 卸载所有错误监听
+ */
+export function destroyError() {
+  // 清除错误相关的事件类型
+  eventBus.removeEvents([
+    EVENTTYPES.ERROR,
+    EVENTTYPES.UNHANDLEDREJECTION,
+    EVENTTYPES.CONSOLEERROR
+  ])
+}
+
+export { initError, handleSendError, parseError }

package/src/lib/event-dwell.ts

@@ -0,0 +1,63 @@
+/**
+ * 这部分功能移植到 pv 中，并且默认开启
+ */
+import { EVENTTYPES, SEDNEVENTTYPES, WEBPAGELOAD } from '../common'
+import { uuid, isValidKey, getTimestamp, getLocationHref } from '../utils'
+import { eventBus } from './eventBus'
+import { sendData } from './sendData'
+// import { options } from './options'
+
+class DwellRequestTemplate {
+  eventId = '' // 事件ID
+  eventType = '' // 事件类型
+  triggerPageUrl = '' // 当前页面URL
+  referer = '' // 上级页面URL
+  entryTime = -1 // 加载完成时间
+  triggerTime = -1 // 卸载时间
+  millisecond = -1 // 页面停留时间
+  operateAction = '' // 页面加载来源
+  constructor(config = {}) {
+    Object.keys(config).forEach(key => {
+      if (isValidKey(key, config)) {
+        this[key] = config[key] || null
+      }
+    })
+  }
+}
+
+/**
+ * 加载 & 卸载事件
+ */
+function dwellCollector() {
+  const _config = new DwellRequestTemplate({ eventType: SEDNEVENTTYPES.DWELL })
+
+  // 加载完成事件
+  eventBus.addEvent({
+    type: EVENTTYPES.LOAD,
+    callback: () => {
+      _config.entryTime = getTimestamp()
+    }
+  })
+
+  // 卸载事件
+  eventBus.addEvent({
+    type: EVENTTYPES.BEFOREUNLOAD,
+    callback: () => {
+      _config.eventId = uuid()
+      _config.triggerPageUrl = getLocationHref() // 当前页面 url
+      _config.referer = document.referrer // 上级页面 url(从哪个页面跳过来的就是上级页面)
+      _config.triggerTime = getTimestamp() // 卸载时间
+      _config.millisecond = getTimestamp() - _config.entryTime // 停留多久
+      const { type } = performance.navigation // 表示加载来源, type为 0,1,2,255
+      _config.operateAction = WEBPAGELOAD[type] || ''
+      sendData.emit(_config, true)
+    }
+  })
+}
+
+function initEventDwell() {
+  // options.value.event.unload && dwellCollector() // 放弃此方法
+  dwellCollector()
+}
+
+export { initEventDwell }