diff --git a/README.md b/README.md index 563a765..847724f 100644 --- 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 index b5833a9..4e8b852 100644 --- 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 index 9dc751c..27e1a58 100644 --- 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 index e30a6c3..de5694b 100644 --- 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 index 2b96208..d37c4ab 100644 --- 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 -} - - +} \ No newline at end of file diff --git a/packages/error/CHANGELOG.md b/packages/error/CHANGELOG.md index a5a271f..41ccb4c 100644 --- 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 index 341c205..21c086a 100644 --- 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 index d5942fc..983ef16 100644 --- 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 + - web-resource-monitor@1.3.0 + +## 1.2.2 + +### Patch Changes + +- fix resource repeated capture +- Updated dependencies + - web-resource-monitor@1.2.2 + ## 1.2.1 ### Patch Changes diff --git a/packages/example/index.html b/packages/example/index.html index 2b9e3f4..86b94b8 100644 --- a/packages/example/index.html +++ b/packages/example/index.html @@ -2,23 +2,27 @@ - - + + +
+

打开控制台，查看错误测试

+

Open the console to view error tests

+
+ \ No newline at end of file diff --git a/packages/example/package.json b/packages/example/package.json index 4418c8d..e9cedb4 100644 --- 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 index 70cad64..a70d2c3 100644 --- a/packages/example/public/index.min.js +++ b/packages/example/public/index.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).webResourceMonitor={})}(this,(function(e){"use strict";const t={audio:["wav","mp3","wma","midi","acc","cda","ape","ra"],video:["mp4","mpeg","avi","3gp","rm","wmv","flv","bd","mkv"],img:["jpg","jpeg","png","gif","bmp","tiff","webp"],css:["css","ttf"],script:["js","vue","ts"]},r={script:100,css:100,xmlhttprequest:200,fetch:200,audio:5e3,video:1e4,img:500};function o(){const e=new Map;return{on(t,r){r!==e.get(t)&&e.set(t,r)},emit(t,...r){const o=e.get(t);o?.(...r)},off(t){e.delete(t)},destroy(){e.clear()}}}function n(e,t,r,o,n="normal"){const i={name:o.name,fileType:t,resourceType:r,initiatorType:o?.initiatorType,duration:o.duration};e.loadedList.push({...i,entry:o}),e.emit("loaded",i,o),"timeout"===n&&(e.loadedTimeoutList.push({...i,entry:o}),e.emit("loadedTimeout",i,o))}function i(e){const i=o(),s={resourceTimeoutConfig:e?.resourceTimeoutConfig??r,fileMatcher:e?.fileMatcher??t,loadedList:[],loadedTimeoutList:[],on:i.on,off:i.off,emit:i.emit,start:()=>{},destroy:()=>{}},c={resource(e){const[t,r]=function(e,t){let r="";const o=/([^\s.])*$/.exec(String(e.name).replace(/\?\S*/,"")),n=o&&o[0];for(const[e,o]of Object.entries(t.fileMatcher))if(o.includes(n)){r=e;break}return[n,r]}(e,s);for(const[o,i]of Object.entries(s.resourceTimeoutConfig).reverse())if(n(s,t,r,e),o===r&&e.duration>=i)return n(s,t,r,e,"timeout")}};let f=function(e){return new PerformanceObserver((t=>{for(const r of t.getEntries()){const t=e[r.entryType];t&&t(r)}}))}(c);return s.start=()=>{f?.observe({entryTypes:Object.keys(c)})},s.destroy=()=>{f?.disconnect(),f=null},s}function s(){const e=o(),t={collectionList:[],on:e.on,off:e.off,emit:e.emit,start:()=>{},destroy:()=>{}};function r(e){!function(e,t){const r={url:t.filename,lineno:t.lineno,colno:t.colno,message:t.message??t.error.message,stack:t.error.stack,browser:window.navigator.userAgent};e.collectionList.push({...r,error:t}),e.emit("error",r,t)}(t,e)}return t.start=()=>{window.addEventListener("error",r)},t.destroy=()=>{window.removeEventListener("error",r)},t}const c=i;e.createErrorListener=s,e.createMonitor=function(e){let t={resourceListener:i(e?.resourceListenerConfig),errorListener:s(),start:()=>{t?.resourceListener.start()},destroy:()=>{t?.errorListener.destroy(),t=null}};return t},e.createReport=c,e.createResourceListener=i})); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).webResourceMonitor={})}(this,(function(e){"use strict";const t={audio:["wav","mp3","wma","midi","acc","cda","ape","ra"],video:["mp4","mpeg","avi","3gp","rm","wmv","flv","bd","mkv"],img:["jpg","jpeg","png","gif","bmp","tiff","webp"],css:["css","ttf"],script:["js","vue","ts"]},r={script:100,css:100,xmlhttprequest:200,fetch:200,audio:5e3,video:1e4,img:500};function o(){const e=new Map;return{on(t,r){r!==e.get(t)&&e.set(t,r)},emit(t,...r){const o=e.get(t);o?.(...r)},off(t){e.delete(t)},destroy(){e.clear()}}}function n(e,t,r,o,n="normal"){const i={name:o.name,fileType:t,resourceType:r,initiatorType:o?.initiatorType,duration:o.duration};e.loadedList.push({...i,entry:o}),e.emit("loaded",i,o),"timeout"===n&&(e.loadedTimeoutList.push({...i,entry:o}),e.emit("loadedTimeout",i,o))}function i(e){const i=o(),s={resourceTimeoutConfig:e?.resourceTimeoutConfig??r,fileMatcher:e?.fileMatcher??t,loadedList:[],loadedTimeoutList:[],on:i.on,off:i.off,emit:i.emit,start:()=>{},destroy:()=>{}},c={resource(e){const[t,r]=function(e,t){const r=[],o=/([^\s.])*$/.exec(String(e.name).replace(/\?\S*/,"")),n=o&&o[0];for(const[e,o]of Object.entries(t.fileMatcher))o.includes(n)&&r.push(e);return[n,r]}(e,s);for(const[o,i]of Object.entries(s.resourceTimeoutConfig).reverse())if(r?.includes(o)){const r=e.duration>=i?"timeout":void 0;n(s,t,o,e,r)}}};let u=function(e){return new PerformanceObserver((t=>{for(const r of t.getEntries()){const t=e[r.entryType];t&&t(r)}}))}(c);return s.start=()=>{u?.observe({entryTypes:Object.keys(c)})},s.destroy=()=>{u?.disconnect(),u=null},s}function s(){const e=o(),t={collectionList:[],on:e.on,off:e.off,emit:e.emit,start:()=>{},destroy:()=>{}};function r(e){!function(e,t){const r={url:t.filename,lineno:t.lineno,colno:t.colno,message:t.message??t.error.message,stack:t.error.stack,browser:window.navigator.userAgent};e.collectionList.push({...r,error:t}),e.emit("error",r,t)}(t,e)}return t.start=()=>{window.addEventListener("error",r)},t.destroy=()=>{window.removeEventListener("error",r)},t}const c=i;e.createErrorListener=s,e.createMonitor=function(e){let t={resourceListener:i(e?.resourceListenerConfig),errorListener:s(),start:()=>{t?.resourceListener.start(),t?.errorListener.start()},destroy:()=>{t?.resourceListener.destroy(),t?.errorListener.destroy(),t=null}};return t},e.createReport=c,e.createResourceListener=i,e.getResourceConfigDefault=function(){return{fileMatcherDefault:t,resourceTimeoutConfigDefault:r}}})); diff --git a/packages/example/src/index.ts b/packages/example/src/index.ts index c41a480..4386ff9 100644 --- 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 index d320d7c..ce87457 100644 --- 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 index 15fd8ab..d336a44 100644 --- 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 index 0c330e2..3665c9a 100644 --- 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, fileType, resourceType, entry) - if (resourceTypeKey === resourceType && entry.duration >= time) { - return longReourceCollection(resourceListener, fileType, resourceType, entry, 'timeout') + if (resourceType?.includes(resourceTypeKey)) { + const timeout = entry.duration >= time ? 'timeout' : undefined + longReourceCollection(resourceListener, fileType, resourceTypeKey, entry, timeout) } } }, @@ -124,3 +123,13 @@ export function createResourceListener(resourceConfig?: ResourceReportConfig) { return resourceListener } + +/** + * @returns {fileMatcherDefault, resourceTimeoutConfigDefault} + */ +export function getResourceConfigDefault() { + return { + fileMatcherDefault, + resourceTimeoutConfigDefault + } +} \ No newline at end of file diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index c7d7e80..975e024 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,17 @@ # @web-resource-monitor/shared +## 1.3.0 + +### Minor Changes + +- feat: resource use getResourceConfigDefault get default + +## 1.2.2 + +### Patch Changes + +- fix resource repeated capture + ## 1.2.1 ### Patch Changes diff --git a/packages/shared/package.json b/packages/shared/package.json index ba25fa4..90aa3da 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -2,7 +2,7 @@ "name": "@web-resource-monitor/shared", "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/pnpm-lock.yaml b/pnpm-lock.yaml index 7948ddc..75461b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,6 +72,39 @@ importers: specifier: ^2.0.4 version: 2.0.4(terser@5.31.3) + packages/core: + dependencies: + '@web-resource-monitor/error': + specifier: workspace:^ + version: link:../error + '@web-resource-monitor/resource': + specifier: workspace:^ + version: link:../resource + + packages/error: + dependencies: + '@web-resource-monitor/shared': + specifier: workspace:^ + version: link:../shared + + packages/example: + dependencies: + web-resource-monitor: + specifier: workspace:^ + version: link:../core + devDependencies: + vite: + specifier: ^5.3.5 + version: 5.3.5(terser@5.31.3) + + packages/resource: + dependencies: + '@web-resource-monitor/shared': + specifier: workspace:^ + version: link:../shared + + packages/shared: {} + packages: '@ampproject/remapping@2.3.0': @@ -443,55 +476,46 @@ packages: resolution: {integrity: sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==} cpu: [arm] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm-musleabihf@4.19.0': resolution: {integrity: sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==} cpu: [arm] os: [linux] - libc: [musl] '@rollup/rollup-linux-arm64-gnu@4.19.0': resolution: {integrity: sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==} cpu: [arm64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-arm64-musl@4.19.0': resolution: {integrity: sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==} cpu: [arm64] os: [linux] - libc: [musl] '@rollup/rollup-linux-powerpc64le-gnu@4.19.0': resolution: {integrity: sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==} cpu: [ppc64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-riscv64-gnu@4.19.0': resolution: {integrity: sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==} cpu: [riscv64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-s390x-gnu@4.19.0': resolution: {integrity: sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==} cpu: [s390x] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-gnu@4.19.0': resolution: {integrity: sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==} cpu: [x64] os: [linux] - libc: [glibc] '@rollup/rollup-linux-x64-musl@4.19.0': resolution: {integrity: sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==} cpu: [x64] os: [linux] - libc: [musl] '@rollup/rollup-win32-arm64-msvc@4.19.0': resolution: {integrity: sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==} diff --git a/tsconfig.json b/tsconfig.json index b04f82e..22f1605 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ } }, "include": ["packages/**/*"], - "exclude": ["node_modules"], + "exclude": ["node_modules", "packages/example/**/*"], "ts-node": { "esm": true }