web-tracing-core 2.1.0 → 2.1.1

package/__test__/recordscreen.spec.ts

@@ -1,50 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-import http from 'http'
-
-import { getServerURL, startServer, launchPuppeteer, getHtml } from './utils'
-import { Browser, Page } from 'puppeteer'
-
-describe('err', () => {
-  vi.setConfig({ testTimeout: 30_000, hookTimeout: 30_000 })
-
-  let code: string
-  let serverURL: string
-  let server: http.Server
-  let browser: Browser
-
-  beforeAll(async () => {
-    server = await startServer(3031)
-    serverURL = getServerURL(server)
-    browser = await launchPuppeteer()
-
-    const bundlePath = path.resolve(__dirname, '../dist/index.iife.js')
-    code = fs.readFileSync(bundlePath, 'utf8')
-  })
-
-  afterAll(async () => {
-    browser && (await browser.close())
-    server && server.close()
-  })
-
-  async function loadTestPage() {
-    const page: Page = await browser.newPage()
-    const htmlName = 'recordscreen.html'
-    await page.goto(`${serverURL}/${htmlName}`)
-    const html = getHtml(`${htmlName}`, code)
-    await page.setContent(html)
-    await page.waitForFunction(() => {
-      return document.readyState === 'complete'
-    })
-    return page
-  }
-
-  it('error recordscreen should be captured correctly', async () => {
-    const page = await loadTestPage()
-    await page.click('.code-error-button')
-    const webTracingData = await page.evaluate(`window.__WebTracingData__`)
-    expect(
-      (webTracingData as any).eventInfo[0].recordscreen
-    ).not.toBeUndefined()
-  })
-})

package/__test__/utils/index.ts

@@ -1,99 +0,0 @@
-import path from 'path'
-import http from 'http'
-import url from 'url'
-import fs from 'fs'
-import puppeteer from 'puppeteer'
-
-interface IMimeType {
-  [key: string]: string
-}
-
-export function startServer(defaultPort = 3030) {
-  return new Promise<http.Server>((resolve, reject) => {
-    const mimeType: IMimeType = {
-      '.html': 'text/html',
-      '.js': 'text/javascript',
-      '.css': 'text/css',
-      '.png': 'image/png'
-    }
-
-    const s = http.createServer((req, res) => {
-      const parsedUrl = url.parse(req.url!)
-      const sanitizePath = path
-        .normalize(parsedUrl.pathname!)
-        .replace(/^(\.\.[/\\])+/, '')
-      const pathname = path.join(__dirname, '../', sanitizePath)
-
-      try {
-        const data = fs.readFileSync(pathname)
-        const ext = path.parse(pathname).ext
-        res.setHeader('Content-type', mimeType[ext] || 'text/plain')
-        res.setHeader('Access-Control-Allow-Origin', '*')
-        res.setHeader('Access-Control-Allow-Methods', 'GET')
-        res.setHeader('Access-Control-Allow-Headers', 'Content-type')
-        setTimeout(() => {
-          res.end(data)
-        }, 100)
-      } catch (error) {
-        res.end()
-      }
-    })
-    s.listen(defaultPort)
-      .on('listening', () => {
-        resolve(s)
-      })
-      .on('error', e => {
-        reject(e)
-      })
-  })
-}
-
-export function getServerURL(server: http.Server): string {
-  const address = server.address()
-  if (address && typeof address !== 'string') {
-    return `http://localhost:${address.port}`
-  } else {
-    return `${address}`
-  }
-}
-
-export function replaceLast(str: string, find: string, replace: string) {
-  const index = str.lastIndexOf(find)
-  if (index === -1) {
-    return str
-  }
-  return str.substring(0, index) + replace + str.substring(index + find.length)
-}
-
-export async function launchPuppeteer(
-  options?: Parameters<(typeof puppeteer)['launch']>[0]
-) {
-  return await puppeteer.launch({
-    headless: true,
-    defaultViewport: {
-      width: 1920,
-      height: 1080
-    },
-    args: ['--no-sandbox'],
-    ...options
-  })
-}
-
-export function getHtml(fileName: string, code: string) {
-  const filePath = path.resolve(__dirname, `../html/${fileName}`)
-  const html = fs.readFileSync(filePath, 'utf8')
-  return replaceLast(
-    html,
-    '</body>',
-    `
-  <script>
-    ${code}
-  </script>
-  </body>
-  `
-  )
-}
-
-export function delay(timeout: number) {
-  return new Promise(resolve => setTimeout(resolve, timeout))
-}

