visual-buried-point-platform-h5 1.3.4

package/src/index.ts

@@ -0,0 +1,341 @@
+import { Config, setConfig } from "./config";
+import {
+  handleErr,
+  handlePerf,
+  handleHashchange,
+  handleHistorystatechange,
+  handleClick,
+  handleBlur,
+  handleResource,
+  handleSum,
+  handleAvg,
+  handleMsg,
+  handleHealth,
+  handleApi,
+  listenCircleListener,
+  queryEventList,
+  listenMessageListener,
+  setPage,
+  queryMetaConfigList,
+} from "./handlers";
+import {
+  on,
+  off,
+  parseHash,
+  isPlatform,
+  randomUUID,
+  detect,
+} from "./utils/tools";
+import { hackState, hackhook } from "./hack";
+import { GlobalVal } from "./config/global";
+import {
+  lazyReportCache,
+  report,
+  onStartTrackReport,
+  onDestroyTrackReport,
+  reportCuEvent,
+  onCustReport,
+} from "./utils/lazyReport";
+import { clearCache, getCache } from "./utils/cache";
+import { getDocumentElement } from "./utils/cloneDocument";
+import { ICustomData } from "./typings";
+
+let timer;
+let st;
+export default class Bombay {
+  constructor(options, fn) {
+    this.init(options);
+  }
+  init(options) {
+    // 没有token,则不监听任何事件
+    const platform = isPlatform();
+    if (
+      options &&
+      options.enableJavaScriptBridge &&
+      platform === "android" &&
+      options.androidToken
+    ) {
+      options.token = options.androidToken;
+    } else if (
+      options &&
+      options.enableJavaScriptBridge &&
+      platform === "ios" &&
+      options.iosToken
+    ) {
+      options.token = options.iosToken;
+    }
+    if (options && !options.token) {
+      console.warn("请输入一个token");
+      return;
+    }
+
+    setConfig(options);
+    const onEvent = (type) => {
+      const callback = () => {
+        // 当纯HTML加载完成 上报一次性能数据
+        if (type === "DOMContentLoaded") {
+          window.dsy_app_call_js = function (params: any) {
+            // 监听APP下发消息
+            if (options.enableJavaScriptBridge) {
+              GlobalVal.enableJavaScriptBridgeCircle = true;
+              // 获取当前页面数据
+            }
+          };
+          GlobalVal.userId = localStorage.getItem("userId")
+            ? localStorage.getItem("userId")
+            : "";
+          GlobalVal.anonId = localStorage.getItem("anonId");
+          if (!GlobalVal.anonId) {
+            GlobalVal.anonId = randomUUID();
+            localStorage.setItem("anonId", GlobalVal.anonId);
+          }
+          //清空路由记录
+          GlobalVal.routerArray = [];
+          //链路id, 单次访问系统时唯一
+          GlobalVal.trackId = Date.now().toString();
+          //运行环境和操作系统
+          GlobalVal.accessPath = detect();
+          //访问来源取referrer
+          GlobalVal.referrer = localStorage.getItem("referrer")
+            ? localStorage.getItem("referrer")
+            : "";
+          /**
+           * 以下在内嵌的H5中会出现接口查询事件列表空
+           * 而出现可能丢失浏览量数据
+           */
+          setTimeout(() => {
+            lazyReportCache({
+              type: "performance",
+              subType: type.toLocaleLowerCase(),
+              startTime: performance.now(), // 页面加载完成
+            });
+            let page = Config.enableSPA
+              ? parseHash(location.hash.toLowerCase())
+              : location.pathname.toLowerCase();
+            setPage(page, true);
+          }, 1000);
+        }
+        // 当页面完全加载时 上报埋点数据
+        if (type === "load") {
+          queryEventList(); // 查询已埋点事件
+          //queryMetaConfigList(); //查询元素配置表
+          // 是否上报页面性能
+          Config.isPage && handlePerf();
+          // 是否开启单页面
+          Config.enableSPA && this.addListenRouterChange();
+          // 是否上报错误消息
+          Config.isError && this.addListenJs();
+          // 是否上报ajax性能数据
+          Config.isAjax && this.addListenAjax();
+          // 是否录屏
+          // Config.isRecord && this.addRrweb();
+          // 行为是一个页面内的操作
+          Config.isBehavior && this.addListenBehavior();
+          Config.isResource && this.sendResource();
+          // 上报健康数据
+          Config.isRecord && this.addListenUnload();
+          // 绑定全局变量
+          window.__bb = this;
+
+          // 开启可视化圈选操作  监听message
+          listenMessageListener();
+          if (GlobalVal.circle) {
+            listenCircleListener();
+          }
+          // this.skData();
+        }
+        // 当页面进入后台或关闭前时，将所有的 cache 数据进行上报
+        if (
+          type === "beforeunload" ||
+          type === "onHidden" ||
+          type === "onunload"
+        ) {
+          // GlobalVal.leaveUrl = location.href;
+          // handleHealth();
+          // const data = getCache();
+          // if (data.length) {
+          //   let _d = JSON.parse(sessionStorage.getItem("skipData"));
+          //   let d = _d ? _d.concat(data) : data;
+          //   sessionStorage.setItem("skipData", JSON.stringify(d));
+          //   clearTimeout(st);
+          // }
+        }
+        window.removeEventListener(type, callback, true);
+      };
+      window.addEventListener(type, callback, true);
+    };
+    // 当页面完全加载完成时才会上报埋点事件 需要监听`load`及`DOMContentLoaded`;
+    ["load", "DOMContentLoaded"].forEach((type) => onEvent(type));
+    // 当页面进入后台或关闭前时，将所有的 cache 数据进行上报
+    ["beforeunload", "onHidden", "onunload"].forEach((type) => onEvent(type));
+    // 监听手机进入后台管理情况
+    document.onvisibilitychange = () => {
+      // 离开当前页面如切换到多任务窗口
+      if (document.visibilityState === "hidden") {
+        // handleHealth();
+      }
+      if (document.visibilityState === "visible") {
+        // let page = Config.enableSPA
+        //   ? parseHash(location.hash.toLowerCase())
+        //   : location.pathname.toLowerCase();
+        // setPage(page, true);
+      }
+    };
+    // 监听页面加载完成
+    document.onreadystatechange = () => {
+      if (document.readyState === "complete") {
+        console.log("监听页面加载完成");
+        //获取H5 SDK初始化的页面标识为入口页面后续以此url比对
+        GlobalVal.enterUrl = location.href;
+        if (options.enableJavaScriptBridge) {
+          getDocumentElement();
+          timer = setInterval(() => {
+            getDocumentElement();
+          }, 5000);
+        }
+      }
+    };
+  }
+
+  // 绑定用户ID
+  setUserInfo(userId: any) {
+    if (userId) {
+      GlobalVal.userId = userId;
+      localStorage.setItem("userId", userId);
+    } else {
+      GlobalVal.userId = "";
+      localStorage.setItem("userId", "");
+    }
+  }
+
+  // 调用自定义上报
+  setCustomEvent(cData: ICustomData) {
+    onCustReport(cData);
+  }
+
+  // 注册
+  onStartTrack(tData: any) {
+    onStartTrackReport(tData);
+  }
+
+  // 销毁
+  onDestroyTrack() {
+    onDestroyTrackReport();
+  }
+
+  // 补上报skipData的数据
+  skData() {
+    st = setTimeout(() => {
+      let d = JSON.parse(sessionStorage.getItem("skipData"));
+      if (d) {
+        let data = getCache();
+        reportCuEvent(data, true);
+        clearCache();
+      }
+    }, 5000);
+  }
+
+  // 发送资源
+  sendResource() {
+    "complete" === window.document.readyState
+      ? handleResource()
+      : this.addListenResource();
+  }
+
+  // 监听资源
+  addListenResource() {
+    on("load", handleResource);
+  }
+
+  // 监听行为
+  addListenBehavior() {
+    // Config.behavior.console.length && hackConsole();
+    Config.behavior.click && this.addListenClick();
+  }
+
+  // 监听click
+  addListenClick() {
+    on("click", handleClick); // 非输入框点击，会过滤掉点击输入框
+    // on("blur", handleBlur); // 输入框失焦
+  }
+
+  // 监听路由
+  addListenRouterChange() {
+    hackState("pushState");
+    hackState("replaceState");
+    on("hashchange", handleHashchange);
+    on("historystatechanged", handleHistorystatechange);
+  }
+
+  addListenJs() {
+    // js错误或静态资源加载错误
+    on("error", handleErr);
+    //promise错误
+    on("unhandledrejection", handleErr);
+    // window.addEventListener('rejectionhandled', rejectionhandled, true);
+  }
+
+  addListenAjax() {
+    hackhook();
+  }
+
+  // beforeunload
+  addListenUnload() {
+    on("beforeunload", handleHealth);
+    this.destroy();
+  }
+
+  // 移除路由
+  removeListenRouterChange() {
+    off("hashchange", handleHashchange);
+    off("historystatechanged", handleHistorystatechange);
+  }
+
+  removeListenJs() {
+    off("error", handleErr);
+    off("unhandledrejection", handleErr);
+  }
+
+  // 监听资源
+  removeListenResource() {
+    off("beforeunload", handleHealth);
+  }
+
+  removeListenAjax() {}
+
+  removeListenUnload() {
+    off("load", handleResource);
+  }
+
+  removeRrweb() {}
+
+  sum(key: string, val: number) {
+    handleSum(key, val);
+  }
+
+  avg(key: string, val: number) {
+    handleAvg(key, val);
+  }
+
+  msg(key: string) {
+    handleMsg(key);
+  }
+
+  api(api, success, time, code, msg) {
+    handleApi(api, success, time, code, msg, Date.now());
+  }
+
+  destroy() {
+    timer && clearInterval(timer);
+    st && clearTimeout(timer);
+    Config.enableSPA && this.removeListenRouterChange();
+    Config.isError && this.removeListenJs();
+    Config.isAjax && this.removeListenAjax();
+    Config.isRecord && this.removeRrweb();
+    Config.isResource && this.removeListenResource();
+  }
+}
+
+// export default (options: any, fn: any) => {
+//   return new Bombay(options, fn);
+// };

