keeson-web-report-sdk 1.0.1 → 1.0.2

package/bundle.min.js

@@ -1 +1,432 @@
-function o(o){const t=[];return t.push(function(o){const t=history.pushState,e=history.replaceState;history.pushState=function(...e){const n=window.location.href,r=t.apply(this,e),s=window.location.href;return n!==s&&o({to:s,from:n}),r},history.replaceState=function(...t){const n=window.location.href,r=e.apply(this,t),s=window.location.href;return n!==s&&o({to:s,from:n}),r};const n=()=>{o({to:window.location.href,from:window.location.href})};return window.addEventListener("popstate",n),()=>{window.removeEventListener("popstate",n),history.pushState=t,history.replaceState=e}}(o)),()=>{t.forEach(o=>o())}}const t={appId:"",env:"production",appUrl:window.location.origin,reportError:!0,reportPromiseReject:!0,reportVueError:!0,vueInstance:null,reportPerformance:!0,reportLongTimeRequest:!0,longTimeRequestThreshold:2e3,reportErrorReqest:!0,reportUserNavigate:!0};class e{records=[];timer=null;options={};constructor(o){this.options={...t,...o}}init(){var t,e,n,r;if(this.options.reportError&&(t=({msg:o,url:t,line:e,col:n,error:r})=>{console.log({msg:o,url:t,line:e,col:n,error:r})},window.onerror=function(o,e,n,r,s){t&&t({msg:o,url:e,line:n,col:r,error:s})}),this.options.reportPromiseReject&&function(o){window.addEventListener("unhandledrejection",function(t){o&&o(t)})}(o=>{console.log("Unhandled Promise Rejection:",o,o.reason)}),this.options.reportVueError&&this.options.vueInstance&&function(o,t){o.config.errorHandler=function(o,e,n){console.error(`Error in ${n}:`,o),t&&t({err:o,vm:e,info:n})}}(this.options.vueInstance,({err:o,vm:t,info:e})=>{console.log("Vue error:",o,t,e)}),this.options.reportPerformance&&function(o){if(PerformanceNavigationTiming){const t=PerformanceNavigationTiming.loadEventEnd-PerformanceNavigationTiming.navigationStart;console.log("Page load time: "+t+"ms");const e=PerformanceNavigationTiming.getEntriesByType("largest-contentful-paint")[0];console.log("Largest Contentful Paint:",e.startTime);const n=PerformanceNavigationTiming.getEntriesByType("first-contentful-paint")[0];console.log("First Contentful Paint:",n.startTime);const r=PerformanceNavigationTiming.getEntriesByType("layout-shift")[0];console.log("Cumulative Layout Shift:",r.value);const s=PerformanceNavigationTiming.getEntriesByType("first-input-delay")[0];console.log("First Input Delay:",s.startTime),console.log("Total Blocking Time:",s.value);const i=PerformanceNavigationTiming.getEntriesByType("first-input")[0];console.log("First Input:",i.startTime);const a=PerformanceNavigationTiming.domainLookupEnd-PerformanceNavigationTiming.domainLookupStart;console.log("DNS查询时间:",a),o&&o({time:t,lcp:e,fcp:n,cls:r,fmp:s,FID:i,dnsTime:a})}}(({time:o,lcp:t,fcp:e,cls:n,fmp:r,FID:s,dnsTime:i})=>{console.log({time:o,lcp:t,fcp:e,cls:n,fmp:r,FID:s,dnsTime:i})}),this.options.reportLongTimeRequest&&(e=o=>{console.log(o)},n=o=>{console.log(o)},r=XMLHttpRequest.prototype.open,XMLHttpRequest.prototype.open=function(o,t,s,i,a){let c=Date.now();this.addEventListener("load",function(){const n=Date.now();e&&e({url:t,method:o,duration:n-c,status:this.status,statusText:this.statusText,response:this.responseText}),console.log("Response:",this.responseText)}),this.addEventListener("error",function(){console.log("Error:",this.statusText),n&&n({url:t,method:o,duration:duration,status:this.status,statusText:this.statusText,response:this.responseText})}),console.log("Request URL:",t),console.log("Request Method:",o),r.call(this,o,t,s,i,a)},function(o,t){var e=window.fetch;window.fetch=function(n,r){console.log("Fetch URL:",n),console.log("Fetch Options:",r),r&&r.headers&&(r.headers["X-Custom-Header"]="Value");let s=Date.now();return e(n,r).then(t=>{const e=Date.now();return o&&o({url:n,method:method,duration:e-s,status:t.status,statusText:t.statusText,response:t.responseText}),console.log("Response:",t),t}).catch(o=>{console.log("Error:",o),t&&t({url:n,method:method,duration:duration})})}}(o=>{console.log(o)},o=>{console.log(o)})),this.options.reportUserNavigate){const t=window.location.href;console.log("current href:",t),o(o=>{console.log("route change:",o)})}}addReportRecord(o){this.timer&&clearTimeout(this.timer),this.timer=setTimeout(()=>{try{this.sendReport(JSON.parse(JSON.stringify(this.records))),this.records=[]}catch(o){console.log(o)}},1e3),this.records.push(o)}sendReport(o){this.apiDo(this.records)}}let n;function r(o={}){n||(n=new e(o)),n.init()}export{r as init};
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.umd = {}));
+})(this, (function (exports) { 'use strict';
+
+  // 错误上报
+
+  // 全局错误处理
+  function globalErrorHandler(callback) {
+    window.onerror = function (msg, url, line, col, error) {
+     callback &&  callback({msg, url, line, col, error});
+    };
+  }
+
+  function promiseErrorHandler(callback) {
+    window.addEventListener("unhandledrejection", function (event) {
+      // console.log("Unhandled Promise Rejection:", event.reason);
+      callback && callback(event);
+    });
+  }
+
+  /**
+   * @param {*} v vue2的话是Vue，vue3的话是app
+   */
+  function vueErrorHandler(v, callback) {
+    // vue2 vue3
+    v.config.errorHandler = function (err, vm, info) {
+      // handle error
+      // `info` 是 Vue 特定的错误信息，比如错误发生在哪一个组件上
+      console.error(`Error in ${info}:`, err);
+      callback && callback({err, vm, info});
+    };
+  }
+
+  // react 
+  // export function reactErrorHandler() {
+  // }
+
+  // 性能上报
+  function reportPerformance(callback) {
+    if (PerformanceNavigationTiming) {
+      const time =
+        PerformanceNavigationTiming.loadEventEnd -
+        PerformanceNavigationTiming.navigationStart;
+      console.log("Page load time: " + time + "ms");
+
+      const lcp = PerformanceNavigationTiming.getEntriesByType(
+        "largest-contentful-paint"
+      )[0];
+      console.log("Largest Contentful Paint:", lcp.startTime);
+      const fcp = PerformanceNavigationTiming.getEntriesByType(
+        "first-contentful-paint"
+      )[0];
+      console.log("First Contentful Paint:", fcp.startTime);
+      const cls = PerformanceNavigationTiming.getEntriesByType("layout-shift")[0];
+      console.log("Cumulative Layout Shift:", cls.value);
+      const fmp =
+        PerformanceNavigationTiming.getEntriesByType("first-input-delay")[0];
+      console.log("First Input Delay:", fmp.startTime);
+      console.log("Total Blocking Time:", fmp.value);
+      const FID = PerformanceNavigationTiming.getEntriesByType("first-input")[0];
+      console.log("First Input:", FID.startTime);
+
+      // 计算DNS查询时间
+      const dnsTime =
+        PerformanceNavigationTiming.domainLookupEnd -
+        PerformanceNavigationTiming.domainLookupStart;
+      console.log("DNS查询时间:", dnsTime);
+
+
+      callback && callback({
+        time,
+        lcp,
+        fcp,
+        cls,
+        fmp,
+        FID,
+        dnsTime
+      });
+    }
+  }
+
+  function xhrReportHandle(onsuccess, onerror) {
+    var oldOpen = XMLHttpRequest.prototype.open;
+    XMLHttpRequest.prototype.open = function (method, url, async, user, pass) {
+      let startTime = Date.now();
+      this.addEventListener("load", function () {
+        const endTime = Date.now();
+        const duration = endTime - startTime;
+        onsuccess &&
+          onsuccess({
+            url: url,
+            method: method,
+            duration: duration,
+            status: this.status,
+            statusText: this.statusText,
+            response: this.responseText,
+          });
+        // 可以在这里处理响应
+        console.log("Response:", this.responseText);
+      });
+      this.addEventListener("error", function () {
+        console.log("Error:", this.statusText);
+        onerror &&
+          onerror({
+            url: url,
+            method: method,
+            duration: duration,
+            status: this.status,
+            statusText: this.statusText,
+            response: this.responseText,
+          });
+      });
+      // 修改或记录原始请求信息
+      console.log("Request URL:", url);
+      console.log("Request Method:", method);
+      // 继续原有的open调用
+      oldOpen.call(this, method, url, async, user, pass);
+    };
+  }
+
+  function fetchReportHandle(onsuccess, onerror) {
+    var realFetch = window.fetch;
+    window.fetch = function (url, options) {
+      console.log("Fetch URL:", url);
+      console.log("Fetch Options:", options);
+      // 可以在这里修改options，例如添加headers等
+      if (options && options.headers) {
+        options.headers["X-Custom-Header"] = "Value";
+      }
+      let startTime = Date.now();
+      // 继续原有的fetch调用
+      return realFetch(url, options)
+        .then((response) => {
+          const endTime = Date.now();
+          const duration = endTime - startTime;
+          onsuccess &&
+            onsuccess({
+              url: url,
+              method: method,
+              duration: duration,
+              status: response.status,
+              statusText: response.statusText,
+              response: response.responseText,
+            });
+          // 可以在这里处理响应
+          console.log("Response:", response);
+          return response;
+        })
+        .catch((error) => {
+          console.log("Error:", error);
+          onerror &&
+            onerror({
+              url: url,
+              method: method,
+              duration: duration,
+              // status: response.status,
+              // statusText: response.statusText,
+              // response: response.responseText,
+            });
+        });
+    };
+  }
+
+  // 用户行为上报
+
+  // 路由跳转监听
+
+  /**
+   * 监听地址栏路由变化，包括传统路由和虚拟路由（如Vue Router、React Router）
+   * 通过监听History API和popstate事件实现
+   * @param {Function} callback 路由变化时的回调函数，接收{ to, from }参数
+   * @returns {Function} 清理函数，用于移除监听
+   */
+  function routeChangeHandler(callback) {
+    // 保存原始的pushState和replaceState方法
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+
+    // 重写pushState方法
+    history.pushState = function (...args) {
+      const from = window.location.href;
+      const result = originalPushState.apply(this, args);
+      const to = window.location.href;
+      if (from !== to) {
+        callback({ to, from });
+      }
+      return result;
+    };
+
+    // 重写replaceState方法
+    history.replaceState = function (...args) {
+      const from = window.location.href;
+      const result = originalReplaceState.apply(this, args);
+      const to = window.location.href;
+      if (from !== to) {
+        callback({ to, from });
+      }
+      return result;
+    };
+
+    // 监听popstate事件（back/forward按钮）
+    const popstateHandler = () => {
+      // 对于popstate事件，我们无法直接获取from，所以使用当前URL作为from和to
+      // 在实际应用中，可以通过维护一个路由历史栈来获取更准确的from信息
+      callback({ to: window.location.href, from: window.location.href });
+    };
+    window.addEventListener("popstate", popstateHandler);
+
+    // 返回清理函数
+    return () => {
+      window.removeEventListener("popstate", popstateHandler);
+      // 恢复原始方法
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    };
+  }
+
+  // /**
+  //  * Vue Router路由监听
+  //  * @param {Object} router Vue Router实例
+  //  * @param {Function} callback 路由变化时的回调函数，接收{ to, from }参数
+  //  * @returns {Function} 清理函数，用于移除监听
+  //  */
+  // function vueRouterChangeHandler(router, callback) {
+  //     if (!router) {
+  //         console.warn('Vue Router实例未提供，无法监听路由变化');
+  //         return () => {};
+  //     }
+
+  //     // 使用Vue Router的beforeEach钩子监听路由变化
+  //     const removeRouterHook = router.beforeEach((to, from, next) => {
+  //         callback({ to, from });
+  //         next();
+  //     });
+
+  //     // 同时监听History API变化，确保覆盖所有路由变化场景
+  //     const removeHistoryListener = routeChangeHandler(callback);
+
+  //     // 返回组合的清理函数
+  //     return () => {
+  //         removeRouterHook();
+  //         removeHistoryListener();
+  //     };
+  // }
+
+  // /**
+  //  * React Router路由监听（支持v4+）
+  //  * @param {Object} history React Router的history对象
+  //  * @param {Function} callback 路由变化时的回调函数，接收{ to, from }参数
+  //  * @returns {Function} 清理函数，用于移除监听
+  //  */
+  // function reactRouterChangeHandler(history, callback) {
+  //     if (!history) {
+  //         console.warn('React Router的history对象未提供，无法监听路由变化');
+  //         return () => {};
+  //     }
+
+  //     let lastLocation = history.location;
+
+  //     // 使用history.listen监听路由变化
+  //     const unlisten = history.listen((location) => {
+  //         callback({ to: location, from: lastLocation });
+  //         lastLocation = location;
+  //     });
+
+  //     // 同时监听History API变化，确保覆盖所有路由变化场景
+  //     const removeHistoryListener = routeChangeHandler(callback);
+
+  //     // 返回组合的清理函数
+  //     return () => {
+  //         unlisten();
+  //         removeHistoryListener();
+  //     };
+  // }
+
+  /**
+   * 初始化路由监听
+   * @param {Object} options 配置选项
+   * @param {Object} [options.vueRouter] Vue Router实例
+   * @param {Object} [options.reactHistory] React Router的history对象
+   * @param {Function} callback 路由变化时的回调函数
+   * @returns {Function} 清理函数，用于移除所有监听
+   */
+  function initRouteListener(callback) {
+    const cleanups = [];
+
+    // // 如果提供了Vue Router实例，使用Vue Router的监听方式
+    // if (options.vueRouter) {
+    //     cleanups.push(vueRouterChangeHandler(options.vueRouter, callback));
+    // }
+
+    // // 如果提供了React Router的history对象，使用React Router的监听方式
+    // else if (options.reactHistory) {
+    //     cleanups.push(reactRouterChangeHandler(options.reactHistory, callback));
+    // }
+
+    // // 否则使用通用的路由监听方式
+    // else {
+    //     cleanups.push(routeChangeHandler(callback));
+    // }
+    cleanups.push(routeChangeHandler(callback));
+    // 返回组合的清理函数
+    return () => {
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }
+
+  const defaultOptions = {
+    appId: "", // appId
+    // appName: '',
+    // appVersion: '',
+    env: "production",
+    appUrl: window.location.origin, // 站点地址, 对应应用配置网站站点地址
+
+    reportError: true,
+    reportPromiseReject: true,
+    reportVueError: true,
+    vueInstance: null,
+
+    reportPerformance: true, // 是否上报性能数据
+
+    reportLongTimeRequest: true, // 是否上报长请求时间接口
+    longTimeRequestThreshold: 2000, // 长请求时间阈值，单位毫秒
+    reportErrorReqest: true, // 是否上报报错请求
+
+    reportUserNavigate: true, // 是否上报用户导航行为
+  };
+
+  class Report {
+    records = [];
+    timer = null;
+    options = {};
+    constructor(options) {
+      this.options = { ...defaultOptions, ...options };
+    }
+    init() {
+      // listen and callback
+      if (this.options.reportError) {
+        globalErrorHandler(({ msg, url, line, col, error }) => {
+          console.log({ msg, url, line, col, error });
+        });
+      }
+      if (this.options.reportPromiseReject) {
+        promiseErrorHandler((event) => {
+          console.log("Unhandled Promise Rejection:", event, event.reason);
+        });
+      }
+      if (this.options.reportVueError && this.options.vueInstance) {
+        vueErrorHandler(
+          this.options.vueInstance,
+          ({ err, vm, info }) => {
+            console.log("Vue error:", err, vm, info);
+          }
+        );
+      }
+
+      if (this.options.reportPerformance) {
+        reportPerformance(
+          ({ time, lcp, fcp, cls, fmp, FID, dnsTime }) => {
+            console.log({
+              time,
+              lcp,
+              fcp,
+              cls,
+              fmp,
+              FID,
+              dnsTime,
+            });
+          }
+        );
+      }
+
+      if (this.options.reportLongTimeRequest) {
+        xhrReportHandle(
+          (duration) => {
+            console.log(duration);
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+        fetchReportHandle(
+          (duration) => {
+            console.log(duration);
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }
+
+      if (this.options.reportUserNavigate) {
+        const href = window.location.href;
+        // 上报当前路由
+        console.log("current href:", href);
+        initRouteListener((record) => {
+          // 上报路由变化
+          // this.addReportRecord(record);
+          console.log("route change:", record);
+        });
+      }
+    }
+    addReportRecord(record) {
+      this.timer && clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        try {
+          this.sendReport(JSON.parse(JSON.stringify(this.records)));
+          this.records = [];
+        } catch (error) {
+          console.log(error);
+        }
+      }, 1000);
+      this.records.push(record);
+    }
+    sendReport(records) {
+      // if(this.records.length === 0) return;
+      // todo: 上报数据 api
+      this.apiDo(this.records);
+    }
+  }
+
+  let report;
+  function init(options = {}) {
+    if (!report) report = new Report(options);
+    report.init();
+  }
+
+  exports.init = init;
+
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keeson-web-report-sdk",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "for web/h5",
   "main": "bundle.min.js",
   "type": "module",