web-tracing-core 2.1.0

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)
+}

package/src/lib/http.ts

@@ -0,0 +1,197 @@
+import {
+  on,
+  isValidKey,
+  getTimestamp,
+  parseGetParams,
+  getBaseUrl
+} from '../utils'
+import { handleSendError } from './err'
+import { eventBus } from './eventBus'
+import { EVENTTYPES, SENDID } from '../common'
+import { options } from './options'
+import { handleSendPerformance } from './performance'
+// import { debug } from '../utils/debug'
+import { isRegExp } from '../utils/is'
+
+/**
+ * fetch请求拦截
+ */
+function interceptFetch(): void {
+  eventBus.addEvent({
+    type: EVENTTYPES.FETCH,
+    callback: async (
+      reqUrl: string,
+      _options: Partial<Request> = {},
+      res: Response,
+      fetchStart: number,
+      traceObj: Partial<Request> = {}
+    ) => {
+      const { method = 'GET', body = {} } = _options
+      const { url, status, statusText } = res
+      const requestMethod = String(method).toLocaleLowerCase()
+
+      if (isIgnoreHttp(url)) return
+
+      if (status === 200 || status === 304) {
+        if (options.value.performance.server) {
+          handleSendPerformance({
+            eventId: SENDID.SERVER,
+            requestUrl: url,
+            triggerTime: fetchStart,
+            duration: getTimestamp() - fetchStart,
+            responseStatus: status,
+            requestMethod,
+            requestType: 'fetch',
+            ...traceObj,
+            params: method.toUpperCase() === 'POST' ? body : parseGetParams(url)
+          })
+        }
+      } else if (options.value.error.server) {
+        handleSendError({
+          eventId: SENDID.SERVER,
+          triggerTime: fetchStart,
+          duration: getTimestamp() - fetchStart,
+          errMessage: statusText,
+          requestUrl: getBaseUrl(url),
+          responseStatus: status,
+          requestMethod,
+          requestType: 'fetch',
+          ...traceObj,
+          params: method.toUpperCase() === 'POST' ? body : parseGetParams(url)
+        })
+      }
+    }
+  })
+}
+
+class RequestTemplate {
+  requestUrl = '' // 请求地址
+  requestMethod = '' // 请求类型 GET POST
+  requestParams = {} // get请求的参数
+  triggerTime = -1 // 请求发生时间
+  constructor(config = {}) {
+    Object.keys(config).forEach(key => {
+      if (isValidKey(key, config)) {
+        this[key] = config[key] || null
+      }
+    })
+  }
+}
+
+/**
+ * xhr 请求拦截
+ */
+function interceptXHR(): void {
+  const _config = new RequestTemplate()
+
+  eventBus.addEvent({
+    type: EVENTTYPES.XHROPEN,
+    callback: (method, url) => {
+      _config.requestMethod = String(method).toLocaleLowerCase()
+      _config.requestUrl = url
+      _config.requestParams = parseGetParams(url)
+    }
+  })
+
+  eventBus.addEvent({
+    type: EVENTTYPES.XHRSEND,
+    callback: (that: XMLHttpRequest & any, body) => {
+      // readyState发生改变时触发,也就是请求状态改变时
+      // readyState 会依次变为 2,3,4 也就是会触发三次这里
+      on(that, EVENTTYPES.READYSTATECHANGE, function () {
+        const { readyState, status, responseURL, statusText } = that
+        const responseText =
+          that.responseType === '' || that.responseType === 'text'
+            ? that.responseText
+            : ''
+
+        if (readyState === 4) {
+          const requestUrl = responseURL || _config.requestUrl
+          if (isIgnoreHttp(requestUrl)) return
+
+          // 请求已完成,且响应已就绪
+          if (status === 200 || status === 304) {
+            if (options.value.performance.server) {
+              handleSendPerformance({
+                eventId: SENDID.SERVER,
+                requestUrl,
+                requestMethod: _config.requestMethod,
+                requestType: 'xhr',
+                responseStatus: status,
+                duration: getTimestamp() - _config.triggerTime,
+                params:
+                  _config.requestMethod === 'post'
+                    ? body
+                    : _config.requestParams
+              })
+            }
+          } else if (options.value.error.server) {
+            handleSendError({
+              eventId: SENDID.SERVER,
+              errMessage: statusText || responseText,
+              requestUrl,
+              requestMethod: _config.requestMethod,
+              requestType: 'xhr',
+              responseStatus: status,
+              params:
+                _config.requestMethod === 'post' ? body : _config.requestParams
+            })
+          }
+        }
+      })
+
+      _config.triggerTime = getTimestamp()
+    }
+  })
+}
+
+/**
+ * 判断请求地址是否为需要拦截的
+ * @param url 请求地址
+ */
+function isIgnoreHttp(url: string): boolean {
+  if (!options.value.ignoreRequest.length) return false
+  if (!url) return false
+
+  return options.value.ignoreRequest.some(item => {
+    if (isRegExp(item)) {
+      if ((item as RegExp).test(url)) {
+        // debug(`ignoreRequest拦截成功 - 截条件:${item} 拦截地址:${url}`)
+        return true
+      } else {
+        return false
+      }
+    } else {
+      if (url === item) {
+        // debug(`ignoreRequest拦截成功 - 截条件:${item} 拦截地址:${url}`)
+        return true
+      } else {
+        return false
+      }
+    }
+  })
+}
+
+/**
+ * 初始化http监控
+ */
+function initHttp(): void {
+  if (!options.value.performance.server && !options.value.error.server) return
+
+  interceptXHR()
+  interceptFetch()
+}
+
+/**
+ * 卸载所有请求监听
+ */
+export function destroyHttp() {
+  // 清除HTTP请求相关的事件类型
+  eventBus.removeEvents([
+    EVENTTYPES.FETCH,
+    EVENTTYPES.XHROPEN,
+    EVENTTYPES.XHRSEND
+  ])
+}
+
+export { initHttp }

