visual-buried-point-platform-h5 1.3.4

package/src/typings/index.d.ts

@@ -0,0 +1,300 @@
+/**
+ * "/api/v1/report/web",
+ * "livereload.js?snipver=1",
+ * "/sockjs-node/info",
+ */
+
+type Ignore = {
+  ignoreErrors?: any[];
+  ignoreUrls?: any[];
+  ignoreApis?: any[];
+};
+
+type TBehavior = {
+  /**
+   * 取值可以是"debug", "info", "warn", "log", "error"
+   * ["log", "error"]
+   */
+  console: any[];
+  click: boolean;
+};
+
+type EnvironmentType = "dev" | "test" | "prod";
+
+/** 初始化类型参数 */
+interface IInitConfig {
+  /** 上报地址 */
+  reportUrl?: string;
+  /** 新的数据结构自定义上报 */
+  reportEventUrl?: string;
+  /** 新的数据结构PVUV上报 */
+  reportTrackUrl?: string;
+  /** 获取已埋点事件列表查询地址 */
+  eventListPath?: string;
+  /** 提交参数 */
+  token: string;
+  /** appkey */
+  appkey?: string;
+  /** 业务板块  */
+  busSegment?: string | number;
+  /** 业务模块 */
+  module?: string | number;
+  /** 环境 默认开发环境 `dev` */
+  environment: EnvironmentType;
+  /** app版本 */
+  appVersion?: string;
+  /** 脚本延迟上报时间 */
+  outtime?: number;
+  /** 开启单页面 */
+  enableSPA?: boolean;
+  /** 是否自动上报pv */
+  autoSendPv?: boolean;
+  /** 是否上报页面性能数据 */
+  isPage?: boolean;
+  /** 是否上报ajax性能数据 */
+  isAjax?: boolean;
+  /** 是否上报页面资源数据 */
+  isResource?: boolean;
+  /** 是否上报错误信息 */
+  isError?: boolean;
+  /** 是否录屏 */
+  isRecord?: boolean;
+  /** 是否上报行为 */
+  isBehavior?: boolean;
+  /** 直接监听接口名称 */
+  ignore: Ignore;
+  /** 监听用户行为 */
+  behavior: TBehavior;
+  /** 最长上报数据长度 */
+  maxLength?: number;
+  /** Web JS SDK 的 H5 页面，在嵌入到 App 后，H5 内的事件可以通过 App 进行发送 默认关闭 */
+  enableJavaScriptBridge: boolean;
+  /** 打通H5与APP通信后，安卓上报数据ID */
+  androidToken?: string | null | undefined;
+  /** 打通H5与APP通信后，Ios上报数据ID */
+  iosToken?: string | null | undefined;
+  /** 是否开启了页面浏览时长采集 */
+  enableTrackPageLeave?: boolean;
+  /** 是否开启了CSS HASH值 必传 */
+  isOpenCSSHash: boolean;
+  /** puv上报地址 */
+  reportPUVUrl?: string;
+  /** 元素配置表 */
+  metaConfigPath?: string;
+  /** 流量上报的 app: { name: '' }  */
+  t_name?: string; 
+  /** 流量上报的 app: { version: '' }  */
+  t_version?: string; 
+}
+
+interface ConfigParams {
+  domain: string;
+  token: string;
+  record: boolean;
+}
+
+interface Records {
+  type: string;
+  data: ReportData;
+}
+
+type ReportData =
+  | ErrorMsg
+  | ResourceMsg
+  | ApiMsg
+  | pvMsg
+  | healthMsg
+  | perfMsg
+  | behaviorMsg
+  | sumMsg
+  | avgMsg
+  | percentMsg
+  | msgMsg;
+//
+type MsgType =
+  | ""
+  | "error"
+  | "res"
+  | "api"
+  | "pv"
+  | "health"
+  | "perf"
+  | "behavior"
+  | "sum"
+  | "avg"
+  | "percent"
+  | "msg";
+
+interface CommonMsg {
+  t: MsgType; // 类型
+  times?: number; // 次数
+  page: string; // 页面
+  v: string; // 版本
+  e: string; // 开发生产环境
+  token: string; // 项目id
+  timestamp: number; // 开始时间戳
+  screen_resolution: string; // 屏幕分辨率
+  view_resolution: string; // view 分辨率
+  sdk_version: string; // sdk版本
+  uid: string; // user id
+  sid: string; // session id
+  network: string; // 网络
+  language: string; // 语言
+  original_url: string; // 原始url
+}
+
+// pv上报
+interface pvMsg extends CommonMsg {
+  dt: string; // document title
+  dl: string; // document location
+  dr: string; // 来源
+  dpr: number; // dpr
+  de?: string; // document 编码
+}
+interface ErrorMsg extends CommonMsg {
+  st: string; // sub type
+  msg: string; // 信息
+  cate?: string; // 类别
+  detail?: string; // 错误栈 或 出错标签
+  file?: string; // 出错文件
+  line?: number; // 行
+  col?: number; // 列
+}
+
+interface ResourceMsg extends CommonMsg {
+  dom: number; // 所有解析时间 domInteractive - responseEnd
+  load: number; // 所有资源加载完时间 loadEventStart- fetchStart
+  res: PerformanceEntry[];
+}
+
+interface ApiMsg extends CommonMsg {
+  url: string; // 接口
+  success: boolean; // 成功？
+  time: number; // 耗时
+  code: number; // 接口返回的code
+  msg: string; // 信息
+  // method:string
+  // params: string
+  // query: string
+  // body: string
+  // response:string
+}
+
+// 健康检查上报
+interface healthMsg extends CommonMsg, Health {
+  healthy: number; // 健康？ 0/1
+  stay: number; // 停留时间
+}
+
+interface Health {
+  errcount: number; // error次数
+  apisucc: number; // api成功次数
+  apifail: number; // api错误次数
+}
+
+// 页面性能上报
+interface perfMsg extends CommonMsg {
+  dns: number; // dns时间
+  tcp: number; // tcp时间
+  ssl: number; // ssl时间
+  ttfb: number; // ResponseStart - RequestStart (首包时间，关注网络链路耗时)
+  trans: number; // 停留时间
+  dom: number; // dom解析时间
+  res: number; // 停留时间
+  firstbyte: number; // 首字节时间
+  fpt: number; // ResponseEnd - FetchStart （首次渲染时间 / 白屏时间）
+  tti: number; // DomInteractive - FetchStart （首次可交付时间）
+  ready: number; // DomContentLoadEventEnd - FetchStart （加载完成时间）
+  load: number; // LoadEventStart - FetchStart （页面完全加载时间）
+  bandwidth: number; // 估计的带宽 单位M/s
+  navtype: string; // nav方式 如reload
+  fmp: number; // 停留时间
+}
+
+// 行为上报
+interface behaviorMsg extends CommonMsg {
+  behavior: Behavior;
+}
+
+// 手动上报 tag: string // 标签
+
+type Behavior = navigationBehavior | consoleBehavior | eventBehavior;
+
+interface navigationBehavior {
+  type: "navigation";
+  data: {
+    from: string;
+    to: string;
+  };
+}
+
+interface consoleBehavior {
+  type: "console";
+  data: {
+    level: string;
+    message: string;
+  };
+}
+
+interface eventBehavior {
+  type: string;
+  data: {
+    path: string;
+    message: string;
+  };
+}
+
+interface sumMsg extends CommonMsg {
+  group: string;
+  key: string;
+  val: number;
+}
+
+interface avgMsg extends CommonMsg {
+  group: string;
+  key: string;
+  val: number;
+}
+
+interface percentMsg extends CommonMsg {
+  group: string;
+  key: string;
+  subkey: string;
+  val: number;
+}
+
+interface msgMsg extends CommonMsg {
+  group: string;
+  msg: string;
+}
+
+// 内嵌H5上报页面信息数据类型
+
+interface IPageData {
+  cssData: string;
+  elementData: string;
+  pageName: string;
+  pageTitle: string;
+  url?: string;
+  origin?: string;
+  platform: string;
+}
+
+interface IReportData {
+  /** 页面内容 */
+  gzip_payload: string;
+  /** 当前页面完整路径 */
+  urlPath: string;
+  /** 是否需要终端查询静态资源文件 */
+  need?: boolean;
+}
+
+//自定义数据的类型
+export interface ICustomData {
+  /** 事件ID */
+  $event_id: string;
+  /** 扩展参数 */
+  $extend_param?: any;
+  /** 浏览URL */
+  $url_path?: string;
+}

