npm - web-tracing-core - Versions diffs - 2.1.1 → 2.1.2 - Mend

web-tracing-core 2.1.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/__test__/css/performance.css +3 -0
package/__test__/err-batch.spec.ts +47 -0
package/__test__/err.spec.ts +82 -0
package/__test__/event.spec.ts +62 -0
package/__test__/html/performance.html +57 -0
package/__test__/html/recordscreen.html +39 -0
package/__test__/http.spec.ts +143 -0
package/__test__/img/performance.png +0 -0
package/__test__/js/performance.js +3 -0
package/__test__/performance.spec.ts +115 -0
package/__test__/recordscreen.spec.ts +50 -0
package/__test__/utils/index.ts +132 -0
package/__test__/utils/pollify.ts +14 -0
package/__test__/utils.spec.ts +18 -0
package/{index.cjs → dist/index.cjs} +1 -1
package/{index.iife.js → dist/index.iife.js} +1 -1
package/{index.iife.min.js → dist/index.iife.min.js} +1 -1
package/{index.mjs → dist/index.mjs} +1 -1
package/dist/package.json +49 -0
package/index.ts +76 -0
package/package.json +9 -9
package/src/common/config.ts +13 -0
package/src/common/constant.ts +57 -0
package/src/common/index.ts +2 -0
package/src/lib/base.ts +129 -0
package/src/lib/err-batch.ts +134 -0
package/src/lib/err.ts +323 -0
package/src/lib/event-dwell.ts +63 -0
package/src/lib/event.ts +252 -0
package/src/lib/eventBus.ts +97 -0
package/src/lib/exportMethods.ts +208 -0
package/src/lib/http.ts +197 -0
package/src/lib/intersectionObserver.ts +169 -0
package/src/lib/line-status.ts +45 -0
package/src/lib/options.ts +325 -0
package/src/lib/performance.ts +302 -0
package/src/lib/pv.ts +199 -0
package/src/lib/recordscreen.ts +169 -0
package/src/lib/replace.ts +371 -0
package/src/lib/sendData.ts +264 -0
package/src/observer/computed.ts +52 -0
package/src/observer/config.ts +1 -0
package/src/observer/dep.ts +21 -0
package/src/observer/index.ts +91 -0
package/src/observer/ref.ts +80 -0
package/src/observer/types.ts +22 -0
package/src/observer/watch.ts +19 -0
package/src/observer/watcher.ts +88 -0
package/src/types/index.ts +126 -0
package/src/utils/debug.ts +17 -0
package/src/utils/element.ts +47 -0
package/src/utils/fingerprintjs.ts +2132 -0
package/src/utils/getIps.ts +127 -0
package/src/utils/global.ts +50 -0
package/src/utils/index.ts +552 -0
package/src/utils/is.ts +78 -0
package/src/utils/localStorage.ts +70 -0
package/src/utils/polyfill.ts +11 -0
package/src/utils/session.ts +29 -0
/package/{LICENSE → dist/LICENSE} +0 -0
/package/{README.md → dist/README.md} +0 -0
/package/{index.d.ts → dist/index.d.ts} +0 -0

package/__test__/css/performance.css ADDED Viewed

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

package/__test__/err-batch.spec.ts ADDED Viewed

@@ -0,0 +1,47 @@
+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 ADDED Viewed

@@ -0,0 +1,82 @@
+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 ADDED Viewed

@@ -0,0 +1,62 @@
+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 ADDED Viewed

@@ -0,0 +1,57 @@
+<!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 ADDED Viewed

@@ -0,0 +1,39 @@
+<!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 ADDED Viewed

@@ -0,0 +1,143 @@
+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__/img/performance.png ADDED Viewed

Binary file

package/__test__/js/performance.js ADDED Viewed

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

package/__test__/performance.spec.ts ADDED Viewed

@@ -0,0 +1,115 @@
+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()
+    await page.waitForFunction(
+      () => (window as any).__WebTracingData__ !== undefined
+    )
+    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')
+  })
+})

package/__test__/recordscreen.spec.ts ADDED Viewed

@@ -0,0 +1,50 @@
+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()
+  })
+})