package/__test__/utils/pollify.ts

@@ -1,14 +0,0 @@
-export type PromiseRejectionEventInit = {
-  promise: Promise<any>
-  reason: any
-}
-
-export class PromiseRejectionEvent extends Event {
-  public readonly reason: any
-  public readonly promise: Promise<any>
-  constructor(type: string, eventInitDict: PromiseRejectionEventInit) {
-    super(type)
-    this.promise = eventInitDict.promise
-    this.reason = eventInitDict.reason
-  }
-}

package/__test__/utils.spec.ts

@@ -1,18 +0,0 @@
-import { getNodeXPath } from '../src/utils/element'
-
-describe('utils', () => {
-  it('getNodeXPath should work', () => {
-    const element = document.createElement('div')
-    element.innerHTML = `
-      <div id="wrapper">
-        <div></div>
-        <div></div>
-        <div>
-          <div class="target"></div>
-        </div>
-      </div>
-    `
-    const target = element.querySelector('.target')!
-    expect(getNodeXPath(target)).toBe('#wrapper>div>div')
-  })
-})

package/dist/package.json

@@ -1,49 +0,0 @@
-{
-  "name": "web-tracing-core",
-  "version": "2.1.0",
-  "description": "基于 JS 跨平台插件，为前端项目提供【 埋点、行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段",
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "jsdelivr": "./index.iife.min.js",
-  "types": "./index.d.ts",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "import": "./index.mjs",
-      "require": "./index.cjs",
-      "types": "./index.d.ts"
-    },
-    "./*": "./*"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/M-cheng-web/web-tracing.git",
-    "directory": "packages/core"
-  },
-  "author": "M-cheng-web <https://github.com/M-cheng-web>",
-  "keywords": [
-    "埋点",
-    "性能",
-    "异常",
-    "性能采集",
-    "异常采集",
-    "前端埋点",
-    "前端性能采集"
-  ],
-  "dependencies": {
-    "ua-parser-js": "2.0.0-alpha.1",
-    "@types/pako": "^2.0.0",
-    "pako": "^2.1.0",
-    "js-base64": "^3.7.5",
-    "rrweb": "2.0.0-alpha.5"
-  },
-  "devDependencies": {
-    "@types/ua-parser-js": "^0.7.36"
-  },
-  "bugs": {
-    "url": "https://github.com/M-cheng-web/web-tracing/issues"
-  },
-  "homepage": "https://github.com/M-cheng-web/web-tracing#readme",
-  "unpkg": "./index.iife.min.js"
-}

package/index.ts

@@ -1,75 +0,0 @@
-import type { InitOptions } from './src/types'
-import { initReplace, destroyReplace } from './src/lib/replace'
-import { initOptions, options as _options } from './src/lib/options'
-import { initBase } from './src/lib/base'
-import { initSendData, sendData } from './src/lib/sendData'
-import { initLineStatus } from './src/lib/line-status'
-import { initError, parseError, destroyError } from './src/lib/err'
-import { initEvent, destroyEvent } from './src/lib/event'
-import { initHttp, destroyHttp } from './src/lib/http'
-import { initPerformance, destroyPerformance } from './src/lib/performance'
-import { initPv, destroyPv } from './src/lib/pv'
-import {
-  initIntersection,
-  destroyIntersection
-} from './src/lib/intersectionObserver'
-import { _global } from './src/utils/global'
-import { SENDID } from './src/common'
-import { logError } from './src/utils/debug'
-import { initRecordScreen, destroyRecordScreen } from './src/lib/recordscreen'
-import * as exportMethods from './src/lib/exportMethods'
-import './src/observer/index'
-
-function init(options: InitOptions): void {
-  if (_global.__webTracingInit__) return
-  if (!initOptions(options)) return
-
-  // 注册全局
-  initReplace()
-  initBase()
-  initSendData()
-  initLineStatus()
-
-  // 注册各个业务
-  initError()
-  initEvent()
-  initHttp()
-  initPerformance()
-  initPv()
-  initIntersection()
-
-  if (_options.value.recordScreen) initRecordScreen()
-
-  _global.__webTracingInit__ = true
-}
-
-/**
- * 销毁SDK添加的事件监听器，不会影响用户手动添加的监听器
- */
-function destroyTracing(): void {
-  destroyEvent()
-  destroyError()
-  destroyHttp()
-  destroyPerformance()
-  destroyIntersection()
-  destroyRecordScreen()
-  destroyPv()
-  destroyReplace()
-  if (sendData) sendData.destroy()
-
-  // 重置全局状态，确保重新初始化时能正常工作
-  _global.__webTracingInit__ = false
-}
-
-export {
-  init,
-  destroyTracing,
-  InitOptions,
-  logError,
-  parseError,
-  SENDID,
-  exportMethods,
-  _options as options
-}
-export * from './src/lib/exportMethods'
-export default { init, destroyTracing, ...exportMethods, options: _options }

