feat: resource use getResourceConfigDefault get default

zhuyue6 · Aug 22, 2024 · b0f65dd · b0f65dd
1 parent f127b63
commit b0f65dd
Show file tree

Hide file tree

Showing 19 changed files with 227 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -1,9 +1,9 @@
 ## web-resource-monitor
-Web resource loading monitoring, js error callback, reporting, etc.  
-捕获前端监控资源加载和异常错误上报
+Web resource loading monitoring, js error listener, callback, reporting, etc.  
+前端监控资源加载上报，js错误捕获
 
-If a long resource loading time triggers a callback, HTTP can be called to report the resource file with a long loading time, and the file type and timeout settings can be customized
-如果资源加载长会触发回调，此时可以调用http上报长加载时长的资源文件，并可以自定义文件类型和超时设定
+If a long resource loading time triggers a callback, you can call HTTP to report the resource file with a long loading time.  
+如果资源加载长会触发回调，此时可以调用http上报长加载时长的资源文件
 
 Bugs or features can be raised here:  
 有问题或者扩展功能可以讨论：  
@@ -38,16 +38,31 @@ script | 100
 if you want to custom
 
 ```typescipt
-  // use a new media attr
+  
+  // get default config
+  const { 
+    fileMatcherDefault,
+    resourceTimeoutConfigDefault 
+  } = getResourceConfigDefault()
+
+ // use a new media attr, will replace default,
+ // if you set  fileMatcher: {
+ //   media: ['mp4'],
+ //   video: ['mp4']
+  //  }
+  //  load aa.mp4 will get twice
+
   createResourceListener({
     resourceTimeoutConfig: {
+      ...resourceTimeoutConfigDefault,
       media: 1000
     },
     fileMatcher: {
+      ...fileMatcherDefault,
       media: ['mp4', 'mp3', 'jpg']
     }
   })
-  // reset a script, will merge default
+  // reset a script, will replace default
   createResourceListener({
     resourceTimeoutConfig: {
       script: 1000

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,26 @@
 # web-resource-monitor
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: resource use getResourceConfigDefault get default
+
+### Patch Changes
+
+- Updated dependencies
+  - @web-resource-monitor/resource@1.3.0
+  - @web-resource-monitor/error@1.3.0
+
+## 1.2.2
+
+### Patch Changes
+
+- fix resource repeated capture
+- Updated dependencies
+  - @web-resource-monitor/resource@1.2.2
+  - @web-resource-monitor/error@1.2.2
+
 ## 1.2.1
 
 ### Patch Changes

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -38,16 +38,32 @@ script | 100
 if you want to custom
 
 ```typescipt
-  // use a new media attr
+  
+  // get default config
+  const { 
+    fileMatcherDefault,
+    resourceTimeoutConfigDefault 
+  } = getResourceConfigDefault()
+
+ // use a new media attr, will replace default,
+ // if you set  fileMatcher: {
+ //   media: ['mp4'],
+ //   video: ['mp4']
+  //  }
+  //  load aa.mp4 will get twice
+
+
   createResourceListener({
     resourceTimeoutConfig: {
+      ...resourceTimeoutConfigDefault,
       media: 1000
     },
     fileMatcher: {
+      ...fileMatcherDefault,
       media: ['mp4', 'mp3', 'jpg']
     }
   })
