web-tracing-core 2.1.1 → 2.1.2

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 }

package/src/lib/eventBus.ts

@@ -0,0 +1,97 @@
+import type { AnyFun } from '../types'
+import { EVENTTYPES } from '../common'
+import { _support } from '../utils/global'
+
+interface EventHandler {
+  type: EVENTTYPES
+  callback: AnyFun
+}
+
+type Handlers = {
+  [key in EVENTTYPES]?: AnyFun[]
+}
+
+export class EventBus {
+  private handlers: Handlers
+  constructor() {
+    this.handlers = {}
+  }
+  /**
+   * 为目标类型事件添加回调
+   * @param handler 需要被添加的类型以及回调函数
+   */
+  addEvent(handler: EventHandler) {
+    !this.handlers[handler.type] && (this.handlers[handler.type] = [])
+    const funIndex = this._getCallbackIndex(handler)
+    if (funIndex === -1) {
+      this.handlers[handler.type]?.push(handler.callback)
+    }
+  }
+  /**
+   * 为目标类型事件删除回调
+   * @param handler 需要被删除的类型以及回调函数
+   */
+  delEvent(handler: EventHandler) {
+    const funIndex = this._getCallbackIndex(handler)
+    if (funIndex !== -1) {
+      this.handlers[handler.type]?.splice(funIndex, 1)
+    }
+  }
+  /**
+   * 为目标类型事件更改回调
+   * @param handler 需要被更改的类型以及回调函数
+   * @param newCallback 新的回调函数
+   */
+  changeEvent(handler: EventHandler, newCallback: AnyFun) {
+    const funIndex = this._getCallbackIndex(handler)
+    if (funIndex !== -1) {
+      this.handlers[handler.type]?.splice(funIndex, 1, newCallback)
+    }
+  }
+  /**
+   * 获取目标类型事件所有的回调
+   * @param type 事件类型
+   */
+  getEvent(type: EVENTTYPES): AnyFun[] {
+    return this.handlers[type] || []
+  }
+  /**
+   * 执行目标类型事件所有的回调
+   * @param type 事件类型
+   * @param args 额外参数
+   */
+  runEvent(type: EVENTTYPES, ...args: any[]): void {
+    const allEvent = this.getEvent(type)
+    allEvent.forEach(fun => {
+      fun(...args)
+    })
+  }
+  /**
+   * 获取函数在 callback 列表中的位置
+   */
+  private _getCallbackIndex(handler: EventHandler): number {
+    if (this.handlers[handler.type]) {
+      const callbackList = this.handlers[handler.type]
+      if (callbackList) {
+        return callbackList.findIndex(fun => fun === handler.callback)
+      } else {
+        return -1
+      }
+    } else {
+      return -1
+    }
+  }
+  /**
+   * 移除多个指定类型的事件监听
+   * @param types 事件类型数组
+   */
+  removeEvents(types: EVENTTYPES[]) {
+    types.forEach(type => {
+      delete this.handlers[type]
+    })
+  }
+}
+
+const eventBus = _support.eventBus || (_support.eventBus = new EventBus())
+
+export { eventBus }

package/src/lib/exportMethods.ts