package/src/utils/cache.ts

@@ -0,0 +1,30 @@
+// 复制缓存数据
+export function deepCopy(target) {
+  if (typeof target === "object") {
+    const result = Array.isArray(target) ? [] : {};
+    for (const key in target) {
+      if (typeof target[key] == "object") {
+        result[key] = deepCopy(target[key]);
+      } else {
+        result[key] = target[key];
+      }
+    }
+    return result;
+  }
+  return target;
+}
+
+// 数据缓存
+const cache = [];
+
+export function getCache() {
+  return deepCopy(cache);
+}
+
+export function addCache(data) {
+  cache.push(data);
+}
+
+export function clearCache() {
+  cache.length = 0;
+}

package/src/utils/cacheCu.ts

@@ -0,0 +1,30 @@
+// 复制缓存数据
+export function deepCopy(target) {
+  if (typeof target === "object") {
+    const result = Array.isArray(target) ? [] : {};
+    for (const key in target) {
+      if (typeof target[key] == "object") {
+        result[key] = deepCopy(target[key]);
+      } else {
+        result[key] = target[key];
+      }
+    }
+    return result;
+  }
+  return target;
+}
+
+// 数据缓存
+const cacheCu = [];
+
+export function getCacheCu() {
+  return deepCopy(cacheCu);
+}
+
+export function addCacheCu(data) {
+  cacheCu.push(data);
+}
+
+export function clearCacheCu() {
+  cacheCu.length = 0;
+}

