web-tracing-core 2.1.1 → 2.1.2

package/src/lib/options.ts

@@ -0,0 +1,325 @@
+import type { InternalOptions, AnyFun, InitOptions, VoidFun } from '../types'
+import { typeofAny, deepAssign } from '../utils'
+import { isEmpty } from '../utils/is'
+import { _support } from '../utils/global'
+import { logError } from '../utils/debug'
+import { ref } from '../observer'
+import type { ObserverValue } from '../observer/types'
+
+/**
+ * 管理全局的参数
+ */
+export class Options implements InternalOptions {
+  dsn = '' // 上报地址
+  appName = '' // 应用名称
+  appCode = '' // 应用code
+  appVersion = '' // 应用版本
+  userUuid = '' // 用户id(外部填充进来的id)
+  sdkUserUuid = '' // 用户id(sdk内部生成的id)
+  debug = false // 是否开启调试模式(控制台会输出sdk动作)
+  pv = {
+    core: false // 页面跳转-是否自动发送页面跳转相关数据
+  }
+  performance = {
+    core: false, // 性能数据-是否采集静态资源、接口的相关数据
+    firstResource: false, // 性能数据-是否采集首次进入页面的数据(ps: tcp连接耗时,HTML加载完成时间,首次可交互时间)
+    server: false // 接口请求-是否采集接口请求(成功的才会采集)
+  }
+  error = {
+    core: false, // 是否采集异常数据(ps: 资源引入错误,promise错误,控制台输出错误)
+    server: false // 接口请求-是否采集报错接口数据
+  }
+  event = {
+    core: false // 页面点击-是否采集点击事件
+  }
+  recordScreen = true // 是否启动录屏
+  timeout = 5000 // 日志上报超时时间（毫秒）
+  maxQueueLength = 200 // 上报接口异常，日志队列最大缓存数
+  checkRecoverInterval = 1 // 多长时间检测一次上报接口是否恢复（分钟）
+
+  ext = {} // 自定义全局附加参数(放在baseInfo中)
+  tracesSampleRate = 1 // 抽样发送
+
+  cacheMaxLength = 5 // 上报数据最大缓存数
+  cacheWatingTime = 5000 // 上报数据最大等待时间
+  ignoreErrors = [] // 错误类型事件过滤
+  ignoreRequest: Array<string | RegExp> = [] // 请求类型事件过滤
+  scopeError = false // 当某个时间段报错时，会将此类错误转为特殊错误类型，会新增错误持续时间范围
+  localization = false // 是否本地化：sdk不再主动发送事件，事件都存储在本地，由用户手动调用方法发送
+  sendTypeByXmlBody = false // 是否强制指定发送形式为xml，body请求方式
+
+  // whiteScreen = false // 开启白屏检测
+
+  // 添加到行为列表前的 hook (在这里面可以给出错误类型，然后就能达到用户想拿到是何种事件类型的触发)
+  beforePushEventList: AnyFun[] = []
+
+  // 数据上报前的 hook
+  beforeSendData: AnyFun[] = []
+
+  // 数据上报后的 hook
+  afterSendData: VoidFun[] = []
+
+  // 本地化存储溢出后的回调
+  localizationOverFlow: VoidFun = () => {
+    //   do something
+  }
+
+  constructor(initOptions: InitOptions) {
+    const _options = this.transitionOptions(initOptions)
+    _options.ignoreRequest.push(new RegExp(_options.dsn))
+    deepAssign<Options>(this, _options)
+  }
+
+  /**
+   * 对入参配置项进行转换
+   */
+  private transitionOptions(options: InitOptions): Options {
+    const _options = deepAssign<Options>({}, this, options)
+    const { beforePushEventList, beforeSendData, afterSendData } = options
+    const { pv, performance, error, event } = _options
+
+    if (typeof pv === 'boolean') {
+      _options.pv = {
+        core: pv
+      }
+    }
+    if (typeof performance === 'boolean') {
+      _options.performance = {
+        core: performance,
+        firstResource: performance,
+        server: performance
+      }
+    }
+    if (typeof error === 'boolean') {
+      _options.error = {
+        core: error,
+        server: error
+      }
+    }
+    if (typeof event === 'boolean') {
+      _options.event = {
+        core: event
+      }
+    }
+
+    if (beforePushEventList) {
+      _options.beforePushEventList = [beforePushEventList]
+    }
+    if (beforeSendData) {
+      _options.beforeSendData = [beforeSendData]
+    }
+    if (afterSendData) {
+      _options.afterSendData = [afterSendData]
+    }
+
+    if (options.timeout !== undefined) {
+      _options.timeout = options.timeout
+    }
+
+    if (options.maxQueueLength !== undefined) {
+      _options.maxQueueLength = options.maxQueueLength
+    }
+
+    if (options.checkRecoverInterval !== undefined) {
+      _options.checkRecoverInterval = options.checkRecoverInterval
+    }
+
+    return _options
+  }
+}
+
+function _validateInitOption(options: InitOptions) {
+  const {
+    dsn,
+    appName,
+    appCode,
+    appVersion,
+    userUuid,
+    debug,
+    recordScreen,
+    pv,
+    performance,
+    error,
+    event,
+    ext,
+    tracesSampleRate,
+    cacheMaxLength,
+    cacheWatingTime,
+    ignoreErrors,
+    ignoreRequest,
+    scopeError,
+    localization,
+    sendTypeByXmlBody,
+    // whiteScreen,
+    beforePushEventList,
+    beforeSendData,
+    timeout,
+    maxQueueLength,
+    checkRecoverInterval
+  } = options
+
+  const validateFunList = []
+
+  if (pv && typeof pv === 'object') {
+    validateFunList.push(validateOption(pv.core, 'pv.core', 'boolean'))
+  } else {
+    validateFunList.push(validateOption(pv, 'pv', 'boolean'))
+  }
+
+  if (performance && typeof performance === 'object') {
+    validateFunList.push(
+      validateOption(performance.core, 'performance.core', 'boolean'),
+      validateOption(
+        performance.firstResource,
+        'performance.firstResource',
+        'boolean'
+      ),
+      validateOption(performance.server, 'performance.server', 'boolean')
+    )
+  } else {
+    validateFunList.push(validateOption(performance, 'performance', 'boolean'))
+  }
+
+  if (error && typeof error === 'object') {
+    validateFunList.push(
+      validateOption(error.core, 'error.core', 'boolean'),
+      validateOption(error.server, 'error.server', 'boolean')
+    )
+  } else {
+    validateFunList.push(validateOption(error, 'error', 'boolean'))
+  }
+
+  if (event && typeof event === 'object') {
+    validateFunList.push(validateOption(event.core, 'event.core', 'boolean'))
+  } else {
+    validateFunList.push(validateOption(event, 'event', 'boolean'))
+  }
+
+  const validateList = [
+    validateOption(dsn, 'dsn', 'string'),
+    validateOption(appName, 'appName', 'string'),
+    validateOption(appCode, 'appCode', 'string'),
+    validateOption(appVersion, 'appVersion', 'string'),
+    validateOption(userUuid, 'userUuid', 'string'),
+    validateOption(debug, 'debug', 'boolean'),
+    validateOption(recordScreen, 'recordScreen', 'boolean'),
+
+    validateOption(ext, 'ext', 'object'),
+    validateOption(tracesSampleRate, 'tracesSampleRate', 'number'),
+
+    validateOption(cacheMaxLength, 'cacheMaxLength', 'number'),
+    validateOption(cacheWatingTime, 'cacheWatingTime', 'number'),
+
+    validateOption(ignoreErrors, 'ignoreErrors', 'array'),
+    validateOptionArray(ignoreErrors, 'ignoreErrors', ['string', 'regexp']),
+
+    validateOption(ignoreRequest, 'ignoreRequest', 'array'),
+    validateOptionArray(ignoreRequest, 'ignoreRequest', ['string', 'regexp']),
+
+    validateOption(scopeError, 'scopeError', 'boolean'),
+    validateOption(localization, 'localization', 'boolean'),
+    validateOption(sendTypeByXmlBody, 'sendTypeByXmlBody', 'boolean'),
+    // validateOption(whiteScreen, 'whiteScreen', 'boolean'),
+    validateOption(beforePushEventList, 'beforePushEventList', 'function'),
+    validateOption(beforeSendData, 'beforeSendData', 'function'),
+    validateOption(timeout, 'timeout', 'number'),
+    validateOption(maxQueueLength, 'maxQueueLength', 'number'),
+    validateOption(checkRecoverInterval, 'checkRecoverInterval', 'number')
+  ]
+
+  return validateList.every(res => !!res)
+}
+
+/**
+ * 验证必填项
+ * @param options 入参对象
+ */
+function _validateMustFill(options: InitOptions) {
+  const validateList = [
+    validateOptionMustFill(options.appName, 'appName'),
+    validateOptionMustFill(options.dsn, 'dsn')
+  ]
+
+  return validateList.every(res => !!res)
+}
+
+/**
+ * 验证必填项
+ * @param target 属性值
+ * @param targetName 属性名
+ * @returns 是否通过验证
+ */
+function validateOptionMustFill(target: any, targetName: string): boolean {
+  if (isEmpty(target)) {
+    logError(`【${targetName}】参数必填`)
+    return false
+  }
+  return true
+}
+
+/**
+ * 验证选项的类型是否符合要求
+ * @param target 源对象
+ * @param targetName 对象名
+ * @param expectType 期望类型
+ * @returns 是否通过验证
+ */
+function validateOption(
+  target: any,
+  targetName: string,
+  expectType: string
+): boolean | void {
+  if (!target || typeofAny(target) === expectType) return true
+  logError(
+    `TypeError:【${targetName}】期望传入${expectType}类型，目前是${typeofAny(
+      target
+    )}类型`
+  )
+  return false
+}
+
+/**
+ * 验证选项的类型 - 针对数组内容类型的验证
+ * @param target 源对象
+ * @param targetName 对象名
+ * @param expectTypes 期望类型
+ * @returns 是否通过验证
+ */
+function validateOptionArray(
+  target: any[] | undefined,
+  targetName: string,
+  expectTypes: string[]
+): boolean | void {
+  if (!target) return true
+  let pass = true
+
+  target.forEach(item => {
+    if (!expectTypes.includes(typeofAny(item))) {
+      logError(
+        `TypeError:【${targetName}】数组内的值期望传入${expectTypes.join(
+          '|'
+        )}类型，目前值${item}是${typeofAny(item)}类型`
+      )
+      pass = false
+    }
+  })
+
+  return pass
+}
+
+export let options: ObserverValue<InternalOptions>
+
+/**
+ * 初始化参数
+ * @param initOptions 原始参数
+ * @returns 是否初始化成功
+ */
+export function initOptions(initOptions: InitOptions): boolean {
+  // 必传校验 && 入参类型校验
+  if (!_validateMustFill(initOptions) || !_validateInitOption(initOptions))
+    return false
+
+  options = ref(new Options(initOptions))
+  _support.options = options
+  return true
+}

