web-tracing-core 2.1.0 → 2.1.1

package/src/lib/err.ts

@@ -1,323 +0,0 @@
-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

@@ -1,63 +0,0 @@
-/**
- * 这部分功能移植到 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

@@ -1,252 +0,0 @@
-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 }