visual-buried-point-platform-h5 1.3.4

package/src/utils/lazyReport.ts

@@ -0,0 +1,425 @@
+import { Base64 } from "js-base64";
+import MD5 from "md5";
+import pako from "pako";
+import { Config } from "../config";
+import { GlobalVal } from "../config/global";
+import { request } from "../reporter";
+import { addCache, clearCache, getCache } from "./cache";
+import { addCacheCu, clearCacheCu, getCacheCu } from "./cacheCu";
+import { parsePVUVUrl, timeToStr } from "./tools";
+import { originalOpen, originalSend, originalSet } from "./xhr";
+
+export function isSupportSendBeacon() {
+  return !!window.navigator?.sendBeacon;
+}
+
+// const sendBeacon = isSupportSendBeacon()
+//   ? window.navigator.sendBeacon.bind(window.navigator)
+//   : reportWithXHR;
+
+const sendBeacon = (url: string, reportData: Record<string, any>) => {
+  request({
+    url: url,
+    type: "POST",
+    data: reportData,
+  });
+};
+
+export function report(data, isImmediate = false) {
+  if (!Config.reportUrl) {
+    console.error("请设置上传 url 地址");
+  }
+  data = skipData(data, "time");
+  // 上传数据压缩
+  const str = JSON.stringify(data);
+  const output = pako.gzip(str, { to: "string" });
+  // 解压缩示例
+  // const compressed = new Uint8Array(output);
+  // const result = pako.inflate(compressed, { to: "string" });
+  // 调试上报的数据
+  // const base64jiem = Base64.atob("xxx");
+  // console.log("result: ", pako.inflate(base64jiem, { to: "string" }));
+  const base64Str = Base64.btoa(output);
+  const md5Str = MD5(base64Str);
+
+  const reportData = {
+    data: base64Str,
+    dataAbstract: md5Str,
+  };
+
+  if (isImmediate) {
+    sendBeacon(Config.reportUrl, reportData);
+    return;
+  }
+
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(
+      () => {
+        sendBeacon(Config.reportUrl, reportData);
+      },
+      { timeout: 3000 }
+    );
+  } else {
+    setTimeout(() => {
+      sendBeacon(Config.reportUrl, reportData);
+    });
+  }
+}
+
+// 新的pvuv上报
+export function reportPuv(data) {
+  if (!Config.reportTrackUrl) {
+    console.error("please setting track report url ");
+    return;
+  }
+  const comData = commonData(data);
+  const reportData = {
+    ...comData,
+    dataAbstract: MD5(JSON.stringify(comData)),
+  };
+  sendBeacon(Config.reportTrackUrl, reportData);
+}
+
+// 新的自定义埋点上报
+export function reportCuEvent(data, isImmediate = false) {
+  if (!Config.reportEventUrl) {
+    console.error("please setting custom event report url ");
+    return;
+  }
+  const comData = commonData(data);
+  const reportData = {
+    ...comData,
+    dataAbstract: MD5(JSON.stringify(comData)),
+  };
+  if (isImmediate) {
+    sendBeacon(Config.reportEventUrl, reportData);
+    return;
+  }
+  if (window.requestIdleCallback) {
+    window.requestIdleCallback(
+      () => {
+        sendBeacon(Config.reportEventUrl, reportData);
+      },
+      { timeout: 3000 }
+    );
+  } else {
+    setTimeout(() => {
+      sendBeacon(Config.reportEventUrl, reportData);
+    });
+  }
+}
+
+let timer = null;
+let timerCu = null;
+// 流量上报采集
+let startTime = 0;
+let startTimeLong = 0;
+let tInterval = null;
+let busObj = null;
+export function lazyReportCache(data, timeout = 3000) {
+  // 当APP与内嵌H5埋点通信时  暂不上报已埋点数据  仅操作埋点
+  if (GlobalVal.enableJavaScriptBridgeCircle) {
+    return false;
+  }
+  if (
+    data.t === "pv" ||
+    data.t === "behavior" ||
+    data.t === "health" ||
+    data.t === "custom"
+  ) {
+    // 数据清洗
+    const eventList = sessionStorage.getItem("eventList")
+      ? JSON.parse(sessionStorage.getItem("eventList"))
+      : [];
+    // 可视化上报obj
+    let reportData = null;
+    // 页面性能数据、用于可视化离开页面采集数据obj
+    let healthData = null;
+    if (data.t === "pv") {
+      const browseList = eventList.filter(
+        (event) => event.type === "browse" && event.buryingType === "visual"
+      );
+      // 可视化页面浏览数据
+      for (let index = 0; index < browseList.length; index++) {
+        const item = browseList[index];
+        if (item.screenName == data.original_url) {
+          healthData = {
+            busSegment: item.busSegment ? item.busSegment : "",
+            ctk: "",
+            duration: 0,
+            element: null,
+            eventId: item.id,
+            groupId: item.groupId ? item.groupId : "",
+            module: item.module ? item.module : "",
+            event: item.eventCode,
+            path: "",
+            page: {
+              domain: window.location.hostname,
+              pageId: MD5(data.original_url),
+              path: data.original_url,
+              title: document.title,
+            },
+            properties: "",
+            traceId: "",
+            trackId: GlobalVal.trackId,
+            triggerTime: timeToStr(Date.now()),
+          };
+          break;
+        }
+      }
+    }
+    // 行为数据`click`
+    if (data.t === "behavior" && data.data && data.type === "setElmPath") {
+      const behaviorList = eventList.filter(
+        (event) => event.type === "click" && event.buryingType === "visual"
+      );
+      for (let index = 0; index < behaviorList.length; index++) {
+        const item = behaviorList[index];
+        // data.data.properties.$element_type ==>data.data.properties.$url
+        // `${item.screenName}/${item.elementSelector}`.includes(
+        //   `${data.data.properties.$url}/${data.data.properties.$element_selector}`
+        // )
+        let flag =
+          data.data.properties.$url.includes(item.screenName) &&
+          `${data.data.properties.$element_selector}`.startsWith(
+            `${item.elementSelector}`
+          );
+
+        if (flag) {
+          let _path = window.location.pathname;
+          reportData = {
+            busSegment: item.busSegment,
+            ctk: "",
+            duration: 0,
+            element: {
+              className: data.data.properties.$element_class_name,
+              content: data.data.properties.$element_content,
+              id: "",
+              path: data.data.properties.$element_path,
+              position: "",
+              selector: data.data.properties.$element_selector,
+              type: data.data.properties.$element_type,
+            },
+            eventId: item.id,
+            groupId: item.groupId ? item.groupId : "",
+            module: item.module,
+            event: item.eventCode,
+            path: data.data.properties.$element_path,
+            page: {
+              domain: window.location.hostname,
+              pageId: MD5(_path),
+              path: _path,
+              title: document.title,
+            },
+            properties: "",
+            traceId: "",
+            trackId: GlobalVal.trackId,
+            triggerTime: timeToStr(Date.now()),
+          };
+          break;
+        }
+      }
+    }
+    //离开页面
+    if (data.t === "health") {
+      if (
+        Config.enableTrackPageLeave &&
+        healthData &&
+        healthData.eventCode &&
+        healthData.eventId
+      ) {
+        reportData = {
+          ...healthData,
+          duration: data.stay,
+        };
+      }
+    }
+
+    // 可视化埋点新的数据结构
+    if (reportData) {
+      addCache(reportData);
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const data = getCache();
+        if (data.length) {
+          reportCuEvent(data);
+          clearCache();
+        }
+      }, timeout);
+    }
+  }
+}
+
+// 自定义部分 type=>custom event=>到四种具体事件类型 extend_param 扩展字段
+export function onCustReport(data) {
+  const _page = data.$page ? data.$page : "";
+  const _path = _page.path ? _page.path : window.location.pathname;
+  const reportEventData = {
+    ctk: data.$ctk ? data.$ctk : "",
+    duration: data.$duration ? data.$duration : "",
+    element: null,
+    eventId: data.$id ? data.$id : "",
+    event: data.$event_code ? data.$event_code : "",
+    groupId: "",
+    busSegment: data.$busSegment,
+    module: data.$module,
+    properties: data.$extend_param ? JSON.stringify(data.$extend_param) : "",
+    traceId: "",
+    trackId: GlobalVal.trackId,
+    triggerTime: timeToStr(Date.now()),
+    path: data.$path,
+    page: {
+      domain: _page.domain ? _page.domain : "",
+      pageId: MD5(_path),
+      path: _path,
+      title: _page.title ? _page.title : "",
+    },
+  };
+
+  //自定义上报新数据结构
+  if (reportEventData) {
+    addCacheCu(reportEventData);
+    clearTimeout(timerCu);
+    timerCu = setTimeout(() => {
+      const data = getCacheCu();
+      if (data.length) {
+        reportCuEvent(data);
+        clearCacheCu();
+      }
+    }, 3000);
+  }
+}
+
+/**
+ *  获取circulation等数据
+ */
+const getTrackObj = () => {
+  let gcp = GlobalVal.routerArray;
+  let hs = history.state;
+  if (gcp) {
+    let curPath = gcp[gcp.length - 1];
+    let sUrl = "";
+    if (gcp.length > 1) {
+      sUrl = gcp[gcp.length - 2];
+    } else {
+      sUrl = curPath;
+    }
+    return {
+      path: curPath,
+      circulation: gcp.length > 1 ? 2 : 1,
+      sourceUrl: sUrl,
+      visitPage: gcp.length,
+    };
+  } else if (hs) {
+    let curPath = hs.current;
+    let sUrl = hs.back ? hs.back : curPath;
+    return {
+      path: curPath,
+      circulation: hs.back ? 2 : 1,
+      sourceUrl: sUrl,
+      visitPage: hs.position + 1,
+    };
+  } else {
+    return {
+      path: "/",
+      circulation: 1,
+      sourceUrl: "/",
+      visitPage: 1,
+    };
+  }
+};
+
+const onTrackReport = (type: string) => {
+  let puvData = null;
+  if (type === "destroy") {
+    startTime = (Date.now() - startTimeLong) / 1000;
+  }
+  let dt = document.title;
+  let obj = getTrackObj();
+  puvData = {
+    busSegment: busObj.busSegment ? busObj.busSegment : Config.busSegment,
+    circulation: obj.circulation,
+    ctk: busObj.ctk ? busObj.ctk : "",
+    domain: busObj.domain ? busObj.domain : "",
+    duration: startTime === 0 ? 0 : startTime,
+    module: busObj.module ? busObj.module : Config.module,
+    path: obj.path,
+    properties: busObj.extend_param ? JSON.stringify(busObj.extend_param) : "",
+    sourceDomain: busObj.sourceDomain ? busObj.sourceDomain : "",
+    sourceUrl: obj.sourceUrl,
+    sourceType: "route",
+    title: busObj.title ? busObj.title : dt,
+    traceId: "",
+    trackId: GlobalVal.trackId,
+    visitPage: obj.visitPage,
+    visitTime: timeToStr(Date.now()),
+  };
+  if (puvData) {
+    reportPuv([puvData]);
+  }
+};
+
+/**
+ * 注册
+ */
+export function onStartTrackReport(tData: any) {
+  parsePVUVUrl();
+  busObj = null;
+  startTime = 0;
+  startTimeLong = Date.now();
+  busObj = tData;
+  clearInterval(tInterval);
+  onTrackReport("start");
+  tInterval = setInterval(() => {
+    startTime += 15;
+    startTimeLong = Date.now();
+    onTrackReport("start");
+  }, 15 * 1000);
+}
+
+/**
+ * 销毁
+ */
+export function onDestroyTrackReport() {
+  onTrackReport("destroy");
+  clearInterval(tInterval);
+}
+
+const commonData = (allData) => {
+  return {
+    app: GlobalVal.app,
+    data: allData,
+    device: GlobalVal.device,
+    lsi: GlobalVal.lsi,
+    projectId: Config.token,
+    userAgent: navigator ? navigator.userAgent : "",
+    anonymousId: GlobalVal.anonId,
+    userId: GlobalVal.userId,
+  };
+};
+
+export function reportWithXHR(data) {
+  const xhr = new XMLHttpRequest();
+  originalOpen.call(xhr, "post", Config.reportUrl);
+  originalSet.call("projectId", Config.token);
+  originalSend.call(xhr, JSON.stringify(data));
+}
+
+//去重cache和storage数据,避免上报重复数据
+function skipData(_data, time: string) {
+  let d = JSON.parse(sessionStorage.getItem("skipData"));
+  if (d) {
+    let temp = {};
+    let result = [];
+    let arr = d.concat(_data);
+    arr.forEach((item) => {
+      if (!temp[item[time]]) {
+        result.push(item);
+        temp[item[time]] = true;
+      }
+    });
+    sessionStorage.removeItem("skipData");
+    return result;
+  }
+  return _data;
+}