web-tracing-core 2.1.0

package/src/lib/pv.ts

@@ -0,0 +1,199 @@
+import type { AnyObj } from '../types'
+import { baseInfo } from './base'
+import { sendData } from './sendData'
+import { getLocationHref, getTimestamp } from '../utils'
+import { _global } from '../utils/global'
+import { options } from './options'
+import { eventBus } from './eventBus'
+import { EVENTTYPES, SEDNEVENTTYPES, WEBPAGELOAD } from '../common'
+
+let oldURL = getLocationHref()
+
+/**
+ * 路由Pv采集
+ *
+ * 分为以下几种情况（sdk是兼容vue2以及vue3的，但可能有些部分是取了它们的一些特性的，可能会受到后续它们的更改的影响）
+ * 针对 history/hash 以及 刷新页面/初始加载 的情况获取到的数据进行说明
+ *
+ * 1. 针对普通 html
+ *    1. 初始化项目：不触发这里的钩子，只会触发首次进入页面方法(referer=''、action=navigation)
+ *    2. 手动刷新当前页：不触发这里的钩子，只会触发首次进入页面方法(referer=''、action=reload)
+ *    3. window.history.pushState 时会触发 pushState
+ *    4. window.history.replaceState 时其会触发 replaceState
+ *    5. 手动 更改地址栏地址(或者window.location.href) 时其触发顺序： popstate -> hashchange (history 模式手动更改地址会视为初始化项目)
+ *
+ * 2. 针对 vue2(vue-router)
+ *    1. 手动刷新当前页
+ *       1. history模式：不触发这里的钩子，只会触发首次进入页面方法(referer=''、action=reload)
+ *       2. hash模式：触发首次进入页面的方法(referer=''、action=reload) + replaceState 钩子(referer字段与triggerPageUrl字段相同)
+ *    2. 初始化项目
+ *       1. history模式：不触发这里的钩子，只会触发首次进入页面方法(referer=''、action=navigation)
+ *       2. hash模式：触发首次进入页面的方法(action=reload；referer字段为网址根路径) + replaceState 钩子(action=navigation；referer字段与triggerPageUrl字段相同)
+ *    3. push 时其会触发 pushState (history、hash模式表现相同)
+ *    4. repleace 时其会触发 replaceState (history、hash模式表现相同)
+ *    5. 更改地址栏地址 时其触发顺序： popstate -> hashchange (history 模式手动更改地址会当做刷新页面，什么也不会触发)
+ *    6. 浏览器回退：popstate -> hashchange (history模式只触发 popstate)
+ *
+ * 3. 针对 vue3(vue-router)
+ *    1. 手动刷新当前页
+ *       1. history模式：触发首次进入页面的方法(action=reload；referer字段为空) + replaceState 钩子(action=navigation；referer字段与triggerPageUrl字段相同)
+ *       2. hash模式：触发首次进入页面的方法(action=reload；referer字段为空) + replaceState 钩子(action=navigation；referer字段与triggerPageUrl字段相同)
+ *    2. 初始化项目
+ *       1. history模式：触发首次进入页面的方法(action=navigation；referer字段为空) + replaceState 钩子(action=navigation；referer字段与triggerPageUrl字段相同)
+ *       2. hash模式：触发首次进入页面的方法(action=navigation；referer字段为空) + replaceState 钩子(action=navigation；referer字段与triggerPageUrl字段相同)
+ *    3. push 时其触发顺序： replaceState -> pushState (history、hash模式表现相同)
+ *    4. repleace 时其会触发 replaceState (history、hash模式表现相同)
+ *    5. 更改地址栏地址 时其触发顺序： replaceState -> popstate -> hashchange (history 模式仅触发 replaceState)
+ *    6. 浏览器回退：popstate -> hashchange (history模式只触发 popstate)
+ */
+function initPv() {
+  if (!options.value.pv.core) return
+
+  let lastIsPop = false // 最后一次触发路由变化是否为popState触发
+  let repetitionRoute = false // 在触发 replaceState 后 100ms 内的 pushState 会被无效记录
+
+  sendPageView({ referer: document.referrer }) // 首次进入记录url变化
+
+  eventBus.addEvent({
+    type: EVENTTYPES.HISTORYPUSHSTATE,
+    callback: () => {
+      if (repetitionRoute) return
+      lastIsPop = false
+      sendPageView({ action: 'navigation' })
+    }
+  })
+
+  eventBus.addEvent({
+    type: EVENTTYPES.HISTORYREPLACESTATE,
+    callback: () => {
+      repetitionRoute = true
+      lastIsPop = false
+      sendPageView({ action: 'navigation' })
+      setTimeout(() => {
+        repetitionRoute = false
+      }, 100)
+    }
+  })
+
+  eventBus.addEvent({
+    type: EVENTTYPES.HASHCHANGE,
+    callback: () => {
+      if (repetitionRoute) return
+      if (!lastIsPop) sendPageView()
+      lastIsPop = false
+    }
+  })
+
+  eventBus.addEvent({
+    type: EVENTTYPES.POPSTATE,
+    callback: () => {
+      if (repetitionRoute) return
+      if (_global.location.hash !== '') {
+        const oldHost =
+          oldURL.indexOf('#') > 0 // 多页面情况下 history模式刷新还是在pv页面
+            ? oldURL.slice(0, oldURL.indexOf('#'))
+            : oldURL
+        if (
+          _global.location.href.slice(0, _global.location.href.indexOf('#')) ===
+          oldHost
+        )
+          return
+      }
+      lastIsPop = true
+      sendPageView()
+    }
+  })
+
+  // 在页面卸载时发送页面停留事件
+  eventBus.addEvent({
+    type: EVENTTYPES.BEFOREUNLOAD,
+    callback: () => {
+      const durationTime = getTimestamp() - durationStartTime
+      if (Object.values(lastSendObj).length > 0 && durationTime > 100) {
+        sendData.emit({ ...lastSendObj, durationTime }, true)
+      }
+    }
+  })
+}
+
+let durationStartTime = getTimestamp()
+let lastSendObj: any = {}
+
+/**
+ * 发送数据
+ * 这里会发送路由跳转时间事件 以及 上一个页面停留时间事件
+ */
+function sendPageView(option: AnyObj = {}) {
+  const { referer = oldURL, action, params, title } = option
+  let _action = action
+  if (!_action) {
+    _action = WEBPAGELOAD[performance.navigation.type] || ''
+  }
+
+  // ------------- 发送路由跳转时间事件 -------------
+  // 如果option.title为空,则等待框架处理document.title,延迟17ms
+  // 为什么是17ms?  一秒60Hz是基准,平均1Hz是17毫秒,只要出来了页面那就有 document.title
+  setTimeout(
+    () => {
+      oldURL = getLocationHref()
+      const sendObj = {
+        eventType: SEDNEVENTTYPES.PV,
+        eventId: baseInfo.pageId,
+        triggerPageUrl: getLocationHref(),
+        referer,
+        params,
+        title: title || document.title,
+        action: _action,
+        triggerTime: getTimestamp()
+      }
+      sendData.emit(sendObj)
+
+      // ------------- 发送上一个页面停留时间事件 -------------
+      const durationTime = getTimestamp() - durationStartTime
+      durationStartTime = getTimestamp()
+      if (Object.values(lastSendObj).length > 0 && durationTime > 100) {
+        sendData.emit({ ...lastSendObj, durationTime })
+      }
+      lastSendObj = {
+        ...sendObj,
+        eventType: SEDNEVENTTYPES.PVDURATION
+      }
+    },
+    title ? 0 : 17
+  )
+}
+
+/**
+ * 手动发送数据
+ * @param options 自定义配置信息
+ */
+function handleSendPageView(options: AnyObj = {}, flush = false) {
+  sendData.emit(
+    {
+      referer: oldURL,
+      title: document.title,
+      ...options,
+      eventType: SEDNEVENTTYPES.PV,
+      eventId: baseInfo.pageId,
+      triggerPageUrl: getLocationHref(),
+      triggerTime: getTimestamp()
+    },
+    flush
+  )
+}
+
+/**
+ * 卸载所有页面访问/路由监听
+ */
+export function destroyPv() {
+  // 清除页面访问相关的事件类型
+  eventBus.removeEvents([
+    EVENTTYPES.HISTORYPUSHSTATE,
+    EVENTTYPES.HISTORYREPLACESTATE,
+    EVENTTYPES.HASHCHANGE,
+    EVENTTYPES.POPSTATE,
+    EVENTTYPES.BEFOREUNLOAD
+  ])
+}
+
+export { initPv, handleSendPageView }