package/src/common/config.ts

@@ -1,13 +0,0 @@
-import { name, version } from '../../package.json'
-
-export const DEVICE_KEY = '_webtracing_device_id' // 设备ID Key - 私有属性
-
-export const SESSION_KEY = '_webtracing_session_id' // 会话ID Key(一个站点只允许运行一个埋点程序) - 私有属性
-
-export const SURVIVIE_MILLI_SECONDS = 1800000 // 会话 session存活时长(30minutes) - 私有属性
-
-export const SDK_LOCAL_KEY = '_webtracing_localization_key' // 事件本地化的key
-
-export const SDK_VERSION = version
-
-export const SDK_NAME = name

package/src/common/constant.ts

@@ -1,57 +0,0 @@
-/**
- * 事件类型
- */
-export enum EVENTTYPES {
-  ERROR = 'error',
-  CONSOLEERROR = 'consoleError',
-  UNHANDLEDREJECTION = 'unhandledrejection',
-  CLICK = 'click',
-  LOAD = 'load',
-  BEFOREUNLOAD = 'beforeunload',
-  FETCH = 'fetch',
-  XHROPEN = 'xhr-open',
-  XHRSEND = 'xhr-send',
-  HASHCHANGE = 'hashchange',
-  HISTORYPUSHSTATE = 'history-pushState',
-  HISTORYREPLACESTATE = 'history-replaceState',
-  POPSTATE = 'popstate',
-  READYSTATECHANGE = 'readystatechange',
-  ONLINE = 'online',
-  OFFLINE = 'offline'
-}
-
-/**
- * 触发的事件是什么类型 - eventType
- */
-export enum SEDNEVENTTYPES {
-  PV = 'pv', // 路由跳转
-  PVDURATION = 'pv-duration', // 页面停留事件
-  ERROR = 'error', // 错误
-  PERFORMANCE = 'performance', // 资源
-  CLICK = 'click', // 点击
-  DWELL = 'dwell', // 页面卸载
-  CUSTOM = 'custom', // 手动触发事件
-  INTERSECTION = 'intersection' // 曝光采集
-}
-
-/**
- * 触发的事件id - eventID
- */
-export enum SENDID {
-  PAGE = 'page', // 页面
-  RESOURCE = 'resource', // 资源
-  SERVER = 'server', // 请求
-  CODE = 'code', // code
-  REJECT = 'reject', // reject
-  CONSOLEERROR = 'console.error' // console.error
-}
-
-/**
- * 网页的几种加载方式
- */
-export const WEBPAGELOAD: Record<number, string> = {
-  0: 'navigate', // 网页通过点击链接,地址栏输入,表单提交,脚本操作等方式加载
-  1: 'reload', // 网页通过“重新加载”按钮或者location.reload()方法加载
-  2: 'back_forward', // 网页通过“前进”或“后退”按钮加载
-  255: 'reserved' // 任何其他来源的加载
-}

package/src/common/index.ts

@@ -1,2 +0,0 @@
-export * from './config'
-export * from './constant'

package/src/lib/base.ts

