refactor(ccp): 优化ccp收集

Author: Chryseis

package.json

@@ -86,6 +86,7 @@
     "@zyf2e/monitor-types": "^2.1.29",
     "@zyf2e/monitor-utils": "^2.1.29",
     "@zyf2e/monitor-vue": "^2.1.29",
-    "core-js": "^3.19.1"
+    "core-js": "^3.19.1",
+    "path-to-regexp": "^6.2.0"
   }
 }

packages/web-performance/package.json

@@ -11,6 +11,7 @@
     "dist"
   ],
   "dependencies": {
-    "core-js": "^3.19.1"
+    "core-js": "^3.19.1",
+    "path-to-regexp": "^6.2.0"
   }
 }

packages/web-performance/src/metrics/getCCP.ts

@@ -8,7 +8,7 @@ import { proxyFetch, proxyXhr } from '../lib/proxyHandler'
 import getFirstVisitedState from '../lib/getFirstVisitedState'
 import metricsStore from '../lib/store'
 import { IReportHandler } from '../types'
-import { getApiPath, isIncludeArr, isEqualArr } from '../utils'
+import { getApiPath, isIncludeArr, isEqualArr, isExistPath } from '../utils'
 import getPath from '../utils/getPath'
 import { isPerformanceSupported } from '../utils/isSupported'
 import { metricsName } from '../constants'
@@ -65,7 +65,7 @@ const beforeHandler = (url, apiConfig, hashHistory, excludeRemotePath) => {
     const firstVisitedState = getFirstVisitedState().state
     if (firstVisitedState) {
       const remotePath = getApiPath(url)
-      if (!excludeRemotePath?.includes(remotePath)) {
+      if (!isExistPath(excludeRemotePath, remotePath)) {
         if (apiConfig && apiConfig[path]) {
           if (apiConfig[path].some((o) => remotePath === o)) {
             remoteQueue.queue.push(remotePath)
@@ -82,32 +82,33 @@ const beforeHandler = (url, apiConfig, hashHistory, excludeRemotePath) => {
   }
 }
 
-const afterHandler = (url, apiConfig, store, hashHistory) => {
+const afterHandler = (url, apiConfig, store, hashHistory, excludeRemotePath) => {
   if (isPerformanceSupported()) {
     const path = getPath(location, hashHistory)
     const firstVisitedState = getFirstVisitedState().state
     if (firstVisitedState) {
       const remotePath = getApiPath(url)
-      completeQueue.push(remotePath)
-      if (apiConfig && apiConfig[path]) {
-        if (isIncludeArr(remoteQueue.queue, completeQueue) && !remoteQueue.hasStoreMetrics) {
-          console.log('api list = ', remoteQueue.queue)
-          remoteQueue.hasStoreMetrics = true
-          const now = performance.now()
-          if (now < getFirstHiddenTime().timeStamp) {
-            storeMetrics(metricsName.ACT, now, store)
-            computeCCPAndRL(store)
+      if (!isExistPath(excludeRemotePath, remotePath)) {
+        completeQueue.push(remotePath)
+        if (apiConfig && apiConfig[path]) {
+          if (isIncludeArr(remoteQueue.queue, completeQueue) && !remoteQueue.hasStoreMetrics) {
+            console.log('api list = ', remoteQueue.queue)
+            remoteQueue.hasStoreMetrics = true
+            const now = performance.now()
+            if (now < getFirstHiddenTime().timeStamp) {
+              storeMetrics(metricsName.ACT, now, store)
+              computeCCPAndRL(store)
+            }
           }
-        }
-      } else {
-        console.log(remoteQueue.queue, completeQueue)
-        if (isIncludeArr(remoteQueue.queue, completeQueue) && !remoteQueue.hasStoreMetrics && isDone) {
-          console.log('api list = ', remoteQueue.queue)
-          remoteQueue.hasStoreMetrics = true
-          const now = performance.now()
-          if (now < getFirstHiddenTime().timeStamp) {
-            storeMetrics(metricsName.ACT, now, store)
-            computeCCPAndRL(store)
+        } else {
+          if (isIncludeArr(remoteQueue.queue, completeQueue) && !remoteQueue.hasStoreMetrics && isDone) {
+            console.log('api list = ', remoteQueue.queue)
+            remoteQueue.hasStoreMetrics = true
+            const now = performance.now()
+            if (now < getFirstHiddenTime().timeStamp) {
+              storeMetrics(metricsName.ACT, now, store)
+              computeCCPAndRL(store)
+            }
           }
         }
       }
@@ -152,6 +153,16 @@ const maxWaitTime4Report = (cb: () => void, maxWaitCCPDuration) => {
   setTimeout(cb, maxWaitCCPDuration)
 }
 
+/**
+ * @param {metricsStore} store
+ * @param {Function} report
+ * @param {boolean} isCustomEvent
+ * @param { { [prop: string]: Array<string> } } apiConfig
+ * @param { boolean} hashHistory
+ * @param { Array<string>} excludeRemotePath
+ * @param { number } maxWaitCCPDuration
+ * @param { boolean } immediately
+ * */
 export const initCCP = (
   store: metricsStore,
   report: IReportHandler,
@@ -193,10 +204,10 @@ export const initCCP = (
 
   proxyXhr(
     (url) => beforeHandler(url, apiConfig, hashHistory, excludeRemotePath),
-    (url) => afterHandler(url, apiConfig, store, hashHistory)
+    (url) => afterHandler(url, apiConfig, store, hashHistory, excludeRemotePath)
   )
   proxyFetch(
     (url) => beforeHandler(url, apiConfig, hashHistory, excludeRemotePath),
-    (url) => afterHandler(url, apiConfig, store, hashHistory)
+    (url) => afterHandler(url, apiConfig, store, hashHistory, excludeRemotePath)
   )
 }

packages/web-performance/src/utils/index.ts

@@ -1,3 +1,5 @@
+import { pathToRegexp } from 'path-to-regexp'
+
 export const roundByFour = (num: number, digits = 4) => {
   try {
     return parseFloat(num.toFixed(digits))
@@ -86,3 +88,15 @@ export const getApiPath = (url: string): string => {
   }
   return ''
 }
+
+export const isExistPath = (paths: Array<string>, target: string) => {
+  const regArr = paths.map((path) => pathToRegexp(path))
+
+  for (let i = 0; i < regArr.length; i++) {
+    if (regArr[i].exec(target)) {
+      return true
+    }
+  }
+
+  return false
+}

yarn.lock

@@ -4885,6 +4885,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38"
+  integrity sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"