cwj_monitoring 0.0.14 → 0.0.15

package/README.md

@@ -1,17 +1,7 @@
-# monitor
+# 介绍
 
 一个简易的前端监控 SDK DEMO，仅供学习，请勿在生产环境中使用。
 
-## DEMO
-
-克隆项目后，执行命令打开服务器。
-
-```
-npm run server
-```
-
-然后用 vscode 的 `live server` 插件访问 index.html 文件，即可尝试体验监控 SDK 的效果。同时打开开发者工具，点击 network 标签，可以看到上报数据的发送请求。
-
 ## 目前已实现的功能
 
 1. 行为监控：点击监控，页面跳转监控，页面停留时间监控
@@ -20,29 +10,31 @@ npm run server
 
 注：目前点击监控只支持button标签触发的点击事件
 
-## 通过 npm 使用
+## 源码涉及的设计模式
+1. 单例模式
+2. 代理模式
+3. 模板方法模式
+4. 工厂方法模式
+5. 责任链模式
 
-安装
+## 安装
 
 ```
 npm i cwj_monitoring
 ```
 
-引入
+## 使用
 
 ```js
-import { init } from 'cwj_monitoring';
+import { init , TYPES} from 'cwj_monitoring';
 
 //使用 init 全局进行初始化
 init({
   url: 'http://localhost:8080', //必传参数，数据上传服务器地址
   max: 10, //可选参数，最大缓存数，即超过缓存数立即上传，默认为5
   time: 60000, //可选参数，最大缓存时间，即超过最大缓存时间立即上传，默认30s
-  error: true, //可选参数，是否监听错误事件，默认关闭
-  click: true, //可选参数，是否监听点击事件，默认关闭
-  performance: true, //可选参数，是否监听性能指标，默认关闭
-  router: true, //可选参数，是否监听路由事件，默认关闭
-  data: {}, //可选参数，例如项目的名称与版本号data:{vs:'0.1.1'}
+  plugin:[TYPES.ERROR,TYPES.CLICK,TYPES.PERFORMANCE,TYPES.ROUTER],//可选参数，错误事件，点击事件，性能指标，路由，传递几个就调用几个
+  data: {}, //可选参数，初始化时外部传入的固定参数，例如项目的名称与版本号data:{vs:'0.1.1'}
 });
 
 //无论vue的全局错误捕获，还是react的错误边界，都可使用window.$track.emit手动上传错误

package/dist/index.d.ts

@@ -1,16 +1,19 @@
-interface Monitor {
-  error?: boolean;
-  click?: boolean;
-  performance?: boolean;
-  router?: boolean;
-}
-
-//初始化时传入的参数
-interface Options extends Monitor {
-  url: string;
-  max?: number;
-  time?: number;
-  data?: any;
+type Plugin = 'error' | 'click' | 'performance' | 'router';
+
+//初始化时传入的参数
+interface Options {
+  url: string;
+  max?: number;
+  time?: number;
+  plugin?: Plugin[];
+  data?: any;
+}
+
+declare enum TYPES {
+    ERROR = "error",
+    CLICK = "click",
+    PERFORMANCE = "performance",
+    ROUTER = "router"
 }
 
 declare const init: (options: Options) => void;
@@ -19,4 +22,4 @@ declare const _default: {
     init: (options: Options) => void;
 };
 
-export { _default as default, init };
+export { TYPES, _default as default, init };

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(){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 instanceof Error?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.paint(),this.lcp(),this.dcl(),this.load()}paint(){const e=new PerformanceObserver((r=>{for(const e of r.getEntries())"first-paint"===e.name?x.emit("performance_fp",e.startTime):"first-contentful-paint"===e.name&&x.emit("performance_fcp",e.startTime);e.disconnect()}));e.observe({type:"paint",buffered:!0})}lcp(){const e=new PerformanceObserver((r=>{e&&e.disconnect();for(const e of r.getEntries())x.emit("performance_lcp",e.startTime)}));e.observe({type:"largest-contentful-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 h="uuid";let w=()=>{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 w=()=>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({},w(),{width:window.screen.width,height:window.screen.height},{ratio:f(),os:(navigator.userAgent.match(/[(](.*?)[)]/)?.[0]||"").replace(/[()]/g,"")}),localStorage.getItem(h)?this.uuid=localStorage.getItem(h):(this.uuid=u(),localStorage.setItem(h,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 g(e,r){return e in r}var v=new class{cache;constructor(){this.cache=[]}getLength(){return this.cache.length}add(e){this.cache.push(e)}clear(){this.cache.length=0}};const b=e=>{const r=new Date(e),t=r.getFullYear(),o=r.getMonth()+1,n=r.getDate(),i=r.getHours(),s=r.getMinutes(),a=r.getSeconds(),c=e=>{let r="";return r=e<10?"0"+e:e.toString(),r};return t+"-"+c(o)+"-"+c(n)+" "+c(i)+":"+c(s)+":"+c(a)};class E extends l{url;max;time;timer;visitTime;data;constructor(e){super(),this.url=e.url,this.max=e.max||5,this.time=e.time||3e4,this.timer,this.visitTime=Date.now(),this.data=e.data}formatter(e,r){const t=Date.now(),o=Object.assign({},{device:this.device,uuid:this.uuid},{type:e,data:r,date:b(t),url:window.location.href,referrer:document.referrer,uuid:localStorage.getItem(h),duration:(n=t,i=this.visitTime,n<i&&([n,i]=[i,n]),Math.floor((n-i)/1e3)),userData:this.data});var n,i;return this.visitTime=t,o}send(){v.getLength()&&(p(this.url,v.cache),v.clear())}emit(e,r){const t=this.formatter(e,r);v.add(t),clearTimeout(this.timer),v.getLength()>=this.max?this.send():this.timer=setTimeout((()=>{this.send()}),this.time)}}var y=(e=>(e.ERROR="error",e.CLICK="click",e.PERFORMANCE="performance",e.ROUTER="router",e))(y||{});let x;function O(e){e.url?(x=new E(e),window.$track=x,function(e){for(const n in e)if(g(n,e)&&e[n])switch(n){case y.CLICK:o.monitor();break;case y.ERROR:r.monitor();break;case y.PERFORMANCE:i.monitor();break;case y.ROUTER:t.monitor()}}(e),window.addEventListener("beforeunload",x.send,!0)):console.error("@web-tracing: ","缺少参数url")}const L=function(){let e=!1;return function(r){e||(O(r),e=!0)}}();var T={init:L};export{T as default,L as init};
+class e{name;constructor(e){this.name=e}}var t=new class extends e{constructor(){super("error")}monitor(){this.JSError(),this.resourceError(),this.consoleError(),this.promiseError()}JSError(){window.onerror=(e,t,r,o,n)=>{_.emit("error_js",{msg:e,url:t,line:r,column:o,error:n})}}resourceError(){window.addEventListener("error",(function(e){const{target:t}=e;if(t instanceof HTMLLinkElement||t instanceof HTMLScriptElement||t instanceof HTMLImageElement||t instanceof HTMLAudioElement||t instanceof HTMLVideoElement||t instanceof HTMLIFrameElement){const e=t.src||t.href;_.emit("error_resource",e)}}),!0)}consoleError(){const e=window.console.error;window.console.error=function(t,...r){_.emit("error_console",t),e.apply(window.console,[t,...r])}}promiseError(){window.addEventListener("unhandledrejection",(function(e){e.reason instanceof Error?_.emit("error_promise",e.reason.message):_.emit("error_promise",e.reason)}))}};var r=new class extends e{constructor(){super("pv")}monitor(){this.Hash(),this.History()}Hash(){window.addEventListener("hashchange",(function(){_.emit("hashchange")}))}History(){const e=window.history.pushState,t=window.history.replaceState;window.history.pushState=function(){e.apply(window.history,arguments),_.emit("historychange")},window.history.replaceState=function(){t.apply(window.history,arguments),_.emit("historychange")},window.addEventListener("popstate",(function(){_.emit("historychange")}))}};var o=new class extends e{constructor(){super("behavior")}monitor(){["click"].forEach((function(e){let t;document.addEventListener(e,(r=>{clearTimeout(t),t=setTimeout((()=>{const t=r.target;t instanceof HTMLButtonElement&&_.emit(e,t.textContent)}),300)}),!0)}))}};var n,i=new class extends e{constructor(){super("performance")}monitor(){this.paint(),this.lcp(),this.dcl(),this.load()}paint(){const e=new PerformanceObserver((t=>{for(const e of t.getEntries())"first-paint"===e.name?_.emit("performance_fp",e.startTime):"first-contentful-paint"===e.name&&_.emit("performance_fcp",e.startTime);e.disconnect()}));e.observe({type:"paint",buffered:!0})}lcp(){const e=new PerformanceObserver((t=>{e&&e.disconnect();for(const e of t.getEntries())_.emit("performance_lcp",e.startTime)}));e.observe({type:"largest-contentful-paint",buffered:!0})}dcl(){window.addEventListener("DOMContentLoaded",(function(e){_.emit("performance_DOMContentLoaded",e.timeStamp)}))}load(){window.addEventListener("load",(function(e){_.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,t,r){if(m.randomUUID&&!t&&!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,t){r=r||0;for(var n=0;n<16;++n)t[r+n]=o[n];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return(c[e[t+0]]+c[e[t+1]]+c[e[t+2]]+c[e[t+3]]+"-"+c[e[t+4]]+c[e[t+5]]+"-"+c[e[t+6]]+c[e[t+7]]+"-"+c[e[t+8]]+c[e[t+9]]+"-"+c[e[t+10]]+c[e[t+11]]+c[e[t+12]]+c[e[t+13]]+c[e[t+14]]+c[e[t+15]]).toLowerCase()}(o)}const h="uuid";let l=()=>{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 t in navigator.mimeTypes)if("application/360softmgrplugin"===navigator.mimeTypes[t].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 l=()=>e,e};function w(){let e=0;const t=window.screen,r=navigator.userAgent.toLowerCase();return void 0!==window.devicePixelRatio?e=window.devicePixelRatio:~r.indexOf("msie")?t.deviceXDPI&&t.logicalXDPI&&(e=t.deviceXDPI/t.logicalXDPI):void 0!==window.outerWidth&&void 0!==window.innerWidth&&(e=window.outerWidth/window.innerWidth),e&&(e=Math.round(100*e)),e}class f{device;uuid;constructor(){this.device=Object.assign({},l(),{width:window.screen.width,height:window.screen.height},{ratio:w(),os:(navigator.userAgent.match(/[(](.*?)[)]/)?.[0]||"").replace(/[()]/g,"")}),localStorage.getItem(h)?this.uuid=localStorage.getItem(h):(this.uuid=u(),localStorage.setItem(h,this.uuid))}}var p=new class{cache;constructor(){this.cache=[]}getLength(){return this.cache.length}add(e){this.cache.push(e)}clear(){this.cache.length=0}};const v=e=>{const t=new Date(e),r=t.getFullYear(),o=t.getMonth()+1,n=t.getDate(),i=t.getHours(),s=t.getMinutes(),a=t.getSeconds(),c=e=>{let t="";return t=e<10?"0"+e:e.toString(),t};return r+"-"+c(o)+"-"+c(n)+" "+c(i)+":"+c(s)+":"+c(a)};class g extends f{url;max;time;timer;visitTime;data;constructor(e){super(),this.url=e.url,this.max=e.max||5,this.time=e.time||3e4,this.timer,this.visitTime=Date.now(),this.data=e.data}formatter(e,t){const r=Date.now(),o=Object.assign({},{device:this.device,uuid:this.uuid},{type:e,data:t,date:v(r),url:window.location.href,referrer:document.referrer,uuid:localStorage.getItem(h),duration:(n=r,i=this.visitTime,n<i&&([n,i]=[i,n]),Math.floor((n-i)/1e3)),userData:this.data});var n,i;return this.visitTime=r,o}send(){var e,t;p.getLength()&&(e=this.url,t=p.cache,navigator.sendBeacon(e,JSON.stringify(t)),p.clear())}emit(e,t){const r=this.formatter(e,t);p.add(r),clearTimeout(this.timer),p.getLength()>=this.max?this.send():this.timer=setTimeout((()=>{this.send()}),this.time)}}function x(e){return/^\d+$/.test(e.toString())}class b{nextValidator;constructor(){this.nextValidator=null}}const E=new class extends b{constructor(){super()}setNext(e){this.nextValidator=e}validate(e){return t=e.url,new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(t)?!this.nextValidator||this.nextValidator.validate(e):(console.error("请输入符合规范的url"),!1);var t}},y=new class extends b{constructor(){super()}setNext(e){this.nextValidator=e}validate(e){return e.max&&!x(e.max)?(console.error("max请输入正整数"),!1):!this.nextValidator||this.nextValidator.validate(e)}},O=new class extends b{constructor(){super()}setNext(e){this.nextValidator=e}validate(e){return e.time&&!x(e.time)?(console.error("time请输入正整数"),!1):!this.nextValidator||this.nextValidator.validate(e)}};E.setNext(y),y.setNext(O);var L=(e=>(e.ERROR="error",e.CLICK="click",e.PERFORMANCE="performance",e.ROUTER="router",e))(L||{});let _;function T(e){E.validate(e)&&(_=new g(e),window.$track=_,function(e){const n=e.plugin;n&&n.forEach((e=>{switch(e){case L.CLICK:o.monitor();break;case L.ERROR:t.monitor();break;case L.PERFORMANCE:i.monitor();break;case L.ROUTER:r.monitor()}}))}(e),window.addEventListener("beforeunload",_.send,!0))}const R=function(){let e=!1;return function(t){e||(T(t),e=!0)}}();var S={init:R};export{L as TYPES,S as default,R as init};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cwj_monitoring",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "基于 JS 适用Web端的插件，为前端项目提供【 行为、性能、异常 】监控手段",
   "repository": "https://github.com/cwjbjy/cwj_monitoring",
   "main": "dist",
@@ -8,7 +8,7 @@
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "serve": "rollup -c -w",
+    "server": "rollup -c -w",
     "lint": "eslint src --fix --ext .ts,.js --max-warnings 0"
   },
   "files": [
@@ -50,7 +50,7 @@
     "rimraf": "^5.0.1",
     "rollup": "^3.27.2",
     "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-dts": "^6.0.0",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-esbuild": "^5.0.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "tslib": "^2.6.1",