@@ -1,129 +0,0 @@
-import { DEVICE_KEY, SDK_VERSION } from '../common'
-import { _support, getGlobal, isTestEnv } from '../utils/global'
-import { load } from '../utils/fingerprintjs'
-import { getCookieByName, uuid } from '../utils'
-import { getSessionId } from '../utils/session'
-import { options } from './options'
-import { getIPs } from '../utils/getIps'
-import { AnyObj } from '../types'
-import { computed } from '../observer'
-import type { ObserverValue } from '../observer/types'
-import { sendData } from './sendData'
-
-interface Device {
-  clientHeight: number
-  clientWidth: number
-  colorDepth: number
-  pixelDepth: number
-  screenWidth: number
-  screenHeight: number
-  deviceId: string
-  vendor: string
-  platform: string
-}
-interface Base extends Device {
-  userUuid: string
-  sdkUserUuid: string
-  ext: AnyObj
-  appName: string
-  appCode: string
-  pageId: string
-  sessionId: string
-  sdkVersion: string
-  ip: string
-}
-
-export class BaseInfo {
-  public base: ObserverValue<Base> | undefined
-  public pageId: string
-  private sdkUserUuid = ''
-  private device: Device | undefined
-  // 基础信息是否初始化成功
-  public _initSuccess = false
-
-  constructor() {
-    this.pageId = uuid() // 当前应用ID，在整个页面生命周期内不变，单页应用路由变化也不会改变；加载SDK时创建且只创建一次
-
-    this.initSdkUserUuid()
-      .then(() => {
-        this.initDevice()
-        this.initBase()
-      })
-      .finally(() => {
-        this._initSuccess = true
-        sendData.emit([])
-      })
-  }
-  private initDevice() {
-    const { screen } = getGlobal()
-    const { clientWidth, clientHeight } = document.documentElement
-    const { width, height, colorDepth, pixelDepth } = screen
-    let deviceId = getCookieByName(DEVICE_KEY)
-    if (!deviceId) {
-      deviceId = `t_${uuid()}`
-      document.cookie = `${DEVICE_KEY}=${deviceId};path=/;`
-    }
-    this.device = {
-      clientHeight, // 网页可见区高度
-      clientWidth, // 网页可见区宽度
-      colorDepth, // 显示屏幕调色板的比特深度
-      pixelDepth, // 显示屏幕的颜色分辨率
-      deviceId, // id
-      screenWidth: width, // 显示屏幕的宽度
-      screenHeight: height, // 显示屏幕的高度
-      vendor: navigator.vendor, // 浏览器名称
-      platform: navigator.platform // 浏览器平台的环境,不是电脑系统的x64这样的(浏览器平台的环境可能是x32)
-    }
-  }
-  /**
-   * 初始化 base 数据
-   */
-  private initBase() {
-    // 与一般业务上理解的sessionId做区分,此session与业务无关,单纯就是浏览器端和后端直接的联系
-    const sessionId = getSessionId()
-    let ip = ''
-
-    this.base = computed<Base>(() => ({
-      ...this.device!,
-      userUuid: options.value.userUuid,
-      sdkUserUuid: this.sdkUserUuid,
-      ext: options.value.ext,
-      appName: options.value.appName,
-      appCode: options.value.appCode,
-      pageId: this.pageId,
-      sessionId,
-      sdkVersion: SDK_VERSION,
-      ip
-    }))
-
-    !isTestEnv &&
-      getIPs().then((res: any) => {
-        this.base!.value.ip = res[0]
-        ip = res[0]
-      })
-  }
-  /**
-   * 初始化sdk中给用户的唯一标识
-   */
-  private initSdkUserUuid() {
-    return isTestEnv
-      ? Promise.resolve().then(() => {
-          this.sdkUserUuid = 'unit-test-id'
-          options.value.sdkUserUuid = 'unit-test-id'
-        })
-      : load({})
-          .then((fp: any) => fp.get())
-          .then((result: any) => {
-            const visitorId = result.visitorId
-            this.sdkUserUuid = visitorId
-            options.value.sdkUserUuid = visitorId
-          })
-  }
-}
-
-export let baseInfo: BaseInfo
-
-export function initBase() {
-  baseInfo = new BaseInfo()
-  _support.baseInfo = baseInfo
-}

package/src/lib/err-batch.ts

