web-tracing-core 2.1.0

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 }

package/src/lib/event.ts

@@ -0,0 +1,252 @@
+import { isValidKey, getLocationHref, getTimestamp } from '../utils'
+import { getElByAttr, isSimpleEl, getNodeXPath } from '../utils/element'
+import { sendData } from './sendData'
+import { eventBus } from './eventBus'
+import { EVENTTYPES, SEDNEVENTTYPES } from '../common'
+import { options } from './options'
+
+class RequestTemplateClick {
+  eventId = '' // 事件ID
+  eventType = '' // 事件类型
+  title = '' // 事件名
+  triggerPageUrl = '' // 当前页面URL
+  x = -1 // 被点击元素与屏幕左边距离
+  y = -1 // 被点击元素与屏幕上边距离
+  params = {} // 事件参数
+  elementPath = '' // 被点击元素的层级
+  triggerTime = -1 // 事件发生时间
+  constructor(config = {}) {
+    Object.keys(config).forEach(key => {
+      if (isValidKey(key, config)) {
+        this[key] = config[key] || null
+      }
+    })
+  }
+}
+
+/**
+ * 监听 - 点击事件
+ */
+function clickCollection() {
+  eventBus.addEvent({
+    type: EVENTTYPES.CLICK,
+    callback: (e: MouseEvent) => {
+      const _config = new RequestTemplateClick({
+        eventType: SEDNEVENTTYPES.CLICK
+      })
+
+      // 获取被点击的元素到最外层元素组成的数组
+      const path: HTMLElement[] = e.composedPath()
+        ? (e.composedPath() as HTMLElement[])
+        : e.target
+        ? getNodePath(e.target as HTMLElement)
+        : []
+
+      // 检查被点击的元素以及其父级元素是否有这些属性(从内到外)
+      const target = path.find(
+        el =>
+          el.hasAttribute &&
+          (el.hasAttribute('data-warden-container') ||
+            el.hasAttribute('data-warden-event-id') ||
+            el.hasAttribute('data-warden-title'))
+      )
+
+      if (!target) return
+
+      const { scrollTop, scrollLeft } = document.documentElement // html距离上和左侧的距离(一般都是0)
+      const { top, left } = (e.target as HTMLElement).getBoundingClientRect() // 元素距离html的距离
+      _config.x = left + scrollLeft
+      _config.y = top + scrollTop
+      _config.triggerTime = getTimestamp() // 点击时间
+      _config.triggerPageUrl = getLocationHref() // 当前页面的url
+      _config.title = extractTitleByTarget(target) // 获取title属性
+      _config.eventId = extractDataByPath(path) // 提取数据事件ID
+      _config.params = extractParamsByPath(path) // 提取数据参数
+      _config.elementPath = getNodeXPath(target).slice(-128) // 长度限制128字符
+      sendData.emit(_config)
+    }
+  })
+}
+
+/**
+ * 获取目标元素到最外层元素组成的数组
+ */
+function getNodePath(
+  node: HTMLElement,
+  options = { includeSelf: true, order: 'asc' }
+) {
+  if (!node) return []
+  const { includeSelf, order } = options
+  let parent = includeSelf ? node : node.parentElement
+  let result: HTMLElement[] = []
+  while (parent) {
+    result = order === 'asc' ? result.concat(parent) : [parent].concat(result)
+    parent = parent.parentElement
+  }
+  return result
+}
+
+/**
+ * 获取title属性(data-warden-title 或者 title)
+ */
+function extractTitleByTarget(target: HTMLElement) {
+  const selfTitle = getNodeTitle(target)
+  if (selfTitle) return selfTitle
+
+  // 向上找其父节点
+  let container = target.parentElement
+
+  while (container && container !== document.body) {
+    if (container.hasAttribute('data-warden-container')) break
+    container = container.parentElement
+  }
+  const superTitle = getNodeTitle(container)
+  if (superTitle) return superTitle
+
+  // 自身以及父级都没有拿到 title 值的情况下
+  const { tagName } = target
+  return !target.hasChildNodes() || tagName.toLowerCase() === 'svg'
+    ? handleLeafNode(target)
+    : handleNoLeafNode(target)
+}
+/**
+ * 获取元素的 data-warden-title 属性或者 title属性
+ */
+function getNodeTitle(node: HTMLElement | null) {
+  if (node) {
+    return node.hasAttribute('data-warden-title')
+      ? node.getAttribute('data-warden-title')
+      : node.title
+  }
+  return ''
+}
+/**
+ * 获取 title - 叶子元素的情况下，取其特殊值
+ * 叶子元素(也就是不包含其他HTML元素,也不能有文本内容)
+ */
+function handleLeafNode(target: any) {
+  const { tagName, textContent } = target
+  if (tagName === 'IMG') return target.getAttribute('alt') || null
+  if (tagName === 'svg') {
+    const a = [...Array(target.children)].find(item => item.tagName === 'use')
+    if (a) return a.getAttribute('xlink:href') || null
+  }
+  return textContent
+}
+/**
+ * 获取 title - 非叶子元素的情况
+ */
+function handleNoLeafNode(target: Element) {
+  const { tagName, textContent } = target
+  if (tagName === 'A') {
+    const res = isSimpleEl([...Array.from(target.children)])
+    return res ? textContent : target.getAttribute('href') || null
+  }
+  if (tagName === 'BUTTON') {
+    const name = target.getAttribute('name')
+    const res = isSimpleEl([...Array.from(target.children)])
+    return name || res ? textContent : target.getAttribute('href') || null
+  }
+  const { length } = [...Array.from(target.children)].filter(() =>
+    target.hasChildNodes()
+  )
+  return length > 0 ? null : textContent
+}
+
+/**
+ * 提取数据事件ID
+ */
+function extractDataByPath(list: HTMLElement[] = []) {
+  // data-warden-event-id
+  const hasIdEl = getElByAttr(list, 'data-warden-event-id')
+  if (hasIdEl) return hasIdEl.getAttribute('data-warden-event-id')!
+
+  // title
+  const hasTitleEl = getElByAttr(list, 'title')
+  if (hasTitleEl) return hasTitleEl.getAttribute('title')!
+
+  // container
+  const container = getElByAttr(list, 'data-warden-container')
+  if (container) {
+    if (container.getAttribute('data-warden-event-id')) {
+      return container.getAttribute('data-warden-event-id')!
+    }
+    if (container.getAttribute('title')) {
+      return container.getAttribute('title')!
+    }
+    const id2 = container.getAttribute('data-warden-container')!
+    if (typeof id2 === 'string' && id2) return id2
+  }
+
+  // 都没有则以 tagname 去当做ID
+  return list[0].tagName.toLowerCase()
+}
+
+/**
+ * 提取数据参数
+ * 如果本身节点没有埋点属性的话会用父级埋点属性
+ */
+function extractParamsByPath(list: HTMLElement[] = []) {
+  const regex = /^data-warden-/
+  let target
+  let targetIndex = -1
+
+  // 遍历从子节点到body下最大的节点,遍历他们的属性,直到某个节点的属性能通过校验的节点
+  for (let index = 0; index < list.length; index++) {
+    const el = list[index]
+    const attributes = (el && el.attributes && Array.from(el.attributes)) || []
+    target = attributes.find(item =>
+      item.nodeName.match(regex)
+        ? item.nodeName.match(regex)
+        : item.nodeName.indexOf('data-warden-container') !== -1
+    )
+    if (target) {
+      targetIndex = index
+      break
+    }
+  }
+  if (targetIndex < 0) return {}
+
+  const container = list[targetIndex]
+  const attrList = Array.from(container.attributes) || []
+  const params: Record<string, string | null> = {}
+  const defaultKey = ['container', 'title', 'event-id']
+  attrList.forEach(item => {
+    if (item.nodeName.indexOf('data-warden') < 0) return // 过滤非标准命名 如 data-v-fbcf7454
+    const key = item.nodeName.replace(regex, '')
+    if (defaultKey.includes(key)) return // 过滤sdk自定义属性
+    params[key] = item.nodeValue
+  })
+
+  return params
+}
+
+function initEvent() {
+  options.value.event.core && clickCollection()
+}
+
+/**
+ * 主动触发事件上报
+ * @param options 自定义配置信息
+ */
+function handleSendEvent(options = {}, flush = false) {
+  sendData.emit(
+    {
+      ...options,
+      eventType: SEDNEVENTTYPES.CUSTOM,
+      triggerTime: getTimestamp(),
+      triggerPageUrl: getLocationHref()
+    },
+    flush
+  )
+}
+
+/**
+ * 卸载所有事件监听
+ */
+export function destroyEvent() {
+  // 清除事件相关的事件类型
+  eventBus.removeEvents([EVENTTYPES.CLICK, EVENTTYPES.LOAD])
+}
+
+export { initEvent, handleSendEvent }