package/src/lib/recordscreen.ts

@@ -0,0 +1,169 @@
+import { record } from 'rrweb'
+import pako from 'pako'
+import { Base64 } from 'js-base64'
+import { RecordEventScope } from '../types'
+import { getTimestamp } from '../utils'
+import { options } from './options'
+import { watch } from '../observer'
+
+/**
+ * 只存储最近30s的所有录屏 (分为3段)
+ * 第一段：0-10
+ * 第二段：10-20
+ * 第三段：20-30
+ *
+ * 当结束 30-40 的录屏时会把 0-10 录屏推出，并将此次录屏放入
+ * 数据结构: [
+ *  {scope: '1684826667798-1684826669998', eventList: [...]},
+ *  {scope: '1684826679998-1684826689998', eventList: [...]},
+ *  {scope: '1684826699998-1684826799998', eventList: [...]},
+ * ]
+ *
+ * 举例：当第34秒发生错误时，此时的录屏数组是这样 [
+ *  {scope: '0-10', eventList: [...]},
+ *  {scope: '10-20', eventList: [...]},
+ *  {scope: '20-30', eventList: [...]},
+ *  {scope: '30-40', eventList: [...]},
+ * ]
+ *
+ * 此时30-40的 eventList 还在不断push中，但在错误发生时，我们可以把存住此时的录屏数组
+ * 然后直接去数组的最后一位的 eventList + 最后第二位的 eventList 拼接（会导致视频时长不固定，但会在10-20，如果想缩小范围，可更改 MAXSCOPETIME）
+ * 注意：如果拼接发现 eventList 长度为0或者很少，很大可能是用户没有手动操作且系统自动报错
+ *
+ * 而真正的录屏数组在填满 30-40 的 eventList 时则删除数组第一位数据
+ *
+ * 真实效果：
+ * MAXSCOPETIME 我这边设置为 5s，所以最终录制的时长为 5s-10s
+ * 但是会有几个特殊场景导致录屏时间过短:
+ * 1. 因为录制的插件只会在用户操作网页时运作，当用户停止操作页面或者页面处于休眠状态则会停止记录
+ *  直到用户重新操作页面，所以会出现用户停止操作1分钟后2s后触发了一个错误，此时sdk只会记录这个2s的操作
+ * 2. 另外就是程序刚进来的报错也会导致录屏时间小于5s
+ */
+
+const MAXSCOPETIME = 5000 // 每5s记录一个区间
+const MAXSCOPELENGTH = 3 // 录屏数组最长长度 - 不要小于3
+
+let recordScreen: RecordScreen | undefined
+
+export class RecordScreen {
+  public eventList: RecordEventScope[] = [
+    { scope: `${getTimestamp()}-`, eventList: [] }
+  ]
+  private closeCallback: ReturnType<typeof record>
+
+  constructor() {
+    this.init()
+  }
+  private init() {
+    this.closeCallback = record({
+      emit: (event, isCheckout) => {
+        const lastEvents = this.eventList[this.eventList.length - 1]
+        lastEvents.eventList.push(event)
+        if (isCheckout) {
+          if (this.eventList.length > 0) {
+            this.eventList[this.eventList.length - 1].scope =
+              lastEvents.scope + getTimestamp()
+          }
+          if (this.eventList.length > MAXSCOPELENGTH) {
+            this.eventList.shift()
+          }
+          this.eventList.push({ scope: `${getTimestamp()}-`, eventList: [] })
+        }
+      },
+      recordCanvas: true,
+      checkoutEveryNms: MAXSCOPETIME // 每5s重新制作快照
+    })
+  }
+  public close() {
+    this.closeCallback?.()
+    this.closeCallback = undefined
+  }
+}
+
+export function initRecordScreen() {
+  watch(options, (newValue, oldValue) => {
+    if (newValue.recordScreen === oldValue.recordScreen) return
+
+    if (newValue.recordScreen) recordScreen = new RecordScreen()
+    else {
+      recordScreen?.close()
+      recordScreen = undefined
+    }
+  })
+
+  recordScreen = options.value.recordScreen ? new RecordScreen() : undefined
+}
+
+// 获取录屏数据
+export function getEventList() {
+  return recordScreen?.eventList ?? []
+}
+
+/**
+ * 压缩
+ * @param data 压缩源
+ */
+export function zip(data: any): string {
+  if (!data) return data
+
+  // 判断数据是否需要转为JSON
+  const dataJson =
+    typeof data !== 'string' && typeof data !== 'number'
+      ? JSON.stringify(data)
+      : data
+
+  // 使用Base64.encode处理字符编码，兼容中文
+  const str = Base64.encode(dataJson as string)
+  const binaryString = pako.gzip(str)
+  const arr = Array.from(binaryString)
+  let s = ''
+  arr.forEach((item: number) => {
+    s += String.fromCharCode(item)
+  })
+  return Base64.btoa(s)
+}
+
+/**
+ * 解压
+ * @param b64Data 解压源
+ */
+export function unzip(b64Data: string) {
+  const strData = Base64.atob(b64Data)
+  const charData = strData.split('').map(function (x) {
+    return x.charCodeAt(0)
+  })
+  const binData = new Uint8Array(charData)
+  const data: any = pako.ungzip(binData)
+  // ↓切片处理数据，防止内存溢出报错↓
+  let str = ''
+  const chunk = 8 * 1024
+  let i
+  for (i = 0; i < data.length / chunk; i++) {
+    str += String.fromCharCode.apply(
+      null,
+      data.slice(i * chunk, (i + 1) * chunk)
+    )
+  }
+  str += String.fromCharCode.apply(null, data.slice(i * chunk))
+  // ↑切片处理数据，防止内存溢出报错↑
+  const unzipStr = Base64.decode(str)
+  let result = ''
+  // 对象或数组进行JSON转换
+  try {
+    result = JSON.parse(unzipStr)
+  } catch (error: any) {
+    if (/Unexpected token o in JSON at position 0/.test(error)) {
+      // 如果没有转换成功，代表值为基本数据，直接赋值
+      result = unzipStr
+    }
+  }
+  return result
+}
+
+/**
+ * 卸载录屏监听
+ */
+export function destroyRecordScreen() {
+  recordScreen?.close()
+  recordScreen = undefined
+}