package/src/utils/cachePuv.ts

@@ -0,0 +1,30 @@
+// 复制缓存数据
+export function deepCopyPuv(target) {
+  if (typeof target === "object") {
+    const result = Array.isArray(target) ? [] : {};
+    for (const key in target) {
+      if (typeof target[key] == "object") {
+        result[key] = deepCopyPuv(target[key]);
+      } else {
+        result[key] = target[key];
+      }
+    }
+    return result;
+  }
+  return target;
+}
+
+// 数据缓存
+const cache = [];
+
+export function getCachePuv() {
+  return deepCopyPuv(cache);
+}
+
+export function addCachePuv(data) {
+  cache.push(data);
+}
+
+export function clearCachePuv() {
+  cache.length = 0;
+}

package/src/utils/cloneDocument.ts

@@ -0,0 +1,236 @@
+import pako from "pako";
+import { Base64 } from "js-base64";
+import MD5 from "md5";
+import { GlobalVal } from "../config/global";
+import { getLocationHref, isPlatform } from "./tools";
+import { getPathSelector, getXPath } from "./getXPath";
+import html2canvas from "html2canvas";
+
+/** 判断元素是否在可视区 */
+function isInViewPort(element) {
+  // const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+  // const viewHeight =
+  //   window.innerHeight || document.documentElement.clientHeight;
+  // const { top, right, bottom, left } = element.getBoundingClientRect();
+
+  // if (bottom <= 0 || top > viewHeight) {
+  //   // y 轴方向
+  //   return false;
+  // }
+  // if (right <= 0 || left > viewWidth) {
+  //   // x 轴方向
+  //   return false;
+  // }
+  return true;
+}
+
+function getChildren(data, arr, level) {
+  for (let i = 0; i < data.childNodes.length; i++) {
+    const element = data.childNodes[i];
+    if (
+      element.nodeType !== Node.TEXT_NODE &&
+      element.nodeType !== Node.COMMENT_NODE
+    ) {
+      /** 判断元素是否在可视区 */
+      if (isInViewPort(element)) {
+        const path = getXPath(element);
+        const selector = getPathSelector(element);
+        let text = "";
+        if (element.innerText && element.innerText.length > 30) {
+          text = element.innerText.substring(0, 30);
+        } else {
+          text = element.innerText;
+        }
+        let elObj = {
+          name: element.tagName.toLocaleLowerCase(),
+          className: element.getAttribute("class"),
+          properties: {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            element_path: path,
+            element_selector: selector,
+            level: ++level,
+            x: element.getBoundingClientRect().left,
+            y: element.getBoundingClientRect().top,
+            element_content: text,
+          },
+        };
+        arr.push(elObj);
+        if (element.childNodes.length) {
+          getChildren(element, arr, level);
+        }
+      }
+    }
+  }
+  return arr;
+}
+function getChild(data, result = []) {
+  for (let i = 0; i < data.childNodes.length; i++) {
+    const element = data.childNodes[i];
+    if (
+      element.nodeType !== Node.TEXT_NODE &&
+      element.nodeType !== Node.COMMENT_NODE
+    ) {
+      /** 判断元素是否在可视区 */
+      if (isInViewPort(element)) {
+        const path = getXPath(element);
+        const selector = getPathSelector(element);
+        let text = "";
+        if (element.innerText && element.innerText.length > 30) {
+          text = element.innerText.substring(0, 30);
+        } else {
+          text = element.innerText;
+        }
+        let elObj = {
+          name: element.tagName.toLocaleLowerCase(),
+          className: element.getAttribute("class"),
+          properties: {
+            width: element.offsetWidth,
+            height: element.offsetHeight,
+            element_path: path,
+            element_selector: selector,
+            level: 1,
+            x: element.getBoundingClientRect().left,
+            y: element.getBoundingClientRect().top,
+            element_content: text,
+          },
+        };
+
+        result.push(elObj);
+        if (element.childNodes.length) {
+          getChildren(element, result, 1);
+        }
+      }
+    }
+  }
+  return result;
+}
+
+export function cloneDom() {
+  setTimeout(() => {
+    if (!GlobalVal.enableJavaScriptBridgeCircle) {
+      return false;
+    }
+    const originPath = window.location.origin;
+
+    const documentStyle = document.querySelector("head");
+    const childNodeDom = documentStyle.childNodes;
+    let cssTxt = "",
+      linkTxt = "";
+    for (let i = 0; i < childNodeDom.length; i++) {
+      const childNode = childNodeDom[i];
+      if (childNode.nodeName === "STYLE") {
+        cssTxt += (childNode as any).outerHTML;
+      }
+      if (childNode.nodeName === "LINK") {
+        const linkHref = (childNode as any).href;
+        if (linkHref.startsWith("http://") || linkHref.startsWith("https://")) {
+          (childNode as any).setAttribute("href", linkHref);
+          linkTxt += (childNode as any).outerHTML;
+        } else {
+          linkTxt += "";
+        }
+      }
+    }
+    const target =
+      document.querySelector("#app") || document.querySelector("#root");
+    const cloneNode = target.cloneNode(true);
+    const elementTxt = (cloneNode as any).outerHTML;
+    let locationPath = getLocationHref();
+
+    const params: IPageData = {
+      cssData: `${linkTxt}${cssTxt}`,
+      elementData: elementTxt,
+      pageName: GlobalVal.page,
+      pageTitle: document.title,
+      url: locationPath,
+      origin: location.origin,
+      platform: "H5",
+    };
+    let reportData: IReportData | Record<string, any> = {};
+    // 非本地资源不通知APP端获取静态资源
+    if (originPath.startsWith("http://") || originPath.startsWith("https://")) {
+      // 数据加密传输
+      const paramsStr = JSON.stringify(params);
+      const outputData = pako.gzip(paramsStr, { to: "string" });
+      const base64Str = Base64.btoa(outputData);
+      // MD5 加密校验
+      const md5Str: string = MD5(base64Str);
+      reportData = {
+        gzip_payload: base64Str,
+        urlPath: locationPath,
+        // gzip_payload_MD5: md5Str,
+      } as IReportData;
+    } else {
+      // 本地资源通知APP端获取静态资源 数据不加密
+      reportData = {
+        gzip_payload: JSON.stringify(params),
+        urlPath: location.href.split("?")[0],
+        need: true,
+      } as IReportData;
+    }
+    const platform = isPlatform();
+    if (platform && platform === "android") {
+      (window as any).dsy_visual.receive_web_track_nodes(
+        JSON.stringify(reportData)
+      );
+    }
+    if (platform && platform === "ios") {
+      (window as any).webkit.messageHandlers.visualBuriediOS.postMessage(
+        JSON.stringify(reportData)
+      );
+    }
+  }, 5000);
+}
+
+/** 内嵌web项目抓取节点通过APP上传 */
+export function getDocumentElement() {
+  if (!GlobalVal.enableJavaScriptBridgeCircle) {
+    return;
+  }
+  const bodyEl = document.querySelector("body");
+  const reportDom = getChild(bodyEl);
+  let locationPath = getLocationHref();
+  // 可视区截屏
+  html2canvas(bodyEl)
+    .then((canvas) => {
+      return canvas.toDataURL("image/png");
+    })
+    .then((res) => {
+      const params = {
+        image_path: res,
+        image_hash: res.substring(res.length - 24, res.length),
+        elementDom: reportDom,
+        rootW: document.documentElement.clientWidth,
+        rootH: document.documentElement.clientHeight,
+        pageName: GlobalVal.page,
+        pageTitle: document.title,
+        url: locationPath,
+        origin: location.origin,
+        platform: "H5",
+      };
+
+      // 数据加密传输
+      const paramsStr = JSON.stringify(params);
+      const outputData = pako.gzip(paramsStr, { to: "string" });
+      const base64Str = Base64.btoa(outputData);
+      const reportData = {
+        gzip_payload: base64Str,
+        urlPath: location.href.split("?")[0], // 防止IOS存取错误，仅对URL做参数截取
+      } as IReportData;
+      const platform = isPlatform();
+      if (platform && platform === "android") {
+        (window as any)?.dsy_visual?.receive_web_track_nodes(
+          JSON.stringify(reportData)
+        );
+      }
+      if (platform && platform === "ios") {
+        (window as any)?.webkit?.messageHandlers?.visualBuriediOS?.postMessage(
+          JSON.stringify(reportData)
+        );
+      }
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}