web-tracing-core 2.1.1 → 2.1.2

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,169 @@
+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) {
+    // 只发送必要的数据，不包含 DOM 元素
+    sendData.emit({
+      eventType: SEDNEVENTTYPES.INTERSECTION,
+      triggerPageUrl: getLocationHref(),
+      threshold: targetObj.threshold,
+      observeTime: targetObj.observeTime,
+      showTime: targetObj.showTime,
+      showEndTime: targetObj.showEndTime,
+      params: targetObj.params
+    })
+  }
+  /**
+   * 开始观察目标元素
+   * 分为初始加载和过程中加载
+   * @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
+}