cwj_monitoring 0.0.8 → 0.0.10

package/README.md

@@ -16,7 +16,7 @@ npm run server
 
 1. 行为监控：点击监控，页面跳转监控，页面停留时间监控
 2. 错误监控：js错误，资源加载错误，手动console.error抛出的错误，promise未捕获的错误
-3. 性能监控：FP、DCL、Load、FPS
+3. 性能监控：DCL、FP、FCP、LCP、Load、FPS
 
 注：目前点击监控只支持button标签触发的点击事件
 

package/dist/index.js

@@ -1 +1 @@
-class e{name;constructor(e){this.name=e}}var r=new class extends e{constructor(){super("error")}monitor(){this.JSError(),this.resourceError(),this.consoleError(),this.promiseError()}JSError(){window.onerror=(e,r,t,o,n)=>{x.emit("error_js",{msg:e,url:r,line:t,column:o,error:n})}}resourceError(){window.addEventListener("error",(function(e){const{target:r}=e;if(r instanceof HTMLLinkElement||r instanceof HTMLScriptElement||r instanceof HTMLImageElement||r instanceof HTMLAudioElement||r instanceof HTMLVideoElement||r instanceof HTMLIFrameElement){const e=r.src||r.href;x.emit("error_resource",e)}}),!0)}consoleError(){var e=window.console.error;window.console.error=function(r){x.emit("error_console",r),e.apply(window.console,arguments)}}promiseError(){window.addEventListener("unhandledrejection",(function(e){x.emit("error_promise",e.error.stack)}))}};var t=new class extends e{constructor(){super("pv")}monitor(){this.Hash(),this.History()}Hash(){window.addEventListener("hashchange",(function(){x.emit("hashchange")}))}History(){const e=window.history.pushState,r=window.history.replaceState;window.history.pushState=function(){e.apply(window.history,arguments),x.emit("historychange")},window.history.replaceState=function(){r.apply(window.history,arguments),x.emit("historychange")},window.addEventListener("popstate",(function(){x.emit("historychange")}))}};var o=new class extends e{constructor(){super("behavior")}monitor(){["click"].forEach((function(e){let r;document.addEventListener(e,(t=>{clearTimeout(r),r=setTimeout((()=>{const r=t.target;r instanceof HTMLButtonElement&&x.emit(e,r.textContent)}),300)}),!0)}))}};var n,i=new class extends e{constructor(){super("performance")}monitor(){this.fp(),this.dcl(),this.load()}fp(){const e=new PerformanceObserver((r=>{for(const t of r.getEntries())"first-paint"===t.name&&(e.disconnect(),x.emit("performance_fp",t.startTime))}));e.observe({type:"paint",buffered:!0})}dcl(){window.addEventListener("DOMContentLoaded",(function(e){x.emit("performance_DOMContentLoaded",e.timeStamp)}))}load(){window.addEventListener("load",(function(e){x.emit("performance_load",e.timeStamp)}))}},s=new Uint8Array(16);function a(){if(!n&&!(n="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return n(s)}for(var c=[],d=0;d<256;++d)c.push((d+256).toString(16).slice(1));var m={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function u(e,r,t){if(m.randomUUID&&!r&&!e)return m.randomUUID();var o=(e=e||{}).random||(e.rng||a)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,r){t=t||0;for(var n=0;n<16;++n)r[t+n]=o[n];return r}return function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return(c[e[r+0]]+c[e[r+1]]+c[e[r+2]]+c[e[r+3]]+"-"+c[e[r+4]]+c[e[r+5]]+"-"+c[e[r+6]]+c[e[r+7]]+"-"+c[e[r+8]]+c[e[r+9]]+"-"+c[e[r+10]]+c[e[r+11]]+c[e[r+12]]+c[e[r+13]]+c[e[r+14]]+c[e[r+15]]).toLowerCase()}(o)}const w="uuid";let h=()=>{const e=(()=>{let e=navigator.userAgent.toLowerCase();return e.indexOf("opera")>-1||e.indexOf("opr")>-1?{browser:"Opera",browser_version:e.match(/ope?ra?\/([\d.]+)/)?.[1]}:e.indexOf("compatible")>-1&&e.indexOf("msie")>-1?{browser:"IE",browser_version:e.match(/(msie\s|trident.*rv:)([\w.]+)/)?.[2]||"IE"}:e.indexOf("edg")>-1?{browser:"Edge",browser_version:e.match(/edge?\/([\d.]+)/)?.[1]}:e.indexOf("firefox")>-1?{browser:"Firefox",browser_version:e.match(/firefox\/([\d.]+)/)?.[1]}:function(){var e=!1;for(var r in navigator.mimeTypes)if("application/360softmgrplugin"===navigator.mimeTypes[r].type)return!e;return e}()&&e.indexOf("safari")>-1?{browser:"360浏览器",browser_version:"Chromium browser"}:e.includes("2345explorer")?{browser:"2345浏览器",browser_version:e.match(/2345explorer\/([\d.]+)/)?.[1]||"Chromium browser"}:e.indexOf("bidubrowser")>-1?{browser:"百度浏览器",browser_version:e.match(/bidubrowser\/([\d.]+)/)?.[1]||"Chromium browser"}:e.indexOf("se 2.x")>-1?{browser:"搜狗浏览器",browser_version:"Chromium browser"}:e.indexOf("safari")>-1&&-1===e.indexOf("chrome")?{browser:"Safari",browser_version:e.match(/version\/([\d.]+)/)?.[1]}:/qqbrowser/.test(e)?{browser:"QQ浏览器",browser_version:e.match(/qqbrowser\/([\d.]+)/)?.[1]}:/micromessenger/i.test(e)?{browser:"微信浏览器",browser_version:e.match(/micromessenger\/([\d.]+)/)?.[1]}:e.indexOf("chrome")>-1&&e.indexOf("safari")>-1?{browser:"Chrome",browser_version:e.match(/chrome\/([\d.]+)/)?.[1]}:{browser:"未检测到的浏览器",browser_version:void 0}})();return h=()=>e,e};function f(){let e=0,r=window.screen,t=navigator.userAgent.toLowerCase();return void 0!==window.devicePixelRatio?e=window.devicePixelRatio:~t.indexOf("msie")?r.deviceXDPI&&r.logicalXDPI&&(e=r.deviceXDPI/r.logicalXDPI):void 0!==window.outerWidth&&void 0!==window.innerWidth&&(e=window.outerWidth/window.innerWidth),e&&(e=Math.round(100*e)),e}class l{device;uuid;constructor(){this.device=Object.assign({},h(),{width:window.screen.width,height:window.screen.height},{ratio:f(),os:(navigator.userAgent.match(/[(](.*?)[)]/)?.[0]||"").replace(/[()]/g,"")}),localStorage.getItem(w)?this.uuid=localStorage.getItem(w):(this.uuid=u(),localStorage.setItem(w,this.uuid))}}const p=navigator.sendBeacon?(e,r)=>{navigator.sendBeacon(e,JSON.stringify(r))}:(e,r)=>{let t=new XMLHttpRequest;t.open("POST",e),t.send(JSON.stringify(r))};function v(e,r){return e in r}var g=new class{cache;constructor(){this.cache=[]}getLength(){return this.cache.length}add(e){this.cache.push(e)}clear(){this.cache.length=0}};class b extends l{url;max;time;timer;visitTime;constructor(e){super(),this.url=e.url,this.max=e.max||5,this.time=e.time||3e4,this.timer,this.visitTime=Date.now()}formatter(e,r){const t=Date.now(),o=Object.assign({},{device:this.device,uuid:this.uuid},{type:e,data:r,date:t,url:window.location.href,referrer:document.referrer,uuid:localStorage.getItem(w),duration:t-this.visitTime});return this.visitTime=t,o}send(){g.getLength()&&(p(this.url,g.cache),g.clear())}emit(e,r){const t=this.formatter(e,r);g.add(t),clearTimeout(this.timer),g.getLength()>=this.max?this.send():this.timer=setTimeout((()=>{this.send()}),this.time)}}var E=(e=>(e.ERROR="error",e.CLICK="click",e.PERFORMANCE="performance",e.ROUTER="router",e))(E||{});let x;function y(e){e.url?(x=new b(e),window.$track=x,function(e){const n=Object.assign({error:!0,click:!0,performance:!0,router:!0},e);for(const e in n)if(v(e,n)&&n[e])switch(e){case E.CLICK:o.monitor();break;case E.ERROR:r.monitor();break;case E.PERFORMANCE:i.monitor();break;case E.ROUTER:t.monitor()}}(e),window.addEventListener("beforeunload",x.send,!0)):console.error("@web-tracing: ","缺少参数url")}const O=function(){let e=!1;return function(r){e||(y(r),e=!0)}}();var L={init:O};export{L as default,O as init};
+class e{name;constructor(e){this.name=e}}var r=new class extends e{constructor(){super("error")}monitor(){this.JSError(),this.resourceError(),this.consoleError(),this.promiseError()}JSError(){window.onerror=(e,r,t,o,n)=>{x.emit("error_js",{msg:e,url:r,line:t,column:o,error:n})}}resourceError(){window.addEventListener("error",(function(e){const{target:r}=e;if(r instanceof HTMLLinkElement||r instanceof HTMLScriptElement||r instanceof HTMLImageElement||r instanceof HTMLAudioElement||r instanceof HTMLVideoElement||r instanceof HTMLIFrameElement){const e=r.src||r.href;x.emit("error_resource",e)}}),!0)}consoleError(){const e=window.console.error;window.console.error=function(r,...t){x.emit("error_console",r),e.apply(window.console,[r,...t])}}promiseError(){window.addEventListener("unhandledrejection",(function(e){e.reason.stack?x.emit("error_promise",e.reason.message):x.emit("error_promise",e.reason)}))}};var t=new class extends e{constructor(){super("pv")}monitor(){this.Hash(),this.History()}Hash(){window.addEventListener("hashchange",(function(){x.emit("hashchange")}))}History(){const e=window.history.pushState,r=window.history.replaceState;window.history.pushState=function(){e.apply(window.history,arguments),x.emit("historychange")},window.history.replaceState=function(){r.apply(window.history,arguments),x.emit("historychange")},window.addEventListener("popstate",(function(){x.emit("historychange")}))}};var o=new class extends e{constructor(){super("behavior")}monitor(){["click"].forEach((function(e){let r;document.addEventListener(e,(t=>{clearTimeout(r),r=setTimeout((()=>{const r=t.target;r instanceof HTMLButtonElement&&x.emit(e,r.textContent)}),300)}),!0)}))}};var n,i=new class extends e{constructor(){super("performance")}monitor(){this.fp(),this.dcl(),this.load()}fp(){const e=new PerformanceObserver((r=>{for(const t of r.getEntries())"first-paint"===t.name&&(e.disconnect(),x.emit("performance_fp",t.startTime))}));e.observe({type:"paint",buffered:!0})}dcl(){window.addEventListener("DOMContentLoaded",(function(e){x.emit("performance_DOMContentLoaded",e.timeStamp)}))}load(){window.addEventListener("load",(function(e){x.emit("performance_load",e.timeStamp)}))}},s=new Uint8Array(16);function a(){if(!n&&!(n="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return n(s)}for(var c=[],d=0;d<256;++d)c.push((d+256).toString(16).slice(1));var m={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};function u(e,r,t){if(m.randomUUID&&!r&&!e)return m.randomUUID();var o=(e=e||{}).random||(e.rng||a)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,r){t=t||0;for(var n=0;n<16;++n)r[t+n]=o[n];return r}return function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return(c[e[r+0]]+c[e[r+1]]+c[e[r+2]]+c[e[r+3]]+"-"+c[e[r+4]]+c[e[r+5]]+"-"+c[e[r+6]]+c[e[r+7]]+"-"+c[e[r+8]]+c[e[r+9]]+"-"+c[e[r+10]]+c[e[r+11]]+c[e[r+12]]+c[e[r+13]]+c[e[r+14]]+c[e[r+15]]).toLowerCase()}(o)}const w="uuid";let h=()=>{const e=(()=>{const e=navigator.userAgent.toLowerCase();return e.indexOf("opera")>-1||e.indexOf("opr")>-1?{browser:"Opera",browser_version:e.match(/ope?ra?\/([\d.]+)/)?.[1]}:e.indexOf("compatible")>-1&&e.indexOf("msie")>-1?{browser:"IE",browser_version:e.match(/(msie\s|trident.*rv:)([\w.]+)/)?.[2]||"IE"}:e.indexOf("edg")>-1?{browser:"Edge",browser_version:e.match(/edge?\/([\d.]+)/)?.[1]}:e.indexOf("firefox")>-1?{browser:"Firefox",browser_version:e.match(/firefox\/([\d.]+)/)?.[1]}:function(){const e=!1;for(const r in navigator.mimeTypes)if("application/360softmgrplugin"===navigator.mimeTypes[r].type)return!e;return e}()&&e.indexOf("safari")>-1?{browser:"360浏览器",browser_version:"Chromium browser"}:e.includes("2345explorer")?{browser:"2345浏览器",browser_version:e.match(/2345explorer\/([\d.]+)/)?.[1]||"Chromium browser"}:e.indexOf("bidubrowser")>-1?{browser:"百度浏览器",browser_version:e.match(/bidubrowser\/([\d.]+)/)?.[1]||"Chromium browser"}:e.indexOf("se 2.x")>-1?{browser:"搜狗浏览器",browser_version:"Chromium browser"}:e.indexOf("safari")>-1&&-1===e.indexOf("chrome")?{browser:"Safari",browser_version:e.match(/version\/([\d.]+)/)?.[1]}:/qqbrowser/.test(e)?{browser:"QQ浏览器",browser_version:e.match(/qqbrowser\/([\d.]+)/)?.[1]}:/micromessenger/i.test(e)?{browser:"微信浏览器",browser_version:e.match(/micromessenger\/([\d.]+)/)?.[1]}:e.indexOf("chrome")>-1&&e.indexOf("safari")>-1?{browser:"Chrome",browser_version:e.match(/chrome\/([\d.]+)/)?.[1]}:{browser:"未检测到的浏览器",browser_version:void 0}})();return h=()=>e,e};function f(){let e=0;const r=window.screen,t=navigator.userAgent.toLowerCase();return void 0!==window.devicePixelRatio?e=window.devicePixelRatio:~t.indexOf("msie")?r.deviceXDPI&&r.logicalXDPI&&(e=r.deviceXDPI/r.logicalXDPI):void 0!==window.outerWidth&&void 0!==window.innerWidth&&(e=window.outerWidth/window.innerWidth),e&&(e=Math.round(100*e)),e}class l{device;uuid;constructor(){this.device=Object.assign({},h(),{width:window.screen.width,height:window.screen.height},{ratio:f(),os:(navigator.userAgent.match(/[(](.*?)[)]/)?.[0]||"").replace(/[()]/g,"")}),localStorage.getItem(w)?this.uuid=localStorage.getItem(w):(this.uuid=u(),localStorage.setItem(w,this.uuid))}}const p=navigator.sendBeacon?(e,r)=>{navigator.sendBeacon(e,JSON.stringify(r))}:(e,r)=>{const t=new XMLHttpRequest;t.open("POST",e),t.send(JSON.stringify(r))};function v(e,r){return e in r}var g=new class{cache;constructor(){this.cache=[]}getLength(){return this.cache.length}add(e){this.cache.push(e)}clear(){this.cache.length=0}};class b extends l{url;max;time;timer;visitTime;constructor(e){super(),this.url=e.url,this.max=e.max||5,this.time=e.time||3e4,this.timer,this.visitTime=Date.now()}formatter(e,r){const t=Date.now(),o=Object.assign({},{device:this.device,uuid:this.uuid},{type:e,data:r,date:t,url:window.location.href,referrer:document.referrer,uuid:localStorage.getItem(w),duration:t-this.visitTime});return this.visitTime=t,o}send(){g.getLength()&&(p(this.url,g.cache),g.clear())}emit(e,r){const t=this.formatter(e,r);g.add(t),clearTimeout(this.timer),g.getLength()>=this.max?this.send():this.timer=setTimeout((()=>{this.send()}),this.time)}}var E=(e=>(e.ERROR="error",e.CLICK="click",e.PERFORMANCE="performance",e.ROUTER="router",e))(E||{});let x;function y(e){e.url?(x=new b(e),window.$track=x,function(e){const n=Object.assign({error:!0,click:!0,performance:!0,router:!0},e);for(const e in n)if(v(e,n)&&n[e])switch(e){case E.CLICK:o.monitor();break;case E.ERROR:r.monitor();break;case E.PERFORMANCE:i.monitor();break;case E.ROUTER:t.monitor()}}(e),window.addEventListener("beforeunload",x.send,!0)):console.error("@web-tracing: ","缺少参数url")}const O=function(){let e=!1;return function(r){e||(y(r),e=!0)}}();var L={init:O};export{L as default,O as init};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cwj_monitoring",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "基于 JS 适用Web端的插件，为前端项目提供【 行为、性能、异常 】监控手段",
   "repository": "https://github.com/cwjbjy/cwj_monitoring",
   "main": "dist",
@@ -8,7 +8,8 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "serve": "rollup -c -w"
+    "serve": "rollup -c -w",
+    "lint": "eslint src --fix --ext .ts,.js --max-warnings 0"
   },
   "files": [
     "dist/*"
@@ -27,6 +28,8 @@
     "@babel/core": "^7.22.10",
     "@babel/plugin-transform-runtime": "^7.22.10",
     "@babel/preset-env": "^7.22.10",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.3",
@@ -35,7 +38,15 @@
     "@rollup/plugin-terser": "^0.4.3",
     "@types/node": "^20.5.6",
     "@types/uuid": "^9.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "esbuild": "^0.19.2",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "prettier": "^3.0.3",
     "rimraf": "^5.0.1",
     "rollup": "^3.27.2",
     "rollup-plugin-delete": "^2.0.0",
@@ -47,5 +58,11 @@
   },
   "dependencies": {
     "uuid": "^9.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{js,ts,json}": [
+      "yarn run lint",
+      "prettier --write"
+    ]
   }
 }