package/src/reporter.ts

@@ -0,0 +1,122 @@
+import { Config } from "./config";
+import { ReportData } from "./typings";
+import { serialize, warn } from "./utils/tools";
+// post上报
+export function send(msg: ReportData) {
+  // var body = msg[msg.t];
+  // delete msg[msg.t];
+  // var url = `${Config.reportUrl}?${serialize(msg)}`;
+  // post(url, {
+  //   [msg.t]: body,
+  // });
+  // new Image().src = `${Config.reportUrl}?${serialize(msg)}`
+  // request({
+  //   url: Config.reportUrl,
+  //   type: "POST",
+  //   async: false,
+  //   data: {
+  //     data: msg,
+  //     dataAbstract: "上报数据摘要",
+  //   },
+  // });
+}
+
+export function post(url: string, body: { [x: string]: any }) {
+  // var XMLHttpRequest = window.__oXMLHttpRequest_ || window.XMLHttpRequest;
+  // if (typeof XMLHttpRequest === "function") {
+  //   try {
+  //     var xhr = new XMLHttpRequest();
+  //     xhr.open("POST", url, !0);
+  //     xhr.setRequestHeader("Content-Type", "text/plain");
+  //     xhr.setRequestHeader("ProjectId", Config.token);
+  //     xhr.send(JSON.stringify(body));
+  //   } catch (e) {
+  //     warn("[bombayjs] Failed to log, POST请求失败");
+  //   }
+  // } else {
+  //   warn("[bombayjs] Failed to log, 浏览器不支持XMLHttpRequest");
+  // }
+}
+
+// 健康检查上报
+export function sendBeacon(e: any) {
+  "object" == typeof e && (e = serialize(e));
+  e = `${Config.reportUrl}?${e}`;
+  window && window.navigator && "function" == typeof window.navigator.sendBeacon
+    ? window.navigator.sendBeacon(e)
+    : warn("[arms] navigator.sendBeacon not surported");
+}
+/**
+ * 对象参数的处理
+ * @param data
+ * @returns {string}
+ */
+function getParams(data) {
+  var arr = [];
+  for (var param in data) {
+    arr.push(encodeURIComponent(param) + "=" + encodeURIComponent(data[param]));
+  }
+  // arr.push(("randomNumber=" + Math.random()).replace(".", ""));
+  return arr.join("&");
+}
+
+// 原生请求封装
+export function request(options: any = {}) {
+  // 传入方式默认为对象
+  // options = options || {};
+  // 默认为GET请求
+  options.type = (options.type || "GET").toUpperCase();
+  // 返回值类型默认为json
+  options.dataType = options.dataType || "json";
+  // 默认为异步请求
+  options.async = options.async || true;
+  var params = getParams(options.data);
+  var xhr;
+  if (window.XMLHttpRequest) {
+    /**
+     * W3C标准
+     * */
+    xhr = new XMLHttpRequest();
+  } else {
+    /**
+     * IE标准
+     * @type {ActiveXObject}
+     */
+    // xhr = new ActiveXObject("Microsoft.XMLHTTP");
+  }
+  xhr.timeout = 10000;
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState == 4) {
+      var status = xhr.status;
+      if (status >= 200 && status < 300) {
+        options.success && options.success(xhr.responseText, xhr.responseXML);
+      } else {
+        options.fail && options.fail(status);
+      }
+    }
+  };
+
+  if (options.type === "GET") {
+    xhr.open("GET", options.url + "?" + params, options.async);
+    xhr.setRequestHeader("projectId", Config.token);
+    xhr.send(null);
+  } else if (options.type === "POST") {
+    /**
+     *打开请求
+     * */
+    xhr.open("POST", options.url, options.async);
+    /**
+     * POST请求设置请求头
+     * */
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.setRequestHeader("projectId", Config.token);
+    xhr.setRequestHeader("appKey", Config.token);
+    // if (Config.appkey) {
+    //   xhr.setRequestHeader("appKey", Config.appkey);
+    // }
+    /**
+     * 发送请求参数
+     */
+    xhr.send(JSON.stringify(options.data));
+  }
+}

package/src/typing.d.ts

@@ -0,0 +1,24 @@
+interface Navigator {
+  connection: any;
+}
+
+interface Window {
+  attachEvent: any;
+  detachEvent: any;
+  CustomEvent: any;
+  __oXMLHttpRequest_: any;
+  XMLHttpRequest: any;
+  __bb: any;
+  __bb_onpopstate_: any;
+  dsy_app_call_js: any;
+}
+
+interface HTMLStyleElement {
+  styleSheet: {
+    cssText: string
+  }
+}
+
+declare module 'pako';
+declare module 'js-base64';
+declare module 'md5';