web-tracing-core 2.1.0 → 2.1.1

package/{dist/index.mjs → index.mjs}

@@ -1,3 +1,14 @@
+if (typeof window === "undefined" && typeof global !== "undefined") {
+  global.window = global;
+  global.self = global;
+  if (!global.requestAnimationFrame) {
+    global.requestAnimationFrame = (callback) => setTimeout(callback, 0);
+  }
+  if (!global.cancelAnimationFrame) {
+    global.cancelAnimationFrame = (id) => clearTimeout(id);
+  }
+}
+
 function isType(type) {
   return function(value) {
     return Object.prototype.toString.call(value) === `[object ${type}]`;
@@ -18,7 +29,7 @@ function isEmpty(wat) {
 }
 
 const isBrowserEnv = isWindow(typeof window !== "undefined" ? window : 0);
-const isElectronEnv = !!window?.process?.versions?.electron;
+const isElectronEnv = typeof window !== "undefined" && !!window.process?.versions?.electron;
 const isTestEnv = typeof navigator !== "undefined" && navigator.userAgent.includes("jsdom") || // @ts-expect-error: jsdom
 typeof window !== "undefined" && window.jsdom;
 function getGlobal() {
@@ -677,6 +688,8 @@ function uuid() {
   return `${guid.slice(0, 8)}-${guid.slice(8, 16)}-${guid.slice(16)}`;
 }
 function getCookieByName(name) {
+  if (typeof document === "undefined")
+    return void 0;
   const result = document.cookie.match(new RegExp(`${name}=([^;]+)(;|$)`));
   return result ? result[1] : void 0;
 }
@@ -760,7 +773,7 @@ const arrayFilter = Array.prototype.filter || function filterPolyfill(fn) {
 function filter(arr, fn) {
   return arrayFilter.call(arr, fn);
 }
-const nextTime = window.requestIdleCallback || window.requestAnimationFrame || ((callback) => setTimeout(callback, 17));
+const nextTime = typeof window !== "undefined" && window.requestIdleCallback || typeof window !== "undefined" && window.requestAnimationFrame || ((callback) => setTimeout(callback, 17));
 function isObjectOverSizeLimit(object, limitInKB) {
   const serializedObject = JSON.stringify(object);
   const sizeInBytes = new TextEncoder().encode(serializedObject).length;
@@ -809,7 +822,7 @@ function off(target, eventName, handler, opitons = false) {
   target.removeEventListener(eventName, handler, opitons);
 }
 
-var version$1 = "2.1.0";
+var version$1 = "2.1.1";
 
 const DEVICE_KEY = "_webtracing_device_id";
 const SESSION_KEY = "_webtracing_session_id";
@@ -2832,7 +2845,9 @@ function refreshSession() {
 function getSessionId() {
   return getCookieByName(SESSION_KEY) || refreshSession();
 }
-refreshSession();
+if (typeof document !== "undefined") {
+  refreshSession();
+}
 
 function is_ipv4(d) {
   return regex_v4.test(d);
@@ -15677,7 +15692,11 @@ class Intersection {
     sendData.emit({
       eventType: SEDNEVENTTYPES.INTERSECTION,
       triggerPageUrl: getLocationHref(),
-      ...targetObj
+      threshold: targetObj.threshold,
+      observeTime: targetObj.observeTime,
+      showTime: targetObj.showTime,
+      showEndTime: targetObj.showEndTime,
+      params: targetObj.params
     });
   }
   /**

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "web-tracing-core",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "基于 JS 跨平台插件，为前端项目提供【 埋点、行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "jsdelivr": "./dist/index.iife.min.js",
-  "types": "./dist/index.d.ts",
+  "main": "./index.mjs",
+  "module": "./index.mjs",
+  "jsdelivr": "./index.iife.min.js",
+  "types": "./index.d.ts",
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "import": "./index.mjs",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
     },
     "./*": "./*"
   },
@@ -45,5 +45,5 @@
     "url": "https://github.com/M-cheng-web/web-tracing/issues"
   },
   "homepage": "https://github.com/M-cheng-web/web-tracing#readme",
-  "unpkg": "./dist/index.iife.min.js"
+  "unpkg": "./index.iife.min.js"
 }

package/__test__/css/performance.css

@@ -1,3 +0,0 @@
-#web-tracing-test-id {
-  color: red;
-}

package/__test__/err-batch.spec.ts

@@ -1,47 +0,0 @@
-import { init } from '../index'
-import { _support } from '../src/utils/global'
-
-describe('err', () => {
-  beforeAll(() => {
-    init({
-      dsn: 'http://unit-test.com',
-      appName: 'unit-test',
-      error: true,
-      recordScreen: false,
-      scopeError: true
-    })
-  })
-
-  function proxyEmit() {
-    const testResult = { error: null, spy: vi.fn() }
-    _support.sendData.emit = (e: any) => {
-      testResult.spy()
-      testResult.error = e
-    }
-    return testResult
-  }
-
-  it('batch error should be captured correctly', () => {
-    const testResult = proxyEmit()
-    for (let i = 0; i < 50; i++) {
-      const errorEvent = new window.ErrorEvent('error', {
-        filename: 'test.js',
-        lineno: 10,
-        colno: 20,
-        error: new Error('code error')
-      })
-      window.dispatchEvent(errorEvent)
-    }
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.error).toMatchObject([
-      {
-        line: 10,
-        col: 20,
-        eventId: 'code',
-        eventType: 'error',
-        errMessage: 'code error',
-        batchError: true
-      }
-    ])
-  })
-})

package/__test__/err.spec.ts

@@ -1,82 +0,0 @@
-import { init } from '../index'
-import { _support } from '../src/utils/global'
-import { PromiseRejectionEvent } from './utils/pollify'
-
-describe('err', () => {
-  beforeAll(() => {
-    init({
-      dsn: 'http://unit-test.com',
-      appName: 'unit-test',
-      error: true,
-      recordScreen: false,
-      ignoreErrors: [/^ignore/]
-    })
-  })
-
-  function proxyEmit() {
-    const testResult = { error: null, spy: vi.fn() }
-    _support.sendData.emit = (e: any) => {
-      testResult.spy()
-      testResult.error = e
-    }
-    return testResult
-  }
-
-  it('code error should be captured correctly', () => {
-    const testResult = proxyEmit()
-    const errorEvent = new window.ErrorEvent('error', {
-      filename: 'test.js',
-      lineno: 10,
-      colno: 20,
-      error: new Error('code error')
-    })
-    window.dispatchEvent(errorEvent)
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.error).toMatchObject({
-      line: 10,
-      col: 20,
-      eventId: 'code',
-      eventType: 'error',
-      errMessage: 'code error'
-    })
-  })
-
-  it('unhandledrejection error should be captured correctly', () => {
-    const testResult = proxyEmit()
-    const errorEvent = new PromiseRejectionEvent('unhandledrejection', {
-      reason: 'unhandledrejection error',
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      promise: Promise.reject('unhandledrejection error').catch(() => {})
-    })
-    window.dispatchEvent(errorEvent)
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.error).toMatchObject({
-      eventId: 'reject',
-      eventType: 'error',
-      errMessage: 'unhandledrejection error'
-    })
-  })
-
-  it('console error should be captured correctly', () => {
-    const testResult = proxyEmit()
-    console.error('console error')
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.error).toMatchObject({
-      eventId: 'console.error',
-      eventType: 'error',
-      errMessage: 'console error'
-    })
-  })
-
-  it('option ignoreErrors should work', () => {
-    const testResult = proxyEmit()
-    const errorEvent = new window.ErrorEvent('error', {
-      filename: 'test.js',
-      lineno: 10,
-      colno: 20,
-      error: new Error('ignore error')
-    })
-    window.dispatchEvent(errorEvent)
-    expect(testResult.spy).toHaveBeenCalledTimes(0)
-  })
-})

package/__test__/event.spec.ts

@@ -1,62 +0,0 @@
-import { init } from '../index'
-import { _support, _global } from '../src/utils/global'
-import { JSDOM } from 'jsdom'
-
-describe('err', () => {
-  beforeAll(() => {
-    const dom = new JSDOM(`
-      <!DOCTYPE html>
-      <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Test</title>
-      </head>
-      <body>
-        <div
-          data-warden-title="test-title"
-          data-warden-event-id="test-event-id"
-        >
-          <div data-warden-id="test-warden-id">
-            <button id="btn">test</button>
-          </div>
-        </div>
-      </body>
-      </html>
-    `)
-    // @ts-expect-error: expected
-    _global.document = dom.window.document
-    init({
-      dsn: 'http://unit-test.com',
-      appName: 'unit-test',
-      event: true,
-      recordScreen: false
-    })
-  })
-
-  function proxyEmit() {
-    const testResult = { info: null, spy: vi.fn() }
-    _support.sendData.emit = (e: any) => {
-      testResult.spy()
-      testResult.info = e
-    }
-    return testResult
-  }
-
-  it('event should be captured correctly', async () => {
-    const testResult = proxyEmit()
-
-    const button = document.getElementById('btn')!
-    button.click()
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.info).toMatchObject({
-      eventId: 'test-event-id',
-      eventType: 'click',
-      title: 'test-title',
-      elementPath: 'div',
-      params: {
-        id: 'test-warden-id'
-      }
-    })
-  })
-})

package/__test__/html/performance.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>performance test</title>
-  </head>
-
-  <body>
-    <div>
-      <div>Performance 异步加载资源</div>
-      <button class="script-button" onclick="performanceAddScript()">插入正确Script</button>
-      <button class="link-button" id="web-tracing-test-id" onclick="performanceAddLink()" >插入Link</button>
-      <button class="img-button" onclick="performanceAddImg()">插入Img</button>
-      <div id="performance-img-div"></div>
-    </div>
-  </body>
-
-  <script>
-    WebTracing.init({
-      dsn: 'http://1.15.224.10:22/trackweb/tra',
-      appName: 'cxh',
-      performance: true,
-      userUuid: 'init_userUuid',
-      cacheMaxLength: 1,
-      cacheWatingTime: 0,
-      beforeSendData(data) {
-        window.__WebTracingData__ = data
-        return false
-      }
-    })
-
-    function performanceAddScript() {
-      const script = document.createElement("script");
-      script.src = "http://localhost:3030/js/performance.js";
-      document.head.appendChild(script);
-    }
-    
-    function performanceAddLink() {
-      const link = document.createElement("link");
-      link.type = "text/css";
-      link.rel = "stylesheet";
-      link.href = "http://localhost:3030/css/performance.css";
-      document.head.appendChild(link);
-    }
-    function performanceAddImg() {
-      const img = new Image();
-      img.addEventListener('load', function() {
-        const div = document.getElementById("performance-img-div");
-        div.style = "width: 400px; height: 400px; overflow: hidden;";
-        div.appendChild(img);
-      }, false);
-      img.src = `http://localhost:3030/img/performance.png`;
-    }
-  </script>
-</html>

package/__test__/html/recordscreen.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>recordscreen test</title>
-  </head>
-
-  <body>
-    <div>
-      <div>recordscreen</div>
-      <button class="code-error-button" onclick="codeError()">
-        代码错误
-      </button>
-    </div>
-  </body>
-
-  <script>
-    WebTracing.init({
-      dsn: 'http://1.15.224.10:22/trackweb/tra',
-      appName: 'cxh',
-      userUuid: 'init_userUuid',
-      cacheMaxLength: 1,
-      cacheWatingTime: 0,
-      error: true,
-      recordscreen: true,
-      beforeSendData(data) {
-        window.__WebTracingData__ = data
-        return false
-      }
-    })
-
-    function codeError() {
-      const a = {}
-      a.split('/')
-    }
-  </script>
-</html>

package/__test__/http.spec.ts

@@ -1,143 +0,0 @@
-import { init } from '../index'
-import { _support } from '../src/utils/global'
-import express from 'express'
-import http from 'http'
-
-const port = 7889
-let server: http.Server
-
-describe('err', () => {
-  beforeAll(() => {
-    init({
-      dsn: 'http://unit-test.com',
-      appName: 'unit-test',
-      error: true,
-      recordScreen: false,
-      performance: {
-        core: false,
-        server: true
-      }
-    })
-
-    const app = express()
-    app.all('*', function (_, req, next) {
-      req.header('Access-Control-Allow-Origin', '*')
-      req.header('Access-Control-Allow-Headers', 'Content-Type')
-      req.header('Access-Control-Allow-Methods', '*')
-      req.header('Content-Type', 'application/json;charset=utf-8')
-      next()
-    })
-    app.post('/setList', (req, res) => {
-      res.send({
-        code: 200,
-        meaage: '设置成功'
-      })
-    })
-    server && server.close()
-    server = app.listen(port)
-  })
-
-  afterAll(() => {
-    server.close()
-  })
-
-  function proxyEmit() {
-    const testResult: any = { info: [], spy: vi.fn() }
-    _support.sendData.emit = (e: any) => {
-      testResult.spy()
-      testResult.info.push(e)
-    }
-    return testResult
-  }
-
-  function sendRequest(url: string, type: 'xhr' | 'fetch' = 'xhr') {
-    const body = { username: 'example', password: '123456' }
-    return type === 'xhr'
-      ? new Promise(resolve => {
-          const xhr = new XMLHttpRequest()
-          xhr.open('post', url)
-          xhr.setRequestHeader('content-type', 'application/json')
-          xhr.send(JSON.stringify(body))
-          xhr.onreadystatechange = function () {
-            if (xhr.readyState === 4) {
-              resolve(xhr.responseText)
-            }
-          }
-        })
-      : fetch(url, {
-          method: 'POST',
-          body: JSON.stringify(body),
-          headers: {
-            'Content-Type': 'application/json'
-          }
-        })
-  }
-
-  it('xhr error should be captured correctly', async () => {
-    const testResult = proxyEmit()
-    await sendRequest(`http://localhost:${port}/invalid-url`)
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.info).toMatchObject([
-      {
-        errMessage: 'Not Found',
-        eventId: 'server',
-        eventType: 'error',
-        params: '{"username":"example","password":"123456"}',
-        recordscreen: null,
-        requestMethod: 'post',
-        requestType: 'xhr',
-        responseStatus: 404
-      }
-    ])
-  })
-
-  it('xhr performance should be captured correctly', async () => {
-    const testResult = proxyEmit()
-    await sendRequest(`http://localhost:${port}/setList`)
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.info).toMatchObject([
-      {
-        eventId: 'server',
-        eventType: 'performance',
-        params: '{"username":"example","password":"123456"}',
-        requestMethod: 'post',
-        requestType: 'xhr',
-        responseStatus: 200
-      }
-    ])
-  })
-
-  it('fetch error should be captured correctly', async () => {
-    const testResult = proxyEmit()
-    await sendRequest(`http://localhost:${port}/invalid-url`, 'fetch')
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.info).toMatchObject([
-      {
-        errMessage: 'Not Found',
-        eventId: 'server',
-        eventType: 'error',
-        params: '{"username":"example","password":"123456"}',
-        recordscreen: null,
-        requestMethod: 'post',
-        requestType: 'fetch',
-        responseStatus: 404
-      }
-    ])
-  })
-
-  it('fetch performance should be captured correctly', async () => {
-    const testResult = proxyEmit()
-    await sendRequest(`http://localhost:${port}/setList`, 'fetch')
-    expect(testResult.spy).toHaveBeenCalledTimes(1)
-    expect(testResult.info).toMatchObject([
-      {
-        eventId: 'server',
-        eventType: 'performance',
-        params: '{"username":"example","password":"123456"}',
-        requestMethod: 'post',
-        requestType: 'fetch',
-        responseStatus: 200
-      }
-    ])
-  })
-})

package/__test__/js/performance.js

@@ -1,3 +0,0 @@
-;(function WebTracingTest() {
-  window.WebTracingTestVar = true
-})()

package/__test__/performance.spec.ts

@@ -1,112 +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()
-    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()
-  })
-
-  const baseInfo = {
-    appCode: '',
-    appName: 'cxh',
-    clientHeight: 1080,
-    clientWidth: 1920,
-    vendor: 'Google Inc.'
-  }
-
-  async function loadTestPage() {
-    const page: Page = await browser.newPage()
-    const htmlName = 'performance.html'
-    await page.goto(`${serverURL}/${htmlName}`)
-    const html = getHtml(`${htmlName}`, code)
-    await page.setContent(html)
-    await page.waitForFunction(() => {
-      return document.readyState === 'complete'
-    })
-    return page
-  }
-
-  function assertInitiatorType(
-    data: any,
-    initiatorType: 'script' | 'link' | 'img'
-  ) {
-    expect(data).toMatchObject({
-      baseInfo,
-      eventInfo: [
-        {
-          eventId: 'resource',
-          eventType: 'performance',
-          initiatorType: initiatorType
-        }
-      ]
-    })
-  }
-
-  it('firstResource performance should be captured correctly', async () => {
-    const page = await loadTestPage()
-    const webTracingData = (await page.evaluate(
-      `window.__WebTracingData__`
-    )) as any[]
-
-    expect(webTracingData).toMatchObject({
-      baseInfo,
-      eventInfo: [
-        {
-          eventId: 'page',
-          eventType: 'performance'
-        }
-      ]
-    })
-  })
-
-  it('async script performance should be captured correctly', async () => {
-    const page = await loadTestPage()
-    await page.click('.script-button')
-    await page.waitForFunction(() => {
-      return (window as any).WebTracingTestVar !== undefined
-    })
-    const webTracingData = await page.evaluate(`window.__WebTracingData__`)
-    assertInitiatorType(webTracingData, 'script')
-  })
-
-  it('async link performance should be captured correctly', async () => {
-    const page = await loadTestPage()
-    await page.click('.link-button')
-    await page.waitForFunction(() => {
-      const element = document.querySelector('#web-tracing-test-id')!
-      const style = window.getComputedStyle(element)
-      return style.color === 'rgb(255, 0, 0)'
-    })
-    const webTracingData = await page.evaluate(`window.__WebTracingData__`)
-    assertInitiatorType(webTracingData, 'link')
-  })
-
-  it('async img performance should be captured correctly', async () => {
-    const page = await loadTestPage()
-    await page.click('.img-button')
-    await page.waitForSelector('#performance-img-div img')
-    const webTracingData = await page.evaluate(`window.__WebTracingData__`)
-    assertInitiatorType(webTracingData, 'img')
-  })
-})