@@ -1,134 +0,0 @@
-import { sendData } from './sendData'
-import { AnyFun } from '../types'
-import { debounce, throttle, groupArray } from '../utils'
-
-const SETTIMEA = 2000
-const SETTIMEB = 20000
-const MAXLENGTHA = 5
-const GROUPARRAYKEY = ['errMessage', 'eventId', 'requestUrl']
-
-/**
- * 判断是否为批量错误
- * 判断流程:
- * 1. 先把所有错误都放入 a栈
- * 2. 每次发生错误后防抖 2s查 a栈是否有批量错误(批量错误: errMessage、errType相同且发生个数大于等于5)
- *     1. 如果为批量错误则合并这些错误并加入[时间区间参数、发生个数参数]后放入 b栈
- *     2. 不为批量错误则发送这些错误
- * 3. 每次推入错误到b栈后延迟 20s查 b栈并发送这些错误
- * 4. 在这个过程中，如果用户关闭了网页，会统一把 a栈、b栈内的数据发送
- * 5. 在这个过程中，a栈每满50个错误也会强制触发a栈和b栈的错误处理（处理结果为直接发送批量错误）
- */
-class BatchError {
-  cacheErrorA: any[]
-  cacheErrorB: any[]
-  throttleProxyAddCacheErrorA: AnyFun
-  throttleProxyAddCacheErrorB: AnyFun
-  constructor() {
-    this.cacheErrorA = []
-    this.cacheErrorB = []
-    this.throttleProxyAddCacheErrorA = debounce(
-      this.proxyAddCacheErrorA,
-      SETTIMEA
-    )
-    this.throttleProxyAddCacheErrorB = throttle(
-      this.proxyAddCacheErrorB,
-      SETTIMEB
-    )
-  }
-  proxyAddCacheErrorA() {
-    let len = this.cacheErrorA.length
-    if (!len) return
-    const arr = groupArray(this.cacheErrorA, ...GROUPARRAYKEY)
-    const arrA = arr.filter(item => item.length < MAXLENGTHA)
-    const arrB = arr.filter(item => item.length >= MAXLENGTHA)
-
-    if (arrA.length) {
-      sendData.emit(arrA.flat(Infinity))
-    }
-    if (arrB.length) {
-      const arrBsum: any[] = []
-      arrB.forEach(item => {
-        const sumItem = item[0]
-        sumItem.batchError = true
-        sumItem.batchErrorLength = item.length
-        sumItem.batchErrorLastHappenTime = item[item.length - 1].triggerTime
-        arrBsum.push(sumItem)
-      })
-      this.cacheErrorB.push(...arrBsum)
-      this.throttleProxyAddCacheErrorB()
-    }
-
-    while (len--) {
-      this.cacheErrorA.shift()
-    }
-  }
-  proxyAddCacheErrorB() {
-    let len = this.cacheErrorB.length
-    if (!len) return
-    const arr = groupArray(this.cacheErrorB, ...GROUPARRAYKEY)
-
-    while (len--) {
-      this.cacheErrorB.shift()
-    }
-
-    // 将区间报错合并
-    const emitList: any[] = []
-    arr.forEach((itemList: any[]) => {
-      const sumItem = itemList[0]
-      if (itemList.length > 1) {
-        sumItem.batchErrorLength = itemList.reduce(
-          (p, item) => (p += item.batchErrorLength),
-          0
-        )
-        sumItem.batchErrorLastHappenTime =
-          itemList[itemList.length - 1].triggerTime
-      }
-      emitList.push(sumItem)
-    })
-    sendData.emit(emitList)
-  }
-  /**
-   * 获取所有的错误
-   * 用户突然关闭页面时调用此方法集成错误
-   */
-  sendAllCacheError() {
-    const errInfoList = this.cacheErrorA.concat(this.cacheErrorB)
-    const arr = groupArray(errInfoList, ...GROUPARRAYKEY)
-    const arrA = arr.filter(item => item.length < MAXLENGTHA)
-    const arrB = arr.filter(item => item.length >= MAXLENGTHA)
-
-    if (arrA.length) {
-      sendData.emit(arrA.flat(Infinity), true)
-    }
-    if (arrB.length) {
-      const arrBsum: any[] = []
-      arrB.forEach(item => {
-        const sumItem = item[0]
-        sumItem.batchError = true
-        sumItem.batchErrorLength = item.length
-        sumItem.batchErrorLastHappenTime = item[item.length - 1].triggerTime
-        arrBsum.push(sumItem)
-      })
-      sendData.emit(arrBsum, true)
-    }
-  }
-  pushCacheErrorA(errorInfo: any) {
-    this.cacheErrorA.push(errorInfo)
-    this.throttleProxyAddCacheErrorA()
-
-    // 每 50 个触发一次强制发送事件
-    if (this.cacheErrorA.length >= 50) {
-      this.proxyAddCacheErrorA()
-      this.proxyAddCacheErrorB()
-    }
-  }
-}
-
-export let batchError: BatchError
-
-/**
- * 初始化错误缓存
- */
-export function initBatchError() {
-  batchError = new BatchError()
-}