package/src/lib/performance.ts

@@ -0,0 +1,302 @@
+import { sendData } from './sendData'
+import { eventBus } from './eventBus'
+import { EVENTTYPES, SEDNEVENTTYPES, SENDID } from '../common'
+import { AnyObj } from '../types'
+import {
+  on,
+  getLocationHref,
+  normalizeObj,
+  isValidKey,
+  sendReaconImageList,
+  getTimestamp
+} from '../utils'
+import { _global, _support } from '../utils/global'
+import { options } from './options'
+
+// 兼容判断
+const supported = {
+  performance: !!_global.performance,
+  getEntriesByType: !!(
+    _global.performance && _global.performance.getEntriesByType
+  ),
+  PerformanceObserver: 'PerformanceObserver' in _global,
+  MutationObserver: 'MutationObserver' in _global,
+  PerformanceNavigationTiming: 'PerformanceNavigationTiming' in _global
+}
+
+// 资源属性
+const performanceEntryAttrs = {
+  initiatorType: '',
+  transferSize: 0,
+  encodedBodySize: 0,
+  decodedBodySize: 0,
+  duration: 0,
+  redirectStart: 0,
+  redirectEnd: 0,
+  startTime: 0,
+  fetchStart: 0,
+  domainLookupStart: 0,
+  domainLookupEnd: 0,
+  connectStart: 0,
+  connectEnd: 0,
+  requestStart: 0,
+  responseStart: 0,
+  responseEnd: 0,
+  workerStart: 0
+}
+
+/**
+ * 发送页面追踪资源加载性能数据
+ * (支持getEntriesByType的情况下才追踪)
+ */
+function traceResourcePerformance(performance: PerformanceObserverEntryList) {
+  // 排除xmlhttprequest类型,服务器有响应便会记录,包括404的请求,转由http-request模块负责记录请求数据,区分请求状态
+  // 同时也会排除一些其他类型,比如在引入一个script后会触发一次性能监控,它的类型是beacon,这一次的要排除
+  const observerTypeList = ['img', 'script', 'link', 'audio', 'video', 'css']
+
+  const entries = performance.getEntriesByType(
+    'resource'
+  ) as PerformanceResourceTiming[]
+  const records: any[] = []
+
+  entries.forEach(entry => {
+    // initiatorType含义：通过某种方式请求的资源,例如script,link..
+    const { initiatorType = '' } = entry
+
+    // 只记录observerTypeList中列出的资源类型请求,不在列表中则跳过
+    if (observerTypeList.indexOf(initiatorType.toLowerCase()) < 0) return
+
+    // sdk内部 img 发送请求的错误不会记录
+    if (sendReaconImageList.length) {
+      const index = sendReaconImageList.findIndex(
+        item => item.src === entry.name
+      )
+
+      if (index !== -1) {
+        sendReaconImageList.splice(index, 1)
+        return
+      }
+    }
+
+    const value: AnyObj = {}
+    Object.keys(performanceEntryAttrs).forEach(attr => {
+      if (isValidKey(attr, entry)) {
+        value[attr] = entry[attr]
+      }
+    })
+
+    records.push(
+      normalizeObj({
+        ...value,
+        eventType: SEDNEVENTTYPES.PERFORMANCE,
+        eventId: SENDID.RESOURCE,
+        requestUrl: entry.name,
+        triggerTime: getTimestamp(),
+        triggerPageUrl: getLocationHref()
+      })
+    )
+  })
+
+  if (records.length) sendData.emit(records)
+  return records
+}
+
+let mutationObserver: MutationObserver | null = null
+let performanceObserver: PerformanceObserver | null = null
+
+/**
+ * 监听 - 异步插入的script、link、img, DOM更新操作记录
+ */
+function observeSourceInsert() {
+  const tags = ['img', 'script', 'link']
+  // 检测异步插入的script、link、img,会有一些延迟,一些连接建立、包体大小的数据会丢失,精度下降
+  // MutationObserver DOM3 Events规范,是个异步监听,只有在全部DOM操作完成之后才会调用callback
+  mutationObserver = new MutationObserver(mutationsList => {
+    for (let i = 0; i < mutationsList.length; i += 1) {
+      const startTime = getTimestamp()
+      const { addedNodes = [] } = mutationsList[i]
+      addedNodes.forEach((node: Node & { src?: string; href?: string }) => {
+        const { nodeName } = node
+        if (tags.indexOf(nodeName.toLowerCase()) !== -1) {
+          on(node as Document, EVENTTYPES.LOAD, function () {
+            sendData.emit(
+              normalizeObj({
+                eventType: SEDNEVENTTYPES.PERFORMANCE,
+                eventId: SENDID.RESOURCE,
+                requestUrl: node.src || node.href,
+                duration: getTimestamp() - startTime,
+                triggerTime: getTimestamp(),
+                triggerPageUrl: getLocationHref()
+              })
+            )
+          })
+          on(node as Document, EVENTTYPES.ERROR, function () {
+            sendData.emit(
+              normalizeObj({
+                eventType: SEDNEVENTTYPES.PERFORMANCE,
+                eventId: SENDID.RESOURCE,
+                requestUrl: node.src || node.href,
+                responseStatus: 'error',
+                duration: getTimestamp() - startTime,
+                triggerTime: getTimestamp(),
+                triggerPageUrl: getLocationHref()
+              })
+            )
+          })
+        }
+      })
+    }
+  })
+  mutationObserver.observe(_global.document, {
+    subtree: true, // 目标以及目标的后代改变都会观察
+    childList: true // 表示观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
+    // attributes: true, // 观察属性变动
+    // attributeFilter: ['src', 'href'] // 要观察的属性
+  })
+  // observer.disconnect()
+}
+
+/**
+ * 发送页面性能数据
+ */
+function observeNavigationTiming() {
+  const times: AnyObj = {}
+  const { performance } = _global
+  let t: any = performance.timing
+
+  times.fmp = 0 // 首屏时间 (渲染节点增量最大的时间点)
+  if (supported.getEntriesByType) {
+    const paintEntries = performance.getEntriesByType('paint')
+    if (paintEntries.length) {
+      times.fmp = paintEntries[paintEntries.length - 1].startTime
+    }
+
+    // 优先使用 navigation v2  https://www.w3.org/TR/navigation-timing-2/
+    if (supported.PerformanceNavigationTiming) {
+      const nt2Timing = performance.getEntriesByType('navigation')[0]
+      if (nt2Timing) t = nt2Timing
+    }
+  }
+
+  // 从开始发起这个页面的访问开始算起,减去重定向跳转的时间,在performanceV2版本下才进行计算
+  // v1版本的fetchStart是时间戳而不是相对于访问起始点的相对时间
+  if (times.fmp && supported.PerformanceNavigationTiming) {
+    times.fmp -= t.fetchStart
+  }
+
+  // 白屏时间 (从请求开始到浏览器开始解析第一批HTML文档字节的时间差)
+  // times.fpt = t.responseEnd - t.fetchStart;
+
+  times.tti = t.domInteractive - t.fetchStart // 首次可交互时间
+
+  times.ready = t.domContentLoadedEventEnd - t.fetchStart // HTML加载完成时间
+
+  times.loadon = t.loadEventStart - t.fetchStart // 页面完全加载时间
+
+  times.firstbyte = t.responseStart - t.domainLookupStart // 首包时间
+
+  times.dns = t.domainLookupEnd - t.domainLookupStart // dns查询耗时
+
+  times.appcache = t.domainLookupStart - t.fetchStart // dns缓存时间
+
+  times.tcp = t.connectEnd - t.connectStart // tcp连接耗时
+
+  times.ttfb = t.responseStart - t.requestStart // 请求响应耗时
+
+  times.trans = t.responseEnd - t.responseStart // 内容传输耗时
+
+  times.dom = t.domInteractive - t.responseEnd // dom解析耗时
+
+  times.res = t.loadEventStart - t.domContentLoadedEventEnd // 同步资源加载耗时
+
+  times.ssllink = t.connectEnd - t.secureConnectionStart // SSL安全连接耗时
+
+  times.redirect = t.redirectEnd - t.redirectStart // 重定向时间
+
+  times.unloadTime = t.unloadEventEnd - t.unloadEventStart // 上一个页面的卸载耗时
+
+  const resultInfo = { ...times, triggerPageUrl: getLocationHref() }
+
+  _support.firstScreen = { ...resultInfo }
+
+  sendData.emit(
+    normalizeObj({
+      ...resultInfo,
+      eventType: SEDNEVENTTYPES.PERFORMANCE,
+      eventId: SENDID.PAGE
+    })
+  )
+}
+
+/**
+ * 页面资源加载性能数据
+ */
+function observeResource() {
+  if (supported.performance && options.value.performance.firstResource) {
+    observeNavigationTiming()
+  }
+
+  if (supported.performance && options.value.performance.core) {
+    traceResourcePerformance(_global.performance)
+
+    if (supported.PerformanceObserver) {
+      // 监听异步资源加载性能数据 chrome≥52
+      performanceObserver = new PerformanceObserver(traceResourcePerformance)
+      performanceObserver.observe({ entryTypes: ['resource'] })
+    } else if (supported.MutationObserver) {
+      // 监听资源、DOM更新操作记录 chrome≥26 ie≥11
+      observeSourceInsert()
+    }
+  }
+}
+
+function initPerformance() {
+  if (
+    !options.value.performance.firstResource &&
+    !options.value.performance.core
+  )
+    return
+
+  // 初始化方法可能在onload事件之后才执行,此时不会触发load事件了 (例如delayInit)
+  // 检查document.readyState属性来判断onload事件是否会被触发
+  if (document.readyState === 'complete') {
+    observeResource()
+  } else {
+    eventBus.addEvent({
+      type: EVENTTYPES.LOAD,
+      callback: () => {
+        observeResource()
+      }
+    })
+  }
+}
+
+/**
+ * 主动触发性能事件上报
+ * @param options 自定义配置信息
+ */
+function handleSendPerformance(options = {}, flush = false) {
+  const record = {
+    ...options,
+    triggerTime: getTimestamp(),
+    triggerPageUrl: getLocationHref(),
+    eventType: SEDNEVENTTYPES.PERFORMANCE
+  }
+  sendData.emit(normalizeObj(record), flush)
+}
+
+/**
+ * 销毁性能监听
+ */
+export function destroyPerformance() {
+  if (mutationObserver) {
+    mutationObserver.disconnect()
+    mutationObserver = null
+  }
+  if (performanceObserver) {
+    performanceObserver.disconnect()
+    performanceObserver = null
+  }
+}
+
+export { initPerformance, handleSendPerformance }