From 10723f41ab3413769645b4f77bbf9dc651a4e522 Mon Sep 17 00:00:00 2001 From: ziMu-66ccff <3553189793@qq.com> Date: Wed, 13 Dec 2023 16:47:55 +0800 Subject: [PATCH 1/2] fix performance data report --- tracker/src/core/core.ts | 19 ++++++++------ tracker/src/performance/getNT.ts | 20 +++++++-------- tracker/src/performance/getRF.ts | 34 -------------------------- tracker/src/performance/performance.ts | 12 +-------- 4 files changed, 22 insertions(+), 63 deletions(-) diff --git a/tracker/src/core/core.ts b/tracker/src/core/core.ts index b8b0330..29f1a06 100644 --- a/tracker/src/core/core.ts +++ b/tracker/src/core/core.ts @@ -84,14 +84,17 @@ export class Tracker { }); } - public report>(data: T) { - const params = Object.assign(data, { - appId: this.appId, - uid: this.uid, - extra: this.extra, - time: new Date().getTime(), - timeFormat: formatDate(new Date()), - }); + public report>(data: T, type?: string) { + const params = Object.assign( + { data, type: type ?? 'customize' }, + { + appId: this.appId, + uid: this.uid, + extra: this.extra, + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }, + ); const blob = new Blob([JSON.stringify(params)]); navigator.sendBeacon(this.options.requestUrl as string, blob); } diff --git a/tracker/src/performance/getNT.ts b/tracker/src/performance/getNT.ts index b9f340d..7fcd0e1 100644 --- a/tracker/src/performance/getNT.ts +++ b/tracker/src/performance/getNT.ts @@ -42,21 +42,16 @@ export function getNavigationTiming(): PerformanceNavigationTiming { end: responseEnd, value: responseEnd - responseStart, }, - DomParse: { - start: responseEnd, - end: domInteractive, - value: domInteractive - responseEnd, - }, - Res: { - start: domContentLoadedEventEnd, - end: loadEventStart, - value: loadEventStart - domContentLoadedEventEnd, - }, FP: { start: fetchStart, end: responseEnd, value: responseEnd - fetchStart, }, + DomParse: { + start: responseEnd, + end: domInteractive, + value: domInteractive - responseEnd, + }, TTI: { start: fetchStart, end: domInteractive, @@ -67,6 +62,11 @@ export function getNavigationTiming(): PerformanceNavigationTiming { end: domContentLoadedEventEnd, value: domContentLoadedEventEnd - fetchStart, }, + Res: { + start: responseEnd, + end: loadEventStart, + value: loadEventStart - responseEnd, + }, Load: { start: fetchStart, end: loadEventStart, diff --git a/tracker/src/performance/getRF.ts b/tracker/src/performance/getRF.ts index 40f281a..ef7a311 100644 --- a/tracker/src/performance/getRF.ts +++ b/tracker/src/performance/getRF.ts @@ -1,38 +1,4 @@ import { type ResourceFlowTiming } from '@/types/performance'; -// import { observe } from './observe'; - -// export function getResourceFlow(resourceFlow: ResourceFlowTiming[]) { -// const entryHandler = (entry: PerformanceResourceTiming) => { -// const { -// name, -// transferSize, -// initiatorType, -// startTime, -// responseEnd, -// domainLookupEnd, -// domainLookupStart, -// connectStart, -// connectEnd, -// secureConnectionStart, -// responseStart, -// requestStart, -// } = entry; - -// resourceFlow.push({ -// name, -// initiatorType, -// transferSize, -// start: startTime, -// end: responseEnd, -// DNS: domainLookupEnd - domainLookupStart, -// TCP: connectEnd - connectStart, -// SSL: connectEnd - secureConnectionStart, -// TTFB: responseStart - requestStart, -// Trans: responseEnd - requestStart, -// }); -// }; -// return observe('resource', entryHandler); -// } export function getResourceFlow(): ResourceFlowTiming[] { const resouceDatas = performance.getEntriesByType('resource'); diff --git a/tracker/src/performance/performance.ts b/tracker/src/performance/performance.ts index 18e1d73..23868c2 100644 --- a/tracker/src/performance/performance.ts +++ b/tracker/src/performance/performance.ts @@ -80,16 +80,6 @@ export class PerformanceTracker { } private initResourceFlow() { - // const resouceFlow: ResourceFlowTiming[] = []; - // const resouceObserver = getResourceFlow(resouceFlow); - - // const stopListeningAndInitRF = () => { - // if (resouceObserver) resouceObserver.disconnect(); - // this.data[metricsName.RF] = resouceFlow; - // }; - - // afterLoad(stopListeningAndInitRF); - const resouceFlow: ResourceFlowTiming[] = getResourceFlow(); this.data[metricsName.RF] = resouceFlow; } @@ -102,7 +92,7 @@ export class PerformanceTracker { private performanceDataReportHandler() { window.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { - this.report(this.data); + this.report(this.data, 'performance'); } }); } -- Gitee From 60de4342f7f6fafb7a8ef29b781b664e5db549bd Mon Sep 17 00:00:00 2001 From: ziMu-66ccff <3553189793@qq.com> Date: Mon, 18 Dec 2023 16:32:49 +0800 Subject: [PATCH 2/2] add userAction track --- tracker-server/package.json | 3 + tracker-server/pnpm-lock.yaml | 185 +++++++++++++++- tracker-server/src/app.controller.ts | 14 +- tracker-server/src/app.module.ts | 20 +- tracker-server/src/app.service.ts | 91 +++++++- .../src/dto/create-trackedData.dto.ts | 27 +++ tracker-server/src/entities/custom.entity.ts | 24 +++ .../src/entities/hehaviorStack.entity.ts | 41 ++++ .../src/entities/performance.entity.ts | 118 ++++++++++ tracker-server/src/entities/pv.entity.ts | 67 ++++++ .../src/entities/userAction.entity.ts | 157 ++++++++++++++ tracker/index.html | 6 +- tracker/package.json | 6 +- tracker/pnpm-lock.yaml | 21 ++ tracker/src/const/dom.ts | 10 - tracker/src/const/index.ts | 1 - tracker/src/core/core.ts | 90 ++------ .../performance/{getCD.ts => getCacheData.ts} | 0 .../{getNT.ts => getNavigationTiming.ts} | 0 .../{getRF.ts => getResourceFlow.ts} | 0 tracker/src/performance/performance.ts | 70 +++--- tracker/src/types/core/core.ts | 20 +- tracker/src/types/index.ts | 2 + tracker/src/types/performance/performance.ts | 40 ++-- tracker/src/types/userAction/behaviorStack.ts | 13 ++ tracker/src/types/userAction/index.ts | 2 + tracker/src/types/userAction/userAction.ts | 74 +++++++ tracker/src/userAction/behaviorStack.ts | 35 +++ .../src/userAction/getOriginInformation.ts | 8 + tracker/src/userAction/getPageInformation.ts | 53 +++++ tracker/src/userAction/index.ts | 1 + tracker/src/userAction/proxyFetch.ts | 36 ++++ tracker/src/userAction/proxyXmlHttp.ts | 45 ++++ tracker/src/userAction/trackRouterChange.ts | 5 + tracker/src/userAction/userAction.ts | 204 ++++++++++++++++++ .../writePushStateAndReplaceState.ts | 14 ++ tracker/src/utils/index.ts | 3 +- tracker/src/utils/pv.ts | 9 - 38 files changed, 1348 insertions(+), 167 deletions(-) create mode 100644 tracker-server/src/dto/create-trackedData.dto.ts create mode 100644 tracker-server/src/entities/custom.entity.ts create mode 100644 tracker-server/src/entities/hehaviorStack.entity.ts create mode 100644 tracker-server/src/entities/performance.entity.ts create mode 100644 tracker-server/src/entities/pv.entity.ts create mode 100644 tracker-server/src/entities/userAction.entity.ts delete mode 100644 tracker/src/const/dom.ts delete mode 100644 tracker/src/const/index.ts rename tracker/src/performance/{getCD.ts => getCacheData.ts} (100%) rename tracker/src/performance/{getNT.ts => getNavigationTiming.ts} (100%) rename tracker/src/performance/{getRF.ts => getResourceFlow.ts} (100%) create mode 100644 tracker/src/types/userAction/behaviorStack.ts create mode 100644 tracker/src/types/userAction/index.ts create mode 100644 tracker/src/types/userAction/userAction.ts create mode 100644 tracker/src/userAction/behaviorStack.ts create mode 100644 tracker/src/userAction/getOriginInformation.ts create mode 100644 tracker/src/userAction/getPageInformation.ts create mode 100644 tracker/src/userAction/index.ts create mode 100644 tracker/src/userAction/proxyFetch.ts create mode 100644 tracker/src/userAction/proxyXmlHttp.ts create mode 100644 tracker/src/userAction/trackRouterChange.ts create mode 100644 tracker/src/userAction/userAction.ts create mode 100644 tracker/src/userAction/writePushStateAndReplaceState.ts delete mode 100644 tracker/src/utils/pv.ts diff --git a/tracker-server/package.json b/tracker-server/package.json index 8f0e40d..67f3856 100644 --- a/tracker-server/package.json +++ b/tracker-server/package.json @@ -22,9 +22,12 @@ "dependencies": { "@nestjs/common": "^10.0.0", "@nestjs/core": "^10.0.0", + "@nestjs/mapped-types": "*", + "@nestjs/mongoose": "^10.0.2", "@nestjs/platform-express": "^10.0.0", "class-transformer": "^0.5.1", "class-validator": "^0.14.0", + "mongoose": "^8.0.3", "reflect-metadata": "^0.1.13", "rxjs": "^7.8.1" }, diff --git a/tracker-server/pnpm-lock.yaml b/tracker-server/pnpm-lock.yaml index 3922940..aacc6b3 100644 --- a/tracker-server/pnpm-lock.yaml +++ b/tracker-server/pnpm-lock.yaml @@ -11,6 +11,12 @@ dependencies: '@nestjs/core': specifier: ^10.0.0 version: 10.2.10(@nestjs/common@10.2.10)(@nestjs/platform-express@10.2.10)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/mapped-types': + specifier: '*' + version: 2.0.4(@nestjs/common@10.2.10)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13) + '@nestjs/mongoose': + specifier: ^10.0.2 + version: 10.0.2(@nestjs/common@10.2.10)(@nestjs/core@10.2.10)(mongoose@8.0.3)(reflect-metadata@0.1.13)(rxjs@7.8.1) '@nestjs/platform-express': specifier: ^10.0.0 version: 10.2.10(@nestjs/common@10.2.10)(@nestjs/core@10.2.10) @@ -20,6 +26,9 @@ dependencies: class-validator: specifier: ^0.14.0 version: 0.14.0 + mongoose: + specifier: ^8.0.3 + version: 8.0.3 reflect-metadata: specifier: ^0.1.13 version: 0.1.13 @@ -843,6 +852,12 @@ packages: resolution: {integrity: sha512-Z7C/xXCiGWsg0KuKsHTKJxbWhpI3Vs5GwLfOean7MGyVFGqdRgBbAjOCh6u4bbjPc/8MJ2pZmK/0DLdCbivLDA==} engines: {node: '>=8'} + /@mongodb-js/saslprep@1.1.1: + resolution: {integrity: sha512-t7c5K033joZZMspnHg/gWPE4kandgc2OxE74aYOtGKfgB9VPuVJPix0H6fhmm2erj5PBJ21mqcx34lpIGtUCsQ==} + dependencies: + sparse-bitfield: 3.0.3 + dev: false + /@nestjs/cli@10.2.1: resolution: {integrity: sha512-CAJAQwmxFZfB3RTvqz/eaXXWpyU+mZ4QSqfBYzjneTsPgF+uyOAW3yQpaLNn9Dfcv39R9UxSuAhayv6yuFd+Jg==} engines: {node: '>= 16.14'} @@ -937,6 +952,41 @@ packages: transitivePeerDependencies: - encoding + /@nestjs/mapped-types@2.0.4(@nestjs/common@10.2.10)(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13): + resolution: {integrity: sha512-xl+gUSp0B+ln1VSNoUftlglk8dfpUes3DHGxKZ5knuBxS5g2H/8p9/DSBOYWUfO5f4u9s6ffBPZ71WO+tbe5SA==} + peerDependencies: + '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 + class-transformer: ^0.4.0 || ^0.5.0 + class-validator: ^0.13.0 || ^0.14.0 + reflect-metadata: ^0.1.12 + peerDependenciesMeta: + class-transformer: + optional: true + class-validator: + optional: true + dependencies: + '@nestjs/common': 10.2.10(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) + class-transformer: 0.5.1 + class-validator: 0.14.0 + reflect-metadata: 0.1.13 + dev: false + + /@nestjs/mongoose@10.0.2(@nestjs/common@10.2.10)(@nestjs/core@10.2.10)(mongoose@8.0.3)(reflect-metadata@0.1.13)(rxjs@7.8.1): + resolution: {integrity: sha512-ITHh075DynjPIaKeJh6WkarS21WXYslu4nrLkNPbWaCP6JfxVAOftaA2X5tPSiiE/gNJWgs+QFWsfCFZUUenow==} + peerDependencies: + '@nestjs/common': ^8.0.0 || ^9.0.0 || ^10.0.0 + '@nestjs/core': ^8.0.0 || ^9.0.0 || ^10.0.0 + mongoose: ^6.0.2 || ^7.0.0 || ^8.0.0 + reflect-metadata: ^0.1.12 + rxjs: ^7.0.0 + dependencies: + '@nestjs/common': 10.2.10(class-transformer@0.5.1)(class-validator@0.14.0)(reflect-metadata@0.1.13)(rxjs@7.8.1) + '@nestjs/core': 10.2.10(@nestjs/common@10.2.10)(@nestjs/platform-express@10.2.10)(reflect-metadata@0.1.13)(rxjs@7.8.1) + mongoose: 8.0.3 + reflect-metadata: 0.1.13 + rxjs: 7.8.1 + dev: false + /@nestjs/platform-express@10.2.10(@nestjs/common@10.2.10)(@nestjs/core@10.2.10): resolution: {integrity: sha512-U4KDgtMjH8TqEvt0RzC/POP8ABvL9bYoCScvlGtFSKgVGaMLBKkZ4+jHtbQx6qItYSlBBRUuz/dveMZCObfrkQ==} peerDependencies: @@ -1216,7 +1266,6 @@ packages: resolution: {integrity: sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==} dependencies: undici-types: 5.26.5 - dev: true /@types/qs@6.9.10: resolution: {integrity: sha512-3Gnx08Ns1sEoCrWssEgTSJs/rsT2vhGP+Ja9cnnk9k4ALxinORlQneLXFeFKOTJMOeZUFD1s7w+w2AphTpvzZw==} @@ -1265,6 +1314,17 @@ packages: /@types/validator@13.11.7: resolution: {integrity: sha512-q0JomTsJ2I5Mv7dhHhQLGjMvX0JJm5dyZ1DXQySIUzU1UlwzB8bt+R6+LODUbz0UDIOvEzGc28tk27gBJw2N8Q==} + /@types/webidl-conversions@7.0.3: + resolution: {integrity: sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==} + dev: false + + /@types/whatwg-url@8.2.2: + resolution: {integrity: sha512-FtQu10RWgn3D9U4aazdwIE2yzphmTJREDqNdODHrbrZmmMqI0vMheC/6NE/J1Yveaj8H+ela+YwWTjq5PGmuhA==} + dependencies: + '@types/node': 20.10.3 + '@types/webidl-conversions': 7.0.3 + dev: false + /@types/yargs-parser@21.0.3: resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==} dev: true @@ -1872,6 +1932,11 @@ packages: node-int64: 0.4.0 dev: true + /bson@6.2.0: + resolution: {integrity: sha512-ID1cI+7bazPDyL9wYy9GaQ8gEEohWvcUl/Yf0dIdutJxnmInEEyCsb4awy/OiBfall7zBA179Pahi3vCdFze3Q==} + engines: {node: '>=16.20.1'} + dev: false + /buffer-from@1.1.2: resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} @@ -2207,7 +2272,6 @@ packages: optional: true dependencies: ms: 2.1.2 - dev: true /dedent@1.5.1: resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==} @@ -3784,6 +3848,11 @@ packages: graceful-fs: 4.2.11 dev: true + /kareem@2.5.1: + resolution: {integrity: sha512-7jFxRVm+jD+rkq3kY0iZDJfsO2/t4BBPeEb2qKn2lR/9KhuksYk5hxzfRYWMPV8P/x2d0kHD306YyWLzjjH+uA==} + engines: {node: '>=12.0.0'} + dev: false + /keyv@4.5.4: resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} dependencies: @@ -3912,6 +3981,10 @@ packages: fs-monkey: 1.0.5 dev: true + /memory-pager@1.5.0: + resolution: {integrity: sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==} + dev: false + /merge-descriptors@1.0.1: resolution: {integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==} @@ -4006,12 +4079,86 @@ packages: dependencies: minimist: 1.2.8 + /mongodb-connection-string-url@2.6.0: + resolution: {integrity: sha512-WvTZlI9ab0QYtTYnuMLgobULWhokRjtC7db9LtcVfJ+Hsnyr5eo6ZtNAt3Ly24XZScGMelOcGtm7lSn0332tPQ==} + dependencies: + '@types/whatwg-url': 8.2.2 + whatwg-url: 11.0.0 + dev: false + + /mongodb@6.2.0: + resolution: {integrity: sha512-d7OSuGjGWDZ5usZPqfvb36laQ9CPhnWkAGHT61x5P95p/8nMVeH8asloMwW6GcYFeB0Vj4CB/1wOTDG2RA9BFA==} + engines: {node: '>=16.20.1'} + peerDependencies: + '@aws-sdk/credential-providers': ^3.188.0 + '@mongodb-js/zstd': ^1.1.0 + gcp-metadata: ^5.2.0 + kerberos: ^2.0.1 + mongodb-client-encryption: '>=6.0.0 <7' + snappy: ^7.2.2 + socks: ^2.7.1 + peerDependenciesMeta: + '@aws-sdk/credential-providers': + optional: true + '@mongodb-js/zstd': + optional: true + gcp-metadata: + optional: true + kerberos: + optional: true + mongodb-client-encryption: + optional: true + snappy: + optional: true + socks: + optional: true + dependencies: + '@mongodb-js/saslprep': 1.1.1 + bson: 6.2.0 + mongodb-connection-string-url: 2.6.0 + dev: false + + /mongoose@8.0.3: + resolution: {integrity: sha512-LJRT0yP4TW14HT4r2RkxqyvoTylMSzWpl5QOeVHTnRggCLQSpkoBdgbUtORFq/mSL2o9cLCPJz+6uzFj25qbHw==} + engines: {node: '>=16.20.1'} + dependencies: + bson: 6.2.0 + kareem: 2.5.1 + mongodb: 6.2.0 + mpath: 0.9.0 + mquery: 5.0.0 + ms: 2.1.3 + sift: 16.0.1 + transitivePeerDependencies: + - '@aws-sdk/credential-providers' + - '@mongodb-js/zstd' + - gcp-metadata + - kerberos + - mongodb-client-encryption + - snappy + - socks + - supports-color + dev: false + + /mpath@0.9.0: + resolution: {integrity: sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==} + engines: {node: '>=4.0.0'} + dev: false + + /mquery@5.0.0: + resolution: {integrity: sha512-iQMncpmEK8R8ncT8HJGsGc9Dsp8xcgYMVSbs5jgnm1lFHTZqMJTUWTDx1LBO8+mK3tPNZWFLBghQEIOULSTHZg==} + engines: {node: '>=14.0.0'} + dependencies: + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: false + /ms@2.0.0: resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} /ms@2.1.2: resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==} - dev: true /ms@2.1.3: resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} @@ -4353,7 +4500,6 @@ packages: /punycode@2.3.1: resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} engines: {node: '>=6'} - dev: true /pure-rand@6.0.4: resolution: {integrity: sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==} @@ -4651,6 +4797,10 @@ packages: get-intrinsic: 1.2.2 object-inspect: 1.13.1 + /sift@16.0.1: + resolution: {integrity: sha512-Wv6BjQ5zbhW7VFefWusVP33T/EM0vYikCaQ2qR8yULbsilAT8/wQaXvuQ3ptGLpoKx+lihJE3y2UTgKDyyNHZQ==} + dev: false + /signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} dev: true @@ -4693,6 +4843,12 @@ packages: engines: {node: '>= 8'} dev: true + /sparse-bitfield@3.0.3: + resolution: {integrity: sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==} + dependencies: + memory-pager: 1.5.0 + dev: false + /sprintf-js@1.0.3: resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==} dev: true @@ -4946,6 +5102,13 @@ packages: /tr46@0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} + /tr46@3.0.0: + resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==} + engines: {node: '>=12'} + dependencies: + punycode: 2.3.1 + dev: false + /tree-kill@1.2.2: resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} hasBin: true @@ -5114,7 +5277,6 @@ packages: /undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} - dev: true /universalify@2.0.1: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} @@ -5198,6 +5360,11 @@ packages: /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} + /webidl-conversions@7.0.0: + resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} + engines: {node: '>=12'} + dev: false + /webpack-node-externals@3.0.0: resolution: {integrity: sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==} engines: {node: '>=6'} @@ -5248,6 +5415,14 @@ packages: - uglify-js dev: true + /whatwg-url@11.0.0: + resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==} + engines: {node: '>=12'} + dependencies: + tr46: 3.0.0 + webidl-conversions: 7.0.0 + dev: false + /whatwg-url@5.0.0: resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} dependencies: diff --git a/tracker-server/src/app.controller.ts b/tracker-server/src/app.controller.ts index 43c5241..d31b7a9 100644 --- a/tracker-server/src/app.controller.ts +++ b/tracker-server/src/app.controller.ts @@ -1,18 +1,13 @@ -import { Body, Controller, Get, Post, Req, Res } from '@nestjs/common'; +import { Controller, Post, Req } from '@nestjs/common'; import { AppService } from './app.service'; -import { Request, Response } from 'express'; +import { Request } from 'express'; @Controller() export class AppController { constructor(private readonly appService: AppService) {} - @Get() - getHello(): string { - return this.appService.getHello(); - } - @Post() - tracker(@Req() request: Request, @Res() response: Response) { + trackedDataReport(@Req() request: Request) { const buffers = []; request.on('data', (chunk) => { buffers.push(chunk); @@ -20,8 +15,7 @@ export class AppController { request.on('end', () => { const bufferData = Buffer.concat(buffers); const data = JSON.parse(bufferData.toString()); - console.log(data); - response.status(200).send('success'); + this.appService.saveTrackedData(data); }); } } diff --git a/tracker-server/src/app.module.ts b/tracker-server/src/app.module.ts index 8662803..253a99d 100644 --- a/tracker-server/src/app.module.ts +++ b/tracker-server/src/app.module.ts @@ -1,9 +1,27 @@ import { Module } from '@nestjs/common'; +import { MongooseModule } from '@nestjs/mongoose'; import { AppController } from './app.controller'; import { AppService } from './app.service'; +import { Performance, PerformanceSchema } from './entities/performance.entity'; +import { UserAction, UserActionSchema } from './entities/userAction.entity'; +import { Custom, CustomSchema } from './entities/custom.entity'; +import { PV, PVSchema } from './entities/pv.entity'; +import { + BehaviorStack, + BehaviorStackSchema, +} from './entities/hehaviorStack.entity'; @Module({ - imports: [], + imports: [ + MongooseModule.forRoot('mongodb://127.0.0.1:27017/ziMuTracker'), + MongooseModule.forFeature([ + { name: Performance.name, schema: PerformanceSchema }, + { name: UserAction.name, schema: UserActionSchema }, + { name: PV.name, schema: PVSchema }, + { name: Custom.name, schema: CustomSchema }, + { name: BehaviorStack.name, schema: BehaviorStackSchema }, + ]), + ], controllers: [AppController], providers: [AppService], }) diff --git a/tracker-server/src/app.service.ts b/tracker-server/src/app.service.ts index 927d7cc..3b40403 100644 --- a/tracker-server/src/app.service.ts +++ b/tracker-server/src/app.service.ts @@ -1,8 +1,95 @@ import { Injectable } from '@nestjs/common'; +import { InjectModel } from '@nestjs/mongoose'; +import { Performance } from './entities/performance.entity'; +import { Model } from 'mongoose'; +import { CreateTrackedDataDto } from './dto/create-trackedData.dto'; +import { UserAction } from './entities/userAction.entity'; +import { Custom } from './entities/custom.entity'; +import { PV } from './entities/pv.entity'; +import { BehaviorStack } from './entities/hehaviorStack.entity'; @Injectable() export class AppService { - getHello(): string { - return 'Hello World!'; + constructor( + @InjectModel(Performance.name) + private readonly PerformanceModel: Model, + @InjectModel(UserAction.name) + private readonly UserActionModel: Model, + @InjectModel(Custom.name) + private readonly CustomModel: Model, + @InjectModel(BehaviorStack.name) + private readonly BehaviorStack: Model, + @InjectModel(PV.name) + private readonly PVModel: Model, + ) {} + + async saveTrackedData(createTrackedDataDto: CreateTrackedDataDto) { + const { type, data, appId, uid, extra, time, timeFormat } = + createTrackedDataDto; + + if (type === 'performance') { + const performanceData = await this.PerformanceModel.create({ + ...data, + extra, + appId, + uid, + time, + timeFormat, + }); + if (performanceData) return console.log('performance data send success'); + else return console.log('performance data sendfail'); + } + + if (type === 'userAction') { + const userActionData = await this.UserActionModel.create({ + ...data, + extra, + appId, + uid, + time, + timeFormat, + }); + if (userActionData) return console.log('userAction data send success'); + else return console.log('userAction data sendfail'); + } + + if (type === 'custom') { + const customData = await this.CustomModel.create({ + data, + extra, + appId, + uid, + time, + timeFormat, + }); + if (customData) return console.log('custom data send success'); + else return console.log('custom data sendfail'); + } + + if (type === 'behaviorStack') { + const behaviorStack = await this.BehaviorStack.create({ + data, + extra, + appId, + uid, + time, + timeFormat, + }); + if (behaviorStack) return console.log('behaviorStack data send success'); + else return console.log('behaviorStack data sendfail'); + } + + if (type === 'PV') { + const PVData = await this.PVModel.create({ + ...data, + extra, + appId, + uid, + time, + timeFormat, + }); + if (PVData) return console.log('PV data send success'); + else return console.log('PV data sendfail'); + } } } diff --git a/tracker-server/src/dto/create-trackedData.dto.ts b/tracker-server/src/dto/create-trackedData.dto.ts new file mode 100644 index 0000000..d600258 --- /dev/null +++ b/tracker-server/src/dto/create-trackedData.dto.ts @@ -0,0 +1,27 @@ +import { IsNotEmpty, IsString } from 'class-validator'; + +export class CreateTrackedDataDto { + @IsString({ message: 'the type of message must be string' }) + @IsNotEmpty({ message: '类型不能为空奥' }) + type: string; + + @IsNotEmpty({ message: '数据不能为空奥' }) + data: Record; + + extra: Record; + + @IsString({ message: 'the type of appId must be string' }) + @IsNotEmpty({ message: 'appId不能为空奥' }) + appId: string; + + @IsString({ message: 'the type of uid must be string' }) + uid: string; + + @IsString({ message: 'the type of time must be number' }) + @IsNotEmpty({ message: 'time不能为空奥' }) + time: number; + + @IsString({ message: 'the type of timeFormat must be string' }) + @IsNotEmpty({ message: 'timeFormat不能为空奥' }) + timeFormat: string; +} diff --git a/tracker-server/src/entities/custom.entity.ts b/tracker-server/src/entities/custom.entity.ts new file mode 100644 index 0000000..e5ccf8a --- /dev/null +++ b/tracker-server/src/entities/custom.entity.ts @@ -0,0 +1,24 @@ +import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose'; + +@Schema() +export class Custom { + @Prop({ type: Object, required: true }) + data: Record; + + @Prop({ type: Object }) + extra: Record; + + @Prop({ type: String, required: true }) + appId: string; + + @Prop(String) + uid: string; + + @Prop({ type: Number, required: true }) + time: number; + + @Prop({ type: String, required: true }) + timeFormat: string; +} + +export const CustomSchema = SchemaFactory.createForClass(Custom); diff --git a/tracker-server/src/entities/hehaviorStack.entity.ts b/tracker-server/src/entities/hehaviorStack.entity.ts new file mode 100644 index 0000000..0f42581 --- /dev/null +++ b/tracker-server/src/entities/hehaviorStack.entity.ts @@ -0,0 +1,41 @@ +import { Prop, Schema, SchemaFactory, raw } from '@nestjs/mongoose'; + +@Schema() +export class BehaviorStack { + @Prop({ + type: [ + raw({ + name: String, + page: String, + value: Object, + time: Number, + timeFormat: String, + }), + ], + required: true, + }) + data: Array<{ + name: string; + page: string; + value: Record; + time: number; + timeFormat: string; + }>; + + @Prop({ type: Object }) + extra: Record; + + @Prop({ type: String, required: true }) + appId: string; + + @Prop(String) + uid: string; + + @Prop({ type: Number, required: true }) + time: number; + + @Prop({ type: String, required: true }) + timeFormat: string; +} + +export const BehaviorStackSchema = SchemaFactory.createForClass(BehaviorStack); diff --git a/tracker-server/src/entities/performance.entity.ts b/tracker-server/src/entities/performance.entity.ts new file mode 100644 index 0000000..c753070 --- /dev/null +++ b/tracker-server/src/entities/performance.entity.ts @@ -0,0 +1,118 @@ +import { Prop, Schema, SchemaFactory, raw } from '@nestjs/mongoose'; + +@Schema() +export class Performance { + @Prop(raw({ name: String, value: Number, rating: String })) + FCP: { + name: string; + value: number; + rating: 'good' | 'needs-improvement' | 'poor'; + }; + + @Prop(raw({ name: String, value: Number, rating: String })) + LCP: { + name: string; + value: number; + rating: 'good' | 'needs-improvement' | 'poor'; + }; + + @Prop(raw({ name: String, value: Number, rating: String })) + FID: { + name: string; + value: number; + rating: 'good' | 'needs-improvement' | 'poor'; + }; + + @Prop(raw({ name: String, value: Number, rating: String })) + CLS: { + name: string; + value: number; + rating: 'good' | 'needs-improvement' | 'poor'; + }; + + @Prop( + raw({ + DNS: raw({ start: Number, end: Number, value: Number }), + SSL: raw({ start: Number, end: Number, value: Number }), + TCP: raw({ start: Number, end: Number, value: Number }), + TTFB: raw({ start: Number, end: Number, value: Number }), + Trans: raw({ start: Number, end: Number, value: Number }), + FP: raw({ start: Number, end: Number, value: Number }), + DomParse: raw({ start: Number, end: Number, value: Number }), + TTI: raw({ start: Number, end: Number, value: Number }), + DomReady: raw({ start: Number, end: Number, value: Number }), + Res: raw({ start: Number, end: Number, value: Number }), + Load: raw({ start: Number, end: Number, value: Number }), + }), + ) + navigationTiming: { + DNS: { start: number; end: number; value: number }; + SSL: { start: number; end: number; value: number }; + TCP: { start: number; end: number; value: number }; + TTFB: { start: number; end: number; value: number }; + Trans: { start: number; end: number; value: number }; + FP: { start: number; end: number; value: number }; + DomParse: { start: number; end: number; value: number }; + TTI: { start: number; end: number; value: number }; + DomReady: { start: number; end: number; value: number }; + Res: { start: number; end: number; value: number }; + Load: { start: number; end: number; value: number }; + }; + + @Prop([ + raw({ + name: String, + initiatorType: String, + transferSize: Number, + start: Number, + end: Number, + DNS: Number, + TCP: Number, + SSL: Number, + TTFB: Number, + Trans: Number, + }), + ]) + 'resource-flow': Array<{ + name: string; + initiatorType: string; + transferSize: number; + start: number; + end: number; + DNS: number; + TCP: number; + SSL: number; + TTFB: number; + Trans: number; + }>; + + @Prop( + raw({ + cacheHitQuantity: Number, + noCacheHitQuantity: Number, + cacheHitRate: String, + }), + ) + 'cache-data': { + cacheHitQuantity: number; + noCacheHitQuantity: number; + cacheHitRate: string; + }; + + @Prop({ type: Object }) + extra: Record; + + @Prop({ type: String, required: true }) + appId: string; + + @Prop(String) + uid: string; + + @Prop({ type: Number, required: true }) + time: number; + + @Prop({ type: String, required: true }) + timeFormat: string; +} + +export const PerformanceSchema = SchemaFactory.createForClass(Performance); diff --git a/tracker-server/src/entities/pv.entity.ts b/tracker-server/src/entities/pv.entity.ts new file mode 100644 index 0000000..f3fc500 --- /dev/null +++ b/tracker-server/src/entities/pv.entity.ts @@ -0,0 +1,67 @@ +import { Prop, Schema, SchemaFactory, raw } from '@nestjs/mongoose'; + +@Schema() +export class PV { + @Prop( + raw({ + href: String, + origin: String, + protocol: String, + host: String, + hostname: String, + port: String, + pathname: String, + search: String, + hash: String, + title: String, + language: String, + userAgent: Object, + winScreen: String, + docScreen: String, + }), + ) + pageInfo: { + href: string; + origin: string; + protocol: string; + host: string; + hostname: string; + port: string; + pathname: string; + search: string; + hash: string; + title: string; + language: string; + userAgent: Record; + winScreen: string; + docScreen: string; + }; + + @Prop([ + raw({ + referrer: String, + type: String, + }), + ]) + originInformation: { + referrer: string; + type: string; + }; + + @Prop({ type: Object }) + extra: Record; + + @Prop({ type: String, required: true }) + appId: string; + + @Prop(String) + uid: string; + + @Prop({ type: Number, required: true }) + time: number; + + @Prop({ type: String, required: true }) + timeFormat: string; +} + +export const PVSchema = SchemaFactory.createForClass(PV); diff --git a/tracker-server/src/entities/userAction.entity.ts b/tracker-server/src/entities/userAction.entity.ts new file mode 100644 index 0000000..b379a70 --- /dev/null +++ b/tracker-server/src/entities/userAction.entity.ts @@ -0,0 +1,157 @@ +import { Prop, Schema, SchemaFactory, raw } from '@nestjs/mongoose'; + +@Schema() +export class UserAction { + @Prop( + raw({ + href: String, + origin: String, + protocol: String, + host: String, + hostname: String, + port: String, + pathname: String, + search: String, + hash: String, + title: String, + language: String, + userAgent: Object, + winScreen: String, + docScreen: String, + }), + ) + 'page-information': { + href: string; + origin: string; + protocol: string; + host: string; + hostname: string; + port: string; + pathname: string; + search: string; + hash: string; + title: string; + language: string; + userAgent: Record; + winScreen: string; + docScreen: string; + }; + + @Prop([ + raw({ + referrer: String, + type: String, + }), + ]) + 'origin-information': { + referrer: string; + type: string; + }; + + @Prop([ + raw({ + jumpType: String, + pageInfo: raw({ + href: String, + origin: String, + protocol: String, + host: String, + hostname: String, + port: String, + pathname: String, + search: String, + hash: String, + title: String, + language: String, + userAgent: Object, + winScreen: String, + docScreen: String, + }), + time: Number, + timeFormat: String, + }), + ]) + 'router-change-record': Array<{ + jumpType: string; + pageInfo: { + href: string; + origin: string; + protocol: string; + host: string; + hostname: string; + port: string; + pathname: string; + search: string; + hash: string; + title: string; + language: string; + userAgent: Record; + winScreen: string; + docScreen: string; + }; + time: number; + timeFormat: string; + }>; + + @Prop({ type: Object }) + 'dom-behavior-record': Record< + string, + Array<{ + tagInfo: { + id: string; + classList: string[]; + tagName: string; + text: string | null; + }; + pageInfo: { + href: string; + origin: string; + protocol: string; + host: string; + hostname: string; + port: string; + pathname: string; + search: string; + hash: string; + title: string; + language: string; + userAgent: Record; + winScreen: string; + docScreen: string; + }; + time: number; + timeFormat: string; + }> + >; + + @Prop({ type: [Object] }) + 'http-record': Array<{ + method: string; + url: string | URL; + body: Document | XMLHttpRequestBodyInit | null | undefined | ReadableStream; + requestTime: number; + requestTimeFormat: string; + responseTime: number; + responseTimeFormat: string; + status: number; + statusText: string; + response?: any; + }>; + + @Prop({ type: Object }) + extra: Record; + + @Prop({ type: String, required: true }) + appId: string; + + @Prop(String) + uid: string; + + @Prop({ type: Number, required: true }) + time: number; + + @Prop({ type: String, required: true }) + timeFormat: string; +} + +export const UserActionSchema = SchemaFactory.createForClass(UserAction); diff --git a/tracker/index.html b/tracker/index.html index 0ebe9b1..9c82fb8 100644 --- a/tracker/index.html +++ b/tracker/index.html @@ -113,7 +113,7 @@
-

网页版权信息

+

网页版权信息

开发者：李文豪

@@ -122,8 +122,8 @@ diff --git a/tracker/package.json b/tracker/package.json index 3a637df..efa96e4 100644 --- a/tracker/package.json +++ b/tracker/package.json @@ -1,6 +1,6 @@ { "name": "zimu-tracker", - "version": "1.0.0", + "version": "1.0.7", "description": "一个前端监控SDK", "files": [ "dist" @@ -37,8 +37,12 @@ "vite": "^5.0.4" }, "dependencies": { + "@types/ua-parser-js": "^0.7.39", + "bowser": "^2.11.0", "eslint-config-prettier": "^9.1.0", "prettier": "^3.1.0", + "ua-parser-js": "^1.0.37", "web-vitals": "^3.5.0" } } + diff --git a/tracker/pnpm-lock.yaml b/tracker/pnpm-lock.yaml index e7aa3ac..f9fc737 100644 --- a/tracker/pnpm-lock.yaml +++ b/tracker/pnpm-lock.yaml @@ -5,12 +5,21 @@ settings: excludeLinksFromLockfile: false dependencies: + '@types/ua-parser-js': + specifier: ^0.7.39 + version: 0.7.39 + bowser: + specifier: ^2.11.0 + version: 2.11.0 eslint-config-prettier: specifier: ^9.1.0 version: 9.1.0(eslint@8.55.0) prettier: specifier: ^3.1.0 version: 3.1.0 + ua-parser-js: + specifier: ^1.0.37 + version: 1.0.37 web-vitals: specifier: ^3.5.0 version: 3.5.0 @@ -434,6 +443,10 @@ packages: resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==} dev: true + /@types/ua-parser-js@0.7.39: + resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==} + dev: false + /@typescript-eslint/eslint-plugin@6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2): resolution: {integrity: sha512-5bQDGkXaxD46bPvQt08BUz9YSaO4S0fB1LB5JHQuXTfkGPI3+UUeS387C/e9jRie5GqT8u5kFTrMvAjtX4O5kA==} engines: {node: ^16.0.0 || >=18.0.0} @@ -676,6 +689,10 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + /bowser@2.11.0: + resolution: {integrity: sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA==} + dev: false + /brace-expansion@1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -2019,6 +2036,10 @@ packages: hasBin: true dev: true + /ua-parser-js@1.0.37: + resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==} + dev: false + /unbox-primitive@1.0.2: resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} dependencies: diff --git a/tracker/src/const/dom.ts b/tracker/src/const/dom.ts deleted file mode 100644 index 8a2797c..0000000 --- a/tracker/src/const/dom.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const MouseEventList: string[] = [ - 'click', - 'dblclick', - 'contextmenu', - 'mousedown', - 'mouseup', - 'mouseenter', - 'mouseout', - 'mouseover', -]; diff --git a/tracker/src/const/index.ts b/tracker/src/const/index.ts deleted file mode 100644 index 43f46bd..0000000 --- a/tracker/src/const/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dom'; diff --git a/tracker/src/core/core.ts b/tracker/src/core/core.ts index 29f1a06..848bee3 100644 --- a/tracker/src/core/core.ts +++ b/tracker/src/core/core.ts @@ -1,7 +1,6 @@ -import { MouseEventList } from '@/const'; import { PerformanceTracker } from '@/performance'; import { TrackerConfig, type Options } from '@/types'; -import { createHistoryEvent } from '@/utils'; +import { UserActionTracker } from '@/userAction'; import { formatDate } from '@/utils/formatDate'; export class Tracker { @@ -12,81 +11,32 @@ export class Tracker { public constructor(appId: string, options?: Options) { this.appId = appId; - this.options = Object.assign(this.initDefaultOptions(), options); + this.options = Object.assign( + { + sdkVersion: TrackerConfig.version, + requestUrl: 'http://localhost:3000', + performanceTracker: true, + userActionTracker: true, + }, + options, + ); + (window as any).ziMuSetUserId = this.setUserId.bind(this); + (window as any).ziMuSetExtra = this.setExtra.bind(this); this.installInnerTracker(); } - private initDefaultOptions(): Options { - window.history.pushState = createHistoryEvent('pushState'); - window.history.replaceState = createHistoryEvent('replaceState'); - - return { - sdkVersion: TrackerConfig.version, - requestUrl: 'http://localhost:3000', - historyTracker: false, - hashTracker: false, - domTracker: false, - errorTracker: false, - performanceTracker: true, - }; - } - private installInnerTracker() { - if (this.options.historyTracker) { - this.captureEvents(['pushState', 'replaceState', 'popstate'], 'history-pv'); - } - if (this.options.hashTracker) { - this.captureEvents(['hashchange'], 'hash-pv'); - } - if (this.options.domTracker) { - this.captureDomTargetKey(); - } - if (this.options.errorTracker) { - this.captureError(); - } if (this.options.performanceTracker) { - new PerformanceTracker(this.report.bind(this)); + new PerformanceTracker(this.options.performanceTracker, this.report.bind(this)); + } + if (this.options.userActionTracker) { + new UserActionTracker(this.options.userActionTracker, this.report.bind(this)); } } - private captureEvents(EventList: string[], targetKey: string, data?: T) { - EventList.forEach((event) => { - window.addEventListener(event, () => { - this.report({ event, targetKey, ...data }); - }); - }); - } - - private captureDomTargetKey() { - MouseEventList.forEach((event) => { - window.addEventListener(event, (e) => { - const element = e.target as HTMLElement; - const targetValue = element.getAttribute('target-key'); - if (targetValue) { - this.report({ event, targetKey: targetValue }); - } - }); - }); - } - - private captureError() { - window.addEventListener('error', (e) => { - this.report({ event: 'error', targetKey: 'error message', message: e.message }); - }); - window.addEventListener('unhandledrejection', (e) => { - e.promise.catch((error) => { - this.report({ - event: 'promise reject', - targetKey: 'reject message', - message: error, - }); - }); - }); - } - - public report>(data: T, type?: string) { + public report>(data: T, type: string) { const params = Object.assign( - { data, type: type ?? 'customize' }, + { data, type }, { appId: this.appId, uid: this.uid, @@ -99,11 +49,11 @@ export class Tracker { navigator.sendBeacon(this.options.requestUrl as string, blob); } - public setUserId(uid: string) { + private setUserId(uid: string) { this.uid = uid; } - public setExtra(extra: Record) { + private setExtra(extra: Record) { this.extra = extra; } } diff --git a/tracker/src/performance/getCD.ts b/tracker/src/performance/getCacheData.ts similarity index 100% rename from tracker/src/performance/getCD.ts rename to tracker/src/performance/getCacheData.ts diff --git a/tracker/src/performance/getNT.ts b/tracker/src/performance/getNavigationTiming.ts similarity index 100% rename from tracker/src/performance/getNT.ts rename to tracker/src/performance/getNavigationTiming.ts diff --git a/tracker/src/performance/getRF.ts b/tracker/src/performance/getResourceFlow.ts similarity index 100% rename from tracker/src/performance/getRF.ts rename to tracker/src/performance/getResourceFlow.ts diff --git a/tracker/src/performance/performance.ts b/tracker/src/performance/performance.ts index 23868c2..cdf6b04 100644 --- a/tracker/src/performance/performance.ts +++ b/tracker/src/performance/performance.ts @@ -1,5 +1,9 @@ import { type Report } from '@/types'; -import { type ResourceFlowTiming, metricsName } from '@/types/performance'; +import { + PerformanceMetricsName, + type ResourceFlowTiming, + type PerformanceOptions, +} from '@/types/performance'; import { onFCP, onCLS, @@ -10,33 +14,38 @@ import { type FIDMetric, type CLSMetric, } from 'web-vitals'; -import { getNavigationTiming } from './getNT'; +import { getNavigationTiming } from './getNavigationTiming'; import { afterLoad } from '@/utils/afterLoad'; -import { getResourceFlow } from './getRF'; -import { getCacheData } from './getCD'; +import { getResourceFlow } from './getResourceFlow'; +import { getCacheData } from './getCacheData'; export class PerformanceTracker { - private readonly data: Record>; + private readonly data: Record>; + private readonly options: PerformanceOptions; private readonly report: Report; - constructor(report: Report) { + constructor(options: true | PerformanceOptions, report: Report) { this.data = {}; + this.options = Object.assign( + { + FCP: true, + LCP: true, + FID: true, + CLS: true, + navigationTiming: true, + resourceFlow: true, + cacheData: true, + }, + options, + ); this.report = report; - this.initFCP(); - this.initLCP(); - this.initFID(); - this.initCLS(); - afterLoad(() => { - this.initNavigationTiming(); - this.initResourceFlow(); - this.initCacheData(); - }); + this.installPerformanceInnerTracker(); this.performanceDataReportHandler(); } private initFCP() { onFCP((metricData: FCPMetric) => { - this.data[metricsName.FCP] = { + this.data[PerformanceMetricsName.FCP] = { name: metricData.name, value: metricData.value, rating: metricData.rating, @@ -46,7 +55,7 @@ export class PerformanceTracker { private initLCP() { onLCP((metricData: LCPMetric) => { - this.data[metricsName.LCP] = { + this.data[PerformanceMetricsName.LCP] = { name: metricData.name, value: metricData.value, rating: metricData.rating, @@ -56,7 +65,7 @@ export class PerformanceTracker { private initFID() { onFID((metricData: FIDMetric) => { - this.data[metricsName.FID] = { + this.data[PerformanceMetricsName.FID] = { name: metricData.name, value: metricData.value, rating: metricData.rating, @@ -66,7 +75,7 @@ export class PerformanceTracker { private initCLS() { onCLS((metricData: CLSMetric) => { - this.data[metricsName.CLS] = { + this.data[PerformanceMetricsName.CLS] = { name: metricData.name, value: metricData.value, rating: metricData.rating, @@ -76,22 +85,35 @@ export class PerformanceTracker { private initNavigationTiming() { const navigationTiming = getNavigationTiming(); - this.data[metricsName.NT] = navigationTiming; + this.data[PerformanceMetricsName.NT] = navigationTiming; } private initResourceFlow() { const resouceFlow: ResourceFlowTiming[] = getResourceFlow(); - this.data[metricsName.RF] = resouceFlow; + this.data[PerformanceMetricsName.RF] = resouceFlow; } private initCacheData() { const cacheData = getCacheData(); - this.data[metricsName.CD] = cacheData; + this.data[PerformanceMetricsName.CD] = cacheData; + } + + private installPerformanceInnerTracker() { + if (this.options.FCP) this.initFCP(); + if (this.options.LCP) this.initLCP(); + if (this.options.FID) this.initFID(); + if (this.options.CLS) this.initCLS(); + + afterLoad(() => { + if (this.options.navigationTiming) this.initNavigationTiming(); + if (this.options.resourceFlow) this.initResourceFlow(); + if (this.options.cacheData) this.initCacheData(); + }); } private performanceDataReportHandler() { - window.addEventListener('visibilitychange', () => { - if (document.visibilityState === 'hidden') { + window.addEventListener('beforeunload', () => { + if (this.data[PerformanceMetricsName.FID]) { this.report(this.data, 'performance'); } }); diff --git a/tracker/src/types/core/core.ts b/tracker/src/types/core/core.ts index f3b5516..b4495d7 100644 --- a/tracker/src/types/core/core.ts +++ b/tracker/src/types/core/core.ts @@ -1,28 +1,18 @@ import { type Tracker } from '@/core'; +import { type UserActionOptions, type PerformanceOptions } from '..'; /** * @param sdkVersion sdk版本 * @param requestUrl 上报数据的接口地址 - * @param historyTracker history上报 - * @param hashTracker hash上报 - * @param domTracker 携带Tracker-key dom元素的各种事件事件上报 - * @param errorTracker js 和 promise 报错异常上报 + * @param userActionTracker 用户行为上报 + * @param performanceTracker: 性能数据上报 */ export interface Options { sdkVersion: string | number; requestUrl: string; - historyTracker: boolean; - hashTracker: boolean; - domTracker: boolean; - errorTracker: boolean; - performanceTracker: boolean; -} - -export interface reportTrackerData { - [key: string]: any; - event: string; - targetKey: string; + userActionTracker: boolean | UserActionOptions; + performanceTracker: boolean | PerformanceOptions; } export enum TrackerConfig { diff --git a/tracker/src/types/index.ts b/tracker/src/types/index.ts index 4b0e041..d4fa5ca 100644 --- a/tracker/src/types/index.ts +++ b/tracker/src/types/index.ts @@ -1 +1,3 @@ export * from './core'; +export * from './performance'; +export * from './userAction'; diff --git a/tracker/src/types/performance/performance.ts b/tracker/src/types/performance/performance.ts index 5aa5d58..db028b4 100644 --- a/tracker/src/types/performance/performance.ts +++ b/tracker/src/types/performance/performance.ts @@ -7,14 +7,24 @@ * @param RF resource-flow */ -export enum metricsName { +export enum PerformanceMetricsName { FCP = 'FCP', LCP = 'LCP', FID = 'FID', CLS = 'CLS', - NT = 'NT', - RF = 'RF', - CD = 'cacheData', + NT = 'navigationTiming', + RF = 'resource-flow', + CD = 'cache-data', +} + +export interface PerformanceOptions { + FCP?: boolean; + LCP?: boolean; + FID?: boolean; + CLS?: boolean; + navigationTiming?: boolean; + resourceFlow?: boolean; + cacheData?: boolean; } /** @@ -32,17 +42,17 @@ export enum metricsName { */ export interface PerformanceNavigationTiming { - DNS?: { start: number; end: number; value: number }; - SSL?: { start: number; end: number; value: number }; - TCP?: { start: number; end: number; value: number }; - TTFB?: { start: number; end: number; value: number }; - Trans?: { start: number; end: number; value: number }; - FP?: { start: number; end: number; value: number }; - DomParse?: { start: number; end: number; value: number }; - TTI?: { start: number; end: number; value: number }; - DomReady?: { start: number; end: number; value: number }; - Res?: { start: number; end: number; value: number }; - Load?: { start: number; end: number; value: number }; + DNS: { start: number; end: number; value: number }; + SSL: { start: number; end: number; value: number }; + TCP: { start: number; end: number; value: number }; + TTFB: { start: number; end: number; value: number }; + Trans: { start: number; end: number; value: number }; + FP: { start: number; end: number; value: number }; + DomParse: { start: number; end: number; value: number }; + TTI: { start: number; end: number; value: number }; + DomReady: { start: number; end: number; value: number }; + Res: { start: number; end: number; value: number }; + Load: { start: number; end: number; value: number }; } export interface ResourceFlowTiming { diff --git a/tracker/src/types/userAction/behaviorStack.ts b/tracker/src/types/userAction/behaviorStack.ts new file mode 100644 index 0000000..1720d84 --- /dev/null +++ b/tracker/src/types/userAction/behaviorStack.ts @@ -0,0 +1,13 @@ +import { type UserActionMetricsName } from '.'; + +export interface BehaviorRecordsOptions { + maxBehaviorRecords: number; +} + +export interface BehaviorStackData { + name: UserActionMetricsName | string; + page: string; + value: Record; + time: number | string; + timeFormat: string; +} diff --git a/tracker/src/types/userAction/index.ts b/tracker/src/types/userAction/index.ts new file mode 100644 index 0000000..3e35f2e --- /dev/null +++ b/tracker/src/types/userAction/index.ts @@ -0,0 +1,2 @@ +export * from './userAction'; +export * from './behaviorStack'; diff --git a/tracker/src/types/userAction/userAction.ts b/tracker/src/types/userAction/userAction.ts new file mode 100644 index 0000000..5fc734b --- /dev/null +++ b/tracker/src/types/userAction/userAction.ts @@ -0,0 +1,74 @@ +export enum UserActionMetricsName { + PI = 'page-information', + OI = 'origin-information', + RCR = 'router-change-record', + DBR = 'dom-behavior-record', + HT = 'http-record', +} + +export interface UserActionOptions { + PI?: boolean; + OI?: boolean; + RCR?: boolean; + DBR?: boolean; + HT?: boolean; + BS?: boolean; + PV?: boolean; + elementTrackedList?: string[]; + classTrackedList?: string[]; + eventTrackedList?: string[]; + maxBehaviorRecords?: number; +} + +/** + * @param href url 例如： http://www.example.com:8080/page?param1=value1¶m2=value2 + * @param origin 页面来源（返回一个包含协议，域名，端口号的字符串） 例如： http://www.example.com:8080 + * @param protocol 协议号 例如 https + * @param host 域名 + 端口号 例如： www.example.com:8080 + * @param hostname 域名 例如：www.example.com + * @param port 端口号 例如 8080 + * @param pathname 路由路径 例如：/page + * @param search 查询字符串 例如 ?param1=value1¶m2=value2 + * @param hash URL 中的片段标识符部分，即 # 及其后的部分。 + * @param title 网页标题 + * @param language 浏览器的语种 (eg:zh) ; 这里截取前两位，有需要也可以不截取 + * @param userAgentData 用户 userAgent 信息 + * @param winScreen 屏幕宽高 (eg:1920x1080) 屏幕宽高意为整个显示屏的宽高 + * @param docScreen 文档宽高 (eg:1388x937) 文档宽高意为当前页面显示的实际宽高（有的同学喜欢半屏显示） + * + */ + +export interface PageInformation { + href: string; + origin: string; + protocol: string; + host: string; + hostname: string; + port: string; + pathname: string; + search: string; + hash: string; + title: string; + language: string; + userAgent: Record; + winScreen: string; + docScreen: string; +} + +export interface OriginInformation { + referrer: string; + type: string; +} + +export interface HttpMetrics { + method: string; + url: string | URL; + body: Document | XMLHttpRequestBodyInit | null | undefined | ReadableStream; + requestTime: number; + requestTimeFormat: string; + responseTime: number; + responseTimeFormat: string; + status: number; + statusText: string; + response?: any; +} diff --git a/tracker/src/userAction/behaviorStack.ts b/tracker/src/userAction/behaviorStack.ts new file mode 100644 index 0000000..0d74329 --- /dev/null +++ b/tracker/src/userAction/behaviorStack.ts @@ -0,0 +1,35 @@ +import { type BehaviorRecordsOptions, type BehaviorStackData } from '@/types'; + +export class BehaviorStack { + private data: BehaviorStackData[]; + private readonly maxBehaviorRecords: number; + + constructor(options: BehaviorRecordsOptions) { + const { maxBehaviorRecords } = options; + this.maxBehaviorRecords = maxBehaviorRecords; + this.data = []; + } + + push(value: BehaviorStackData) { + if (this.length() === this.maxBehaviorRecords) { + this.shift(); + } + this.data.push(value); + } + + shift() { + return this.data.shift(); + } + + length() { + return this.data.length; + } + + get() { + return this.data; + } + + clear() { + this.data = []; + } +} diff --git a/tracker/src/userAction/getOriginInformation.ts b/tracker/src/userAction/getOriginInformation.ts new file mode 100644 index 0000000..2b6aa9a --- /dev/null +++ b/tracker/src/userAction/getOriginInformation.ts @@ -0,0 +1,8 @@ +import { type OriginInformation } from '@/types'; + +export function getOriginInformation(): OriginInformation { + return { + referrer: document.referrer, + type: performance.getEntriesByType('navigation')[0].type, + }; +} diff --git a/tracker/src/userAction/getPageInformation.ts b/tracker/src/userAction/getPageInformation.ts new file mode 100644 index 0000000..bc5e1d5 --- /dev/null +++ b/tracker/src/userAction/getPageInformation.ts @@ -0,0 +1,53 @@ +import { type PageInformation } from '@/types'; +import parser from 'ua-parser-js'; +import Bowser from 'bowser'; + +export function getPageInformation(): PageInformation { + const { host, hostname, href, protocol, origin, port, pathname, search, hash } = window.location; + const { width, height } = window.screen; + const { language, userAgent } = navigator as any; + + return { + host, + hostname, + href, + protocol, + origin, + port, + pathname, + search, + hash, + title: document.title, + language: language.substr(0, 2), + userAgent: resolveUserAgent(userAgent), + winScreen: `${width}x${height}`, + docScreen: `${document.documentElement.clientWidth ?? document.body.clientWidth}x${ + document.documentElement.clientHeight ?? document.body.clientHeight + }`, + }; +} + +function resolveUserAgent(userAgent: string) { + const browserData = Bowser.parse(userAgent); + const parserData = parser(userAgent); + const browserName = browserData.browser.name ?? parserData.browser.name; // 浏览器名 + const browserVersion = browserData.browser.version ?? parserData.browser.version; // 浏览器版本号 + const osName = browserData.os.name ?? parserData.os.name; // 操作系统名 + const osVersion = parserData.os.version ?? browserData.os.version; // 操作系统版本号 + const deviceType = browserData.platform.type ?? parserData.device.type; // 设备类型 + const deviceVendor = browserData.platform.vendor ?? parserData.device.vendor ?? ''; // 设备所属公司 + const deviceModel = browserData.platform.model ?? parserData.device.model ?? ''; // 设备型号 + const engineName = browserData.engine.name ?? parserData.engine.name; // engine名 + const engineVersion = browserData.engine.version ?? parserData.engine.version; // engine版本号 + return { + browserName, + browserVersion, + osName, + osVersion, + deviceType, + deviceVendor, + deviceModel, + engineName, + engineVersion, + }; +} diff --git a/tracker/src/userAction/index.ts b/tracker/src/userAction/index.ts new file mode 100644 index 0000000..3416fd7 --- /dev/null +++ b/tracker/src/userAction/index.ts @@ -0,0 +1 @@ +export * from './userAction'; diff --git a/tracker/src/userAction/proxyFetch.ts b/tracker/src/userAction/proxyFetch.ts new file mode 100644 index 0000000..de973bc --- /dev/null +++ b/tracker/src/userAction/proxyFetch.ts @@ -0,0 +1,36 @@ +import { type HttpMetrics } from '@/types'; +import { formatDate } from '@/utils'; + +export function proxyFetch(loadHandler: (...args: any[]) => any) { + if ('fetch' in window && typeof window.fetch === 'function') { + const oFetch = window.fetch; + if (!(window as any).oFetch) { + (window as any).oFetch = oFetch; + } + (window as any).fetch = async (input: any, init: RequestInit) => { + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + let httpMetrics: HttpMetrics = {} as HttpMetrics; + + httpMetrics.method = init?.method ?? ''; + httpMetrics.url = (input && typeof input !== 'string' ? input?.url : input) || ''; // 请求的url + httpMetrics.body = init?.body ?? ''; + httpMetrics.requestTime = new Date().getTime(); + httpMetrics.responseTimeFormat = formatDate(new Date()); + + // eslint-disable-next-line @typescript-eslint/return-await + return oFetch.call(window, input, init).then(async (response) => { + // clone 出一个新的 response,再用其做.text(),避免 body stream already read 问题 + const res = response.clone(); + httpMetrics = { + ...httpMetrics, + status: res.status, + statusText: res.statusText, + response: JSON.parse(await res.text()), + responseTime: new Date().getTime(), + }; + if (typeof loadHandler === 'function') loadHandler(httpMetrics); + return response; + }); + }; + } +} diff --git a/tracker/src/userAction/proxyXmlHttp.ts b/tracker/src/userAction/proxyXmlHttp.ts new file mode 100644 index 0000000..55024d7 --- /dev/null +++ b/tracker/src/userAction/proxyXmlHttp.ts @@ -0,0 +1,45 @@ +import { type HttpMetrics } from '@/types'; +import { formatDate } from '@/utils'; + +export function proxyXmlHttp(loadHandler: (...args: any[]) => any) { + if ('XMLHttpRequest' in window && typeof window.XMLHttpRequest === 'function') { + const oXMLHttpRequest = window.XMLHttpRequest; + if (!(window as any).oXMLHttpRequest) { + // oXMLHttpRequest 为原生的 XMLHttpRequest，可以用以 SDK 进行数据上报，区分业务 + (window as any).oXMLHttpRequest = oXMLHttpRequest; + } + (window as any).XMLHttpRequest = function () { + // 覆写 window.XMLHttpRequest + // eslint-disable-next-line new-cap + const xhr = new oXMLHttpRequest(); + // eslint-disable-next-line @typescript-eslint/unbound-method + const { open, send } = xhr; + // eslint-disable-next-line @typescript-eslint/consistent-type-assertions + let httpMetrics: HttpMetrics = {} as HttpMetrics; + xhr.open = (method, url) => { + httpMetrics.method = method; + httpMetrics.url = url; + open.call(xhr, method, url, true); + }; + xhr.send = (body) => { + httpMetrics.body = body ?? ''; + httpMetrics.requestTime = new Date().getTime(); + httpMetrics.requestTimeFormat = formatDate(new Date()); + send.call(xhr, body); + }; + xhr.addEventListener('loadend', () => { + const { status, statusText, response } = xhr; + httpMetrics = { + ...httpMetrics, + status, + statusText, + response: JSON.parse(response), + responseTime: new Date().getTime(), + responseTimeFormat: formatDate(new Date()), + }; + if (typeof loadHandler === 'function') loadHandler(httpMetrics); + }); + return xhr; + }; + } +} diff --git a/tracker/src/userAction/trackRouterChange.ts b/tracker/src/userAction/trackRouterChange.ts new file mode 100644 index 0000000..c62a868 --- /dev/null +++ b/tracker/src/userAction/trackRouterChange.ts @@ -0,0 +1,5 @@ +export function trackRouterChange(handler: (...args: any[]) => any) { + window.addEventListener('pushState', (e) => handler(e), true); + window.addEventListener('replaceState', (e) => handler(e), true); + window.addEventListener('popstate', (e) => handler(e), true); +} diff --git a/tracker/src/userAction/userAction.ts b/tracker/src/userAction/userAction.ts new file mode 100644 index 0000000..3ddc440 --- /dev/null +++ b/tracker/src/userAction/userAction.ts @@ -0,0 +1,204 @@ +import { + UserActionMetricsName, + type Report, + type UserActionOptions, + type HttpMetrics, +} from '@/types'; +import { getPageInformation } from './getPageInformation'; +import { trackRouterChange } from './trackRouterChange'; +import { formatDate } from '@/utils/formatDate'; +import { writePushStateAndReplaceState } from './writePushStateAndReplaceState'; +import { BehaviorStack } from './behaviorStack'; +import { afterLoad } from '@/utils'; +import { getOriginInformation } from './getOriginInformation'; +import { proxyXmlHttp } from './proxyXmlHttp'; +import { proxyFetch } from './proxyFetch'; + +export class UserActionTracker { + private readonly data: Record>; + private readonly options: UserActionOptions; + private readonly elementTrackedList: string[]; + private readonly classTrackedList: string[]; + private readonly eventTrackedList: string[]; + private readonly hehaviorStack: BehaviorStack; + private readonly report: Report; + + constructor(options: true | UserActionOptions, report: Report) { + this.data = {}; + this.options = Object.assign( + { + PI: true, + OI: true, + RCR: true, + DBR: true, + HT: true, + BS: true, + PV: true, + elementTrackedList: ['button', 'div'], + classTrackedList: ['tracked'], + eventTrackedList: ['click'], + maxBehaviorRecords: 100, + }, + options, + ); + this.elementTrackedList = this.options.elementTrackedList!; + this.classTrackedList = this.options.classTrackedList!; + this.eventTrackedList = this.options.eventTrackedList!; + this.hehaviorStack = new BehaviorStack({ + maxBehaviorRecords: this.options.maxBehaviorRecords!, + }); + this.report = report; + writePushStateAndReplaceState(); + (window as any).ziMuSendData = this.sendDataCustom.bind(this); + this.installUserActionInnerTracker(); + this.userActionDataReportHandler(); + } + + private initPageInformation() { + const pageInformation = getPageInformation(); + this.data[UserActionMetricsName.PI] = pageInformation; + } + + private initOriginInformation() { + const originInformation = getOriginInformation(); + this.data[UserActionMetricsName.OI] = originInformation; + } + + private initRouterChange() { + trackRouterChange((e: Event) => { + const routerChangeData = { + jumpType: e.type, + pageInfo: getPageInformation(), + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }; + if (this.data[UserActionMetricsName.RCR]) + this.data[UserActionMetricsName.RCR].push(routerChangeData); + else this.data[UserActionMetricsName.RCR] = [routerChangeData]; + + const hehaviorStackData = { + name: UserActionMetricsName.RCR, + page: getPageInformation().pathname, + value: { + jumpType: e.type, + }, + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }; + this.hehaviorStack.push(hehaviorStackData); + }); + } + + private initPV() { + const handler = () => { + const PVData = { + pageInfo: getPageInformation(), + originInformation: getOriginInformation(), + }; + this.report(PVData, 'PV'); + }; + afterLoad(handler); + trackRouterChange(handler); + } + + private initDomHandler() { + this.eventTrackedList.forEach((eventName) => { + window.addEventListener( + eventName, + (event) => { + let target = this.elementTrackedList.includes( + (event.target as HTMLElement)?.tagName?.toLocaleLowerCase(), + ) + ? (event.target as HTMLElement) + : undefined; + target = + target ?? + Array.from((event.target as HTMLElement)?.classList).find((className) => + this.classTrackedList.includes(className), + ) + ? (event.target as HTMLElement) + : undefined; + + if (!target) return; + + const domData = { + tagInfo: { + id: target.id, + classList: Array.from(target.classList), + tagName: target.tagName, + text: target.textContent, + }, + pageInfo: getPageInformation(), + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }; + + if (!this.data[UserActionMetricsName.DBR]) { + this.data[UserActionMetricsName.DBR] = { [eventName]: [domData] }; + } else if (!this.data[UserActionMetricsName.DBR][eventName]) { + this.data[UserActionMetricsName.DBR][eventName] = [domData]; + } else { + this.data[UserActionMetricsName.DBR][eventName].push(domData); + } + + const hehaviorStackData = { + name: eventName, + page: getPageInformation().pathname, + value: { + tagInfo: { + id: target.id, + classList: Array.from(target.classList), + tagName: target.tagName, + text: target.textContent, + }, + pageInfo: getPageInformation(), + }, + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }; + this.hehaviorStack.push(hehaviorStackData); + }, + true, + ); + }); + } + + private initHttpHandler() { + const loadHandler = (httpMetrics: HttpMetrics) => { + if (!this.data[UserActionMetricsName.HT]) { + this.data[UserActionMetricsName.HT] = [httpMetrics]; + } else { + this.data[UserActionMetricsName.HT].push(httpMetrics); + } + }; + proxyXmlHttp(loadHandler); + proxyFetch(loadHandler); + } + + private sendDataCustom(data: Record) { + this.report(data, 'custom'); + this.hehaviorStack.push({ + name: 'custom', + page: getPageInformation().pathname, + value: data, + time: new Date().getTime(), + timeFormat: formatDate(new Date()), + }); + } + + installUserActionInnerTracker() { + if (this.options.PI) this.initPageInformation(); + if (this.options.OI) this.initOriginInformation(); + if (this.options.RCR) this.initRouterChange(); + if (this.options.DBR) this.initDomHandler(); + if (this.options.PV) this.initPV(); + if (this.options.HT) this.initHttpHandler(); + } + + private userActionDataReportHandler() { + window.addEventListener('beforeunload', () => { + this.report(this.data, 'userAction'); + if (this.options.BS) this.report(this.hehaviorStack.get(), 'behaviorStack'); + }); + } +} diff --git a/tracker/src/userAction/writePushStateAndReplaceState.ts b/tracker/src/userAction/writePushStateAndReplaceState.ts new file mode 100644 index 0000000..57e2d6f --- /dev/null +++ b/tracker/src/userAction/writePushStateAndReplaceState.ts @@ -0,0 +1,14 @@ +export function writePushStateAndReplaceState() { + history.pushState = writeHistoryEvent('pushState'); + history.replaceState = writeHistoryEvent('replaceState'); +} + +function writeHistoryEvent(type: keyof History) { + const originEvent = history[type]; + return function (this: any) { + const result = originEvent.apply(this, arguments); + const event = new Event(type); + window.dispatchEvent(event); + return result; + }; +} diff --git a/tracker/src/utils/index.ts b/tracker/src/utils/index.ts index d788177..1c48cb6 100644 --- a/tracker/src/utils/index.ts +++ b/tracker/src/utils/index.ts @@ -1 +1,2 @@ -export * from './pv'; +export * from './formatDate'; +export * from './afterLoad'; diff --git a/tracker/src/utils/pv.ts b/tracker/src/utils/pv.ts deleted file mode 100644 index f794290..0000000 --- a/tracker/src/utils/pv.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function createHistoryEvent(type: T) { - const originHistoryEvent = history[type]; - return function (this: any) { - const res = originHistoryEvent.apply(this, arguments); - const event = new Event(type); - window.dispatchEvent(event); - return res; - }; -} -- Gitee