@@ -0,0 +1,208 @@
+import type {
+  InternalOptions,
+  AnyFun,
+  TargetGather,
+  ElementOrList,
+  VoidFun
+} from '../types'
+import { options } from './options'
+import { _support } from '../utils/global'
+import { getIPs as _getIPs } from '../utils/getIps'
+import { validateMethods, deepCopy } from '../utils'
+import { handleSendError } from './err'
+import { handleSendPerformance } from './performance'
+import { handleSendEvent } from './event'
+import { handleSendPageView } from './pv'
+import { intersection } from './intersectionObserver'
+import { sendData } from './sendData'
+import { SDK_LOCAL_KEY } from '../common/config'
+import { LocalStorageUtil } from '../utils/localStorage'
+import { unzip } from '../lib/recordscreen'
+
+/**
+ * 解压错误录屏数据
+ */
+export function unzipRecordscreen(recordscreen: string) {
+  return unzip(recordscreen)
+}
+
+/**
+ * 钩子：放入事件队列之前
+ * @param fun 回调函数
+ */
+export function beforePushEventList(fun: AnyFun): void {
+  if (!validateMethods('beforePushEventList')) return
+
+  options.value.beforePushEventList.push(fun)
+}
+
+/**
+ * 钩子：发送之前
+ * @param fun 回调函数
+ */
+export function beforeSendData(fun: AnyFun): void {
+  if (!validateMethods('beforeSendData')) return
+
+  options.value.beforeSendData.push(fun)
+}
+
+/**
+ * 钩子：发送之后
+ * @param fun 回调函数
+ */
+export function afterSendData(fun: AnyFun): void {
+  if (!validateMethods('afterSendData')) return
+
+  options.value.afterSendData.push(fun)
+}
+
+/**
+ * 设置用户id
+ * @param id 用户id
+ */
+export function setUserUuid(id: string): void {
+  if (!validateMethods('setUserUuid')) return
+
+  options.value.userUuid = id
+}
+
+/**
+ * 获取用户id（此id是手动设置的id）
+ */
+export function getUserUuid(): string | void {
+  if (!validateMethods('getUserUuid')) return
+
+  return options.value.userUuid
+}
+
+/**
+ * 获取sdk中的用户id
+ */
+export function getSDKUserUuid(): string | void {
+  if (!validateMethods('getSDKUserUuid')) return
+
+  return options.value.sdkUserUuid
+}
+
+/**
+ * 获取在sdk中记录的所有基础的信息（包括硬件，地理位置等等）
+ */
+export function getBaseInfo(): object | void {
+  if (!validateMethods('getBaseInfo')) return
+
+  return {
+    ..._support.baseInfo.base,
+    userUuid: options.value.userUuid
+  }
+}
+
+/**
+ * 获取首屏数据
+ */
+export function getFirstScreen(): object | void {
+  if (!validateMethods('getFirstScreen')) return
+
+  return { ..._support.firstScreen }
+}
+
+/**
+ * 主动触发error事件上报
+ * @param options 自定义配置信息
+ */
+export function traceError(options = {}, flush = false) {
+  if (!validateMethods('traceError')) return
+
+  return handleSendError(options, flush)
+}
+
+/**
+ * 主动触发性能事件上报
+ * @param options 自定义配置信息
+ */
+export function tracePerformance(options = {}, flush = false) {
+  if (!validateMethods('tracePerformance')) return
+
+  return handleSendPerformance(options, flush)
+}
+
+/**
+ * 主动触发事件上报
+ * @param options 自定义配置信息
+ */
+export function traceCustomEvent(options = {}, flush = false) {
+  if (!validateMethods('traceCustomEvent')) return
+
+  return handleSendEvent(options, flush)
+}
+
+/**
+ * 主动触发pv事件上报
+ * @param options 自定义配置信息
+ */
+export function tracePageView(option = {}, flush = false) {
+  if (!validateMethods('tracePageView')) return
+
+  return handleSendPageView(option, flush)
+}
+
+/**
+ * 获取公网ip
+ */
+export function getIPs(): Promise<string> {
+  return _getIPs().then((res: any) => res[0])
+}
+
+/**
+ * 曝光 - 对目标元素进行监听
+ * @param params 附带的额外参数
+ */
+export function intersectionObserver(gather: TargetGather): void {
+  if (!validateMethods('intersectionObserver')) return
+  intersection.observe(gather)
+}
+
+/**
+ * 曝光 - 对目标元素进行取消监听
+ */
+export function intersectionUnobserve(target: ElementOrList): void {
+  if (!validateMethods('intersectionUnobserve')) return
+  intersection.unobserve(target)
+}
+
+/**
+ * 曝光 - 取消所有监听
+ */
+export function intersectionDisconnect(): void {
+  if (!validateMethods('intersectionDisconnect')) return
+  intersection.disconnect()
+}
+
+/**
+ * 手动发送本地数据
+ */
+export function sendLocal(): void {
+  if (!validateMethods('sendData') && !options.value.localization) return
+  const localItem = LocalStorageUtil.getItem(SDK_LOCAL_KEY)
+  if (localItem) {
+    sendData.sendLocal(localItem)
+    LocalStorageUtil.removeItem(SDK_LOCAL_KEY)
+  }
+}
+
+/**
+ * 设置本地化存储溢出后的回调
+ * @param overFlowFun 回调函数
+ */
+export function setLocalizationOverFlow(overFlowFun: VoidFun): void {
+  if (!validateMethods('localizationOverFlow') && !options.value.localization)
+    return
+  options.value.localizationOverFlow = overFlowFun
+}
+
+/**
+ * 获取sdk内部的参数配置
+ * 这个参数配置并不是入参配置，sdk内部的参数是整理过后的
+ */
+export function getOptions(): InternalOptions {
+  return deepCopy(options.value)
+}