-  // reset a script, will merge default
+  // reset a script, will replace default
   createResourceListener({
     resourceTimeoutConfig: {
       script: 1000

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -2,7 +2,7 @@
   "name": "web-resource-monitor",
   "main": "./dist/index.js",
   "description": "Web resource loading monitoring, callback, reporting, etc, 前端监控资源加载上报",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "author": "zhuyue",
   "license": "ISC",
   "exports": {

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,6 +1,6 @@
-import { createResourceListener, type ResourceReportConfig } from '@web-resource-monitor/resource'
+import { createResourceListener, getResourceConfigDefault, type ResourceReportConfig } from '@web-resource-monitor/resource'
 import { createErrorListener } from '@web-resource-monitor/error'
-export { createResourceListener, createErrorListener }
+export { createResourceListener, createErrorListener, getResourceConfigDefault }
 
 /**
  * @deprecated Please use createResourceListener instead.
@@ -35,6 +35,4 @@ export function createMonitor(params?: CreateMonitorParams) {
     }
   }
   return monitor
-}
-
-
+}
diff --git a/packages/error/CHANGELOG.md b/packages/error/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @web-resource-monitor/error
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: resource use getResourceConfigDefault get default
+
+### Patch Changes
+
+- Updated dependencies
+  - @web-resource-monitor/shared@1.3.0
+
+## 1.2.2
+
+### Patch Changes
+
+- fix resource repeated capture
+- Updated dependencies
+  - @web-resource-monitor/shared@1.2.2
+
 ## 1.2.1
 
 ### Patch Changes

diff --git a/packages/error/package.json b/packages/error/package.json
@@ -2,7 +2,7 @@
   "name": "@web-resource-monitor/error",
   "main": "./dist/index.js",
   "description": "Web resource loading monitoring, callback, reporting, etc, 前端监控资源加载上报",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

diff --git a/packages/example/CHANGELOG.md b/packages/example/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @web-resource-monitor/example
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: resource use getResourceConfigDefault get default
+
+### Patch Changes
+
+- Updated dependencies
+  - [email protected]
+
+## 1.2.2
+
+### Patch Changes
+
+- fix resource repeated capture
+- Updated dependencies
+  - [email protected]
+
 ## 1.2.1
 
 ### Patch Changes

diff --git a/packages/example/index.html b/packages/example/index.html
@@ -2,23 +2,27 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script src="/index.min.js">
-    </script>
-    <script>
+    <!-- <script src="/index.min.js"></script> -->
+    <script src="./src/index.ts" type="module"></script>
+  </head>
+  <body>
+    <div>
+      <p>打开控制台，查看错误测试</p>
+      <p>Open the console to view error tests</p>
+    </div>
+    <!-- <script>
       const monitor = window.webResourceMonitor.createMonitor()
       monitor.start()
-
+    
       monitor.resourceListener.on('loaded', (a, b)=>{
         console.log(a, b)
       })
-
+    
       monitor.errorListener.on('error', (a, b)=>{
         console.log(a, b)
       })
       setTimeout(()=>{ AAA }, 3000)
     </script>
-  </head>
-  <body>
-    <script src="http://code.jquery.com/jquery-1.11.0.min.js" defer></script>
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> -->
   </body>
 </html>
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -2,10 +2,11 @@
   "name": "@web-resource-monitor/example",
   "main": "./dist/index.js",
   "description": "example for Web resource loading monitoring",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "scripts": {
     "start": "vite"
   },
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

diff --git a/packages/example/public/index.min.js b/packages/example/public/index.min.js
diff --git a/packages/example/src/index.ts b/packages/example/src/index.ts
@@ -1,18 +1,40 @@
-import { createMonitor, createResourceListener, createErrorListener } from '@web-resource-monitor/core'
-
-const monitor = createMonitor()
+import { createMonitor, getResourceConfigDefault, createResourceListener, createErrorListener } from 'web-resource-monitor/src/index.ts'
+
+
+const {fileMatcherDefault, resourceTimeoutConfigDefault} = getResourceConfigDefault()
+const monitor = createMonitor({
+  resourceListenerConfig: {
+    resourceTimeoutConfig: {
+      ...resourceTimeoutConfigDefault,
+      lll: 10
+    },
+    fileMatcher: {
+      ...fileMatcherDefault,
+      lll: ['js']
+    }
+  }
+})
 monitor.start()
 
 monitor.resourceListener.on('loaded', (a, b)=>{
   console.log(a, b)
 })
 
+monitor.resourceListener.on('loadedTimeout', (a, b)=>{
+  console.log(a, b)
+})
+
 monitor.errorListener.on('error', (a, b)=>{
   console.log(a, b)
 })
 
-// setTimeout(()=>{ AAA }, 3000)
+setTimeout(()=>{ AAA }, 3000)
+
+const scriptdom = document.createElement('script')
+
+scriptdom.setAttribute('src', 'http://code.jquery.com/jquery-1.11.0.min.js')
 
+document.body.appendChild(scriptdom)
 
 // const resourceListener = createResourceListener()
 // resourceListener.start()

diff --git a/packages/resource/CHANGELOG.md b/packages/resource/CHANGELOG.md
@@ -1,5 +1,24 @@
 # @web-resource-monitor/resource
 
+## 1.3.0
+
+### Minor Changes
+
+- feat: resource use getResourceConfigDefault get default
+
+### Patch Changes
+
+- Updated dependencies
+  - @web-resource-monitor/shared@1.3.0
+
+## 1.2.2
+
+### Patch Changes
+
+- fix resource repeated capture
+- Updated dependencies
+  - @web-resource-monitor/shared@1.2.2
+
 ## 1.2.1
 
 ### Patch Changes

diff --git a/packages/resource/package.json b/packages/resource/package.json
@@ -2,7 +2,7 @@
   "name": "@web-resource-monitor/resource",
   "main": "./dist/index.js",
   "description": "Web resource loading monitoring, callback, reporting, etc, 前端监控资源加载上报",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

diff --git a/packages/resource/src/index.ts b/packages/resource/src/index.ts
@@ -7,15 +7,14 @@ function getType(
   },
   resource: ResourceListener
 ) {
-  let resourceType = ''
+  const resourceType: string[] = []
   // Judging by the suffix type of the requested resource name
   const fileTypes = /([^\s.])*$/.exec(String(entry.name as string).replace(/\?\S*/, '')) 
   const fileType = fileTypes && fileTypes[0]
 
   for (const [key, value] of Object.entries(resource.fileMatcher)) {
     if (value.includes(fileType as any)) {
-      resourceType = key
-      break
+      resourceType.push(key)
     }
   }
 
@@ -85,6 +84,7 @@ function createPerformanceObserver(observerReactive: {[index: string]: (entry: P
  *
  * @param cb callback
  * @param resourceConfig report config
+ * @returns ResourceListener
  */
 export function createResourceListener(resourceConfig?: ResourceReportConfig) {
   const listener = createListener()
@@ -102,12 +102,11 @@ export function createResourceListener(resourceConfig?: ResourceReportConfig) {
 
   const observerReactive = {
     resource(entry: PerformanceEntry) {
-      // 资源加载监听
       const [fileType, resourceType] = getType(entry, resourceListener)
       for (const [resourceTypeKey, time] of Object.entries(resourceListener.resourceTimeoutConfig).reverse()) {
-        longReourceCollection(resourceListener, <string>fileType, <string>resourceType, entry)
-        if (resourceTypeKey === resourceType && entry.duration >= time) {
-          return longReourceCollection(resourceListener, <string>fileType, <string>resourceType,  entry, 'timeout')
+        if (resourceType?.includes(resourceTypeKey)) {
+          const timeout = entry.duration >= time ? 'timeout' : undefined
+          longReourceCollection(resourceListener, <string>fileType, <string>resourceTypeKey,  entry, timeout)
         }
       }
     },
@@ -124,3 +123,13 @@ export function createResourceListener(resourceConfig?: ResourceReportConfig) {
 
   return resourceListener
 }
+
+/**
+ * @returns  {fileMatcherDefault, resourceTimeoutConfigDefault}
+ */
+export function getResourceConfigDefault() {
+  return {
+    fileMatcherDefault,
+    resourceTimeoutConfigDefault
+  }
+}