package/src/lib/intersectionObserver.ts

@@ -0,0 +1,164 @@
+import type { ElementOrList, TargetGather, AnyObj } from '../types'
+import { unKnowToArray, getTimestamp, getLocationHref } from '../utils'
+import { sendData } from './sendData'
+import { _support } from '../utils/global'
+import { SEDNEVENTTYPES } from '../common'
+
+interface IoMap {
+  [key: number]: IntersectionObserver
+}
+
+interface TargetMap {
+  target: Element
+  threshold: number
+  observeTime: number // sdk开始监视的时间
+  showTime?: number // sdk检测到的开始时间
+  showEndTime?: number // sdk检测到的结束时间
+  params?: AnyObj
+}
+
+/**
+ * 元素曝光收集
+ * 收集参数：曝光开始时间、曝光结束时间、被曝光元素上附带的额外参数
+ * 收集契机：划出目标元素的收集范围
+ */
+class Intersection {
+  private ioMap: IoMap = {}
+  private targetMap: TargetMap[] = []
+  private options = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.5 // 阀值设为0.5，当只有比例达到一半时才触发回调函数
+  }
+  /**
+   * 针对 threshold 生成不同监听对象 (不允许同一个dom被两个监听对象监听)
+   * @param threshold 阈值
+   */
+  private initObserver(threshold: number) {
+    return new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            const targetObj = this.targetMap.find(
+              mapTarget => mapTarget.target === entry.target
+            )
+            if (targetObj) {
+              targetObj.showTime = getTimestamp()
+            }
+          } else {
+            const targetObj = this.targetMap.find(
+              mapTarget => mapTarget.target === entry.target
+            )
+            if (targetObj) {
+              // 在进入页面时指定了没有在屏幕可视界面的dom，会立即触发这里
+              // 此时需要根据有无 showTime 区分是否为一个完整事件再去发送
+              if (!targetObj.showTime) return
+              targetObj.showEndTime = getTimestamp()
+              this.sendEvent(targetObj)
+            }
+          }
+        })
+      },
+      {
+        ...this.options,
+        threshold
+      }
+    )
+  }
+  /**
+   * 发送事件
+   */
+  private sendEvent(targetObj: TargetMap) {
+    sendData.emit({
+      eventType: SEDNEVENTTYPES.INTERSECTION,
+      triggerPageUrl: getLocationHref(),
+      ...targetObj
+    })
+  }
+  /**
+   * 开始观察目标元素
+   * 分为初始加载和过程中加载
+   * @param params 附带的额外参数
+   */
+  public observe(gather: TargetGather | TargetGather[]) {
+    const _gather = unKnowToArray(gather)
+    _gather.forEach(item => {
+      const _targetList = unKnowToArray(item.target)
+
+      if (!Object.prototype.hasOwnProperty.call(this.ioMap, item.threshold)) {
+        this.ioMap[item.threshold] = this.initObserver(item.threshold || 0.5)
+      }
+
+      _targetList.forEach(target => {
+        const index = this.targetMap.findIndex(
+          mapTarget => mapTarget.target === target
+        )
+        // 不允许重复观察
+        if (index === -1) {
+          this.ioMap[item.threshold].observe(target)
+
+          // 记录哪些元素被监听
+          this.targetMap.push({
+            target,
+            threshold: item.threshold,
+            observeTime: getTimestamp(), // 开始监听的时间
+            params: item.params
+          })
+        }
+      })
+    })
+  }
+  /**
+   * 对元素停止观察
+   */
+  public unobserve(target: ElementOrList) {
+    const _targetList = unKnowToArray(target)
+
+    _targetList.forEach(_target => {
+      // 第一步：找出此元素代表的 threshold 值
+      const targetIndex = this.targetMap.findIndex(
+        mapTarget => mapTarget.target === _target
+      )
+      if (targetIndex === -1) return // 不存在的元素则跳过
+
+      // 第二步：根据 threshold 值从 ioMap 获取到 io 实例
+      const io = this.ioMap[this.targetMap[targetIndex].threshold]
+      if (!io) return
+
+      this.targetMap.splice(targetIndex, 1)
+
+      // 第二步：io 实例执行 unobserve 方法
+      io.unobserve(_target)
+    })
+  }
+  /**
+   * 对所有元素停止观察
+   */
+  public disconnect() {
+    for (const key in this.ioMap) {
+      if (Object.prototype.hasOwnProperty.call(this.ioMap, key)) {
+        const io = this.ioMap[key]
+        io.disconnect()
+      }
+    }
+    this.targetMap = []
+    this.ioMap = {}
+  }
+}
+
+export let intersection: Intersection
+
+/**
+ * 初始化曝光监听
+ */
+export function initIntersection() {
+  _support.intersection = new Intersection()
+  intersection = _support.intersection
+}
+
+/**
+ * 卸载所有曝光监听
+ */
+export function destroyIntersection() {
+  intersection?.disconnect()
+}

package/src/lib/line-status.ts

@@ -0,0 +1,45 @@
+import { _support } from '../utils/global'
+import { EVENTTYPES } from '../common'
+import { eventBus } from './eventBus'
+import { debug } from '../utils/debug'
+
+/**
+ * 监听网络状态
+ * 当处于断网状态下的所有埋点事件都无效（认为此时采集的数据大部分是无效的）
+ */
+export class LineStatus {
+  onLine = true
+  constructor() {
+    this.init()
+  }
+  init() {
+    eventBus.addEvent({
+      type: EVENTTYPES.OFFLINE,
+      callback: e => {
+        if (e.type === 'offline') {
+          debug('网络断开')
+          this.onLine = false
+        }
+      }
+    })
+    eventBus.addEvent({
+      type: EVENTTYPES.ONLINE,
+      callback: e => {
+        if (e.type === 'online') {
+          debug('网络连接')
+          this.onLine = true
+        }
+      }
+    })
+  }
+}
+
+export let lineStatus: LineStatus
+
+/**
+ * 初始化网络监听
+ */
+export function initLineStatus() {
+  _support.lineStatus = new LineStatus()
+  lineStatus = _support.lineStatus
+}