gio-miniprogram-sdk 4.3.1 → 4.4.0

package/src/plugins/gioEventAutoTracking.ts

@@ -5,17 +5,21 @@
 import { ID_REG, SWAN_XID_REG, TARO_XID_REG } from '@@/constants/regex';
 import { EventTarget } from '@@/types/eventHooks';
 import { GrowingIOType } from '@@/types/growingIO';
-import { consoleText, isTaro3 } from '@@/utils/tools';
+import { consoleText, getExtraData, isTaro3 } from '@@/utils/tools';
 import EMIT_MSG from '@@/constants/emitMsg';
+import { isEmpty } from '@@/utils/glodash';
 
 let ut;
 class GioEventAutoTracking {
   public pluginVersion: string;
   private prevEvent: any;
+  public circleServerUrl: string;
+  public circleOpen = false;
   constructor(public growingIO: GrowingIOType) {
     this.pluginVersion = '__PLUGIN_VERSION__';
     ut = this.growingIO.utils;
     this.prevEvent = {};
+    this.listenForLunchEvent();
   }
 
   main = (e: EventTarget, eventName: string) => {
@@ -183,6 +187,100 @@ class GioEventAutoTracking {
       eventInterceptor(event);
     }
   };
+
+  // --------------------- 以下内容是对新版小程序圈选的支持 ---------------------
+
+  // 监听小程序的onLunch事件
+  listenForLunchEvent = () => {
+    const { emitter } = this.growingIO;
+    emitter.on(EMIT_MSG.MINIP_LIFECYCLE, ({ event, params }) => {
+      if (['App onLaunch', 'App onShow'].includes(event)) {
+        this.circleInit(params);
+      }
+    });
+  };
+
+  // 初始化圈选
+  circleInit = (params: any) => {
+    const { emitter } = this.growingIO;
+    const extraData = getExtraData(params.referrerInfo?.extraData);
+    // 额外参数中存在gdpCircleRoomCollectUrl，则表示是圈选的跳转，进入圈选状态
+    if (extraData?.gdpCircleRoomCollectUrl) {
+      // 圈选初始化
+      if (this.circleServerUrl !== extraData?.gdpCircleRoomCollectUrl) {
+        this.circleServerUrl = extraData?.gdpCircleRoomCollectUrl;
+        // 提前移除一次事件发送监听，防止重复监听
+        emitter.off(EMIT_MSG.ON_SEND_AFTER, this.collectorSendFn);
+        // 添加事件发送监听，用于发送圈选事件
+        emitter.on(EMIT_MSG.ON_SEND_AFTER, this.collectorSendFn);
+        this.showPromptModal('enter');
+      }
+      this.circleOpen = true;
+    }
+  };
+
+  // 数据采集发送监听回调
+  collectorSendFn = ({ requestData, trackingId }) => {
+    const { uploader } = this.growingIO;
+    if (this.circleOpen) {
+      // 过滤仅主实例的非CUSTOM事件可以圈选
+      const filteredEvents = requestData.filter(
+        (e) =>
+          e.eventType !== 'CUSTOM' && trackingId === this.growingIO.trackingId
+      );
+      if (!isEmpty(filteredEvents)) {
+        // 同时请求数在3个以下直接发起请求
+        if (uploader.requestingNum < uploader.requestLimit) {
+          this.circleRequest(filteredEvents);
+        } else {
+          // 同时有3个请求在发送时，设轮询延时直到请求数在3个以下
+          let t = setInterval(() => {
+            if (uploader.requestingNum < uploader.requestLimit) {
+              this.circleRequest(filteredEvents);
+              clearInterval(t);
+              t = undefined;
+            }
+          }, 500);
+        }
+      }
+    }
+  };
+
+  // 圈选结束
+  circleClose = () => {
+    this.circleOpen = false;
+    this.circleServerUrl = '';
+    this.growingIO.emitter.off(EMIT_MSG.ON_SEND_AFTER, this.collectorSendFn);
+  };
+
+  // 展示圈选提示
+  showPromptModal = (type: 'enter' | 'error', msg?: string) => {
+    this.growingIO.minipInstance.minip.showModal({
+      title: 'GrowingIO提示',
+      content: type === 'error' ? msg : '您已进入圈选模式',
+      showCancel: false
+    });
+  };
+
+  // 发起圈选请求
+  circleRequest = (requestData: any) => {
+    const { minipInstance } = this.growingIO;
+    minipInstance.request({
+      url: this.circleServerUrl,
+      header: { 'content-type': 'application/json;charset=UTF-8' },
+      method: 'POST',
+      data: requestData,
+      complete: ({ statusCode, data, errMsg }: any) => {
+        if (![200, 204].includes(statusCode) || !data?.success) {
+          this.showPromptModal(
+            'error',
+            data?.message || data || errMsg || '圈选请求失败，请重试!'
+          );
+          this.circleClose();
+        }
+      }
+    });
+  };
 }
 
 export default { name: 'gioEventAutoTracking', method: GioEventAutoTracking };

package/src/plugins/gioImpressionTracking.ts

@@ -107,6 +107,8 @@ class GioImpressionTracking {
         return collectTarget.route
           ? toString(hashCode(collectTarget.route)) // swan page
           : collectTarget.__nodeId__; // swan component
+      case 'xhs':
+        return collectTarget.pageId;
       default:
         break;
     }
@@ -216,7 +218,7 @@ class GioImpressionTracking {
       originObserver.disconnect();
     }
     // 创建一个新的监听
-    let observer = ['swan', 'jd'].includes(gioPlatform)
+    let observer = ['swan', 'jd', 'xhs'].includes(gioPlatform)
       ? minipInstance.minip?.createIntersectionObserver(
           collectTarget,
           observerOption

package/src/plugins/gioPerformance/exception.ts

@@ -0,0 +1,152 @@
+import { GrowingIOType } from '@@/types/growingIO';
+import { isArray, isEmpty, isFunction, toString } from '@@/utils/glodash';
+import EMIT_MSG from '@@/constants/emitMsg';
+
+export default class Exception {
+  private minipInst: any;
+  // 监听标记，防止重复监听或者内存泄露
+  private listenerSet = false;
+  // 缓存队列，防止SDK初始化之前的报错丢掉或发不出去
+  private cacheQueue: any[];
+  private buildErrorEvent: (attributes: any) => void;
+  constructor(public growingIO: GrowingIOType) {
+    this.minipInst = this.growingIO.minipInstance.minip;
+    this.cacheQueue = [];
+    // 上报方法
+    this.buildErrorEvent = (attributes: any) =>
+      this.growingIO.plugins.gioPerformance?.buildPerfEvent(
+        'apm_system_error',
+        attributes
+      );
+    // 进入页面时初始化各种错误的监听
+    this.setListeners();
+    this.hookNavigate();
+    // app从后台拉起时开始监听（第一次见进入时会根据listenerSet判断不会重复监听）
+    if (isFunction(this.minipInst?.onAppShow)) {
+      this.minipInst?.onAppShow(this.setListeners);
+    }
+    // app切后台或关闭小程序时把监听移除，防止内存泄露
+    if (isFunction(this.minipInst?.onAppHide)) {
+      this.minipInst?.onAppHide(() => {
+        if (this.minipInst.canIUse('offError')) {
+          this.minipInst.offError();
+        }
+        if (this.minipInst.canIUse('offUnhandledRejection')) {
+          this.minipInst.offUnhandledRejection();
+        }
+        if (this.minipInst.canIUse('offLazyLoadError')) {
+          this.minipInst.offLazyLoadError();
+        }
+        this.listenerSet = false;
+      });
+    }
+    this.growingIO.emitter.on(EMIT_MSG.SDK_INITIALIZED, () => {
+      if (!isEmpty(this.cacheQueue)) {
+        this.cacheQueue.forEach((c: any) => {
+          this.buildErrorEvent(c);
+        });
+      }
+    });
+  }
+
+  // 设置错误监听
+  setListeners = () => {
+    if (!this.listenerSet) {
+      // 监听小程序错误事件。如脚本错误或 API 调用报错等。
+      if (this.minipInst.canIUse('onError')) {
+        this.minipInst?.onError((errorString: string) => {
+          this.errorParse(errorString);
+        });
+      }
+      // 监听未处理的 Promise 拒绝事件。
+      if (this.minipInst.canIUse('onUnhandledRejection')) {
+        this.minipInst?.onUnhandledRejection((rejectError: any) => {
+          // 普通的promise reject
+          if (rejectError.reason.stack) {
+            this.errorParse(
+              rejectError.reason.stack,
+              rejectError.reason.message
+            );
+          }
+        });
+      }
+      // 监听异步组件加载失败
+      if (this.minipInst.canIUse('onLazyLoadError')) {
+        this.minipInst?.onLazyLoadError((error: any) => {
+          this.buildErrorEvent({
+            error_type: error.errMsg,
+            error_content: toString(error.subpackage)
+          });
+        });
+      }
+    }
+    this.listenerSet = true;
+  };
+
+  // hook跳转方法获取跳转错误
+  hookNavigate = () => {
+    const self = this;
+    [
+      'switchTab',
+      'reLaunch',
+      'redirectTo',
+      'navigateTo',
+      'navigateBack'
+    ].forEach((reqKey: string) => {
+      const originNavigate = this.minipInst[reqKey];
+      Object.defineProperty(this.minipInst, reqKey, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: function (...args: any[]) {
+          const options: any = args[0] ?? {};
+          const originFail = options?.fail;
+          const fail = function (result: any) {
+            self.growingIO.plugins.gioPerformance?.buildPerfEvent('Error', {
+              error_type: `${reqKey} Error`,
+              error_content: result.errMsg
+            });
+            if (typeof originFail === 'function') {
+              return originFail(result);
+            }
+          };
+          return originNavigate.call(this, {
+            ...options,
+            fail
+          });
+        }
+      });
+    });
+  };
+
+  // 解析普通错误堆栈
+  errorParse = (errorString: string, msg?: string) => {
+    // 按分行截取为堆栈数组
+    const stacks = errorString.split('\n');
+    let title: string, // 错误标题
+      content: string; // 错误的第一行堆栈
+    if (stacks.length) {
+      stacks.find((v, i) => {
+        const matcher = v.match(/at (.*?) \((.*):(\d{1,}):(\d{1,})\)/);
+        if (isArray(matcher)) {
+          title = stacks[i - 1];
+          content = v.trim();
+          return matcher.length;
+        }
+      });
+      if (!title) {
+        title = stacks[0];
+      }
+      if (!content) {
+        content = stacks[1];
+      }
+    } else {
+      title = msg || 'Error';
+      content = errorString.substring(0, 100);
+    }
+    this.buildErrorEvent({
+      error_type: msg || title,
+      error_content: content
+    });
+  };
+}

package/src/plugins/gioPerformance/monitor.ts

@@ -0,0 +1,284 @@
+import { PERF_MONITOR_VLUES } from '@@/types/gioPerformance';
+import { GrowingIOType } from '@@/types/growingIO';
+import { forEach, has, head, isEmpty, keys, unset } from '@@/utils/glodash';
+import EMIT_MSG from '@@/constants/emitMsg';
+
+export default class Monitor {
+  private minipInst: any;
+  private appPerf: any;
+  private pagePerf: any;
+  private bootType: 'cold' | 'warm';
+  private lastWarm = false;
+  public referrerPath = ''; // 基础库低于2.23.1或者taro等一些框架中会没有referrerPageId，因此需要靠自己记录上一个页面
+  private lastUnloadPath = ''; // 打开小程序后再点击分享的连接进入小程序时，页面会被销毁，会触发页面重新加载，从而变成两个热启动，根据上一个被销毁的页面地址来判断是否要发热启动
+  private buildMonitorEvent: (attributes: any, extra: any) => void;
+  constructor(public growingIO: GrowingIOType) {
+    this.minipInst = this.growingIO.minipInstance.minip;
+    this.appPerf = {};
+    this.pagePerf = {};
+    this.bootType = 'cold';
+    this.lastWarm = false;
+    this.buildMonitorEvent = (attributes: any, extra: any) =>
+      this.growingIO.plugins.gioPerformance?.buildPerfEvent(
+        'apm_app_launch',
+        attributes,
+        extra
+      );
+    // 目前仅微信和字节小程序支持小程序启动性能的获取
+    if (['MinP', 'bytedance'].includes(this.growingIO.minipInstance.platform)) {
+      this.initObserver();
+    }
+    this.growingIO.emitter.on(
+      EMIT_MSG.MINIP_LIFECYCLE,
+      ({ event, timestamp, params }) => {
+        const [actionType, lifeCycleName] = event.split(' ');
+        switch (actionType) {
+          case 'App': {
+            this.appPerf = {
+              ...this.appPerf,
+              [lifeCycleName]: timestamp
+            };
+            if (lifeCycleName === 'onShowEnd') {
+              // 只有靠appOnShow才能判断是不是热启动，所以放在App的生命周期中做标记
+              // 也因为App的生命周期先执行，在后面Page和Component中判断的时候是没问题的
+              if (this.bootType === 'warm' && !this.lastWarm) {
+                this.lastWarm = true;
+              }
+            }
+            break;
+          }
+          case 'Page': {
+            const path = (params.page || params.instance)?.route;
+            this.pagePerf[path] = {
+              ...this.pagePerf[path],
+              [lifeCycleName]: timestamp
+            };
+            if (lifeCycleName === 'onShowEnd') {
+              // 标记当前页面是热启动，则发送App热启动性能
+              if (
+                this.lastWarm &&
+                this.bootType === 'warm' &&
+                this.referrerPath === path &&
+                this.lastUnloadPath !== path
+              ) {
+                this.handleEvent(path);
+              }
+            }
+            if (['onHide', 'onUnload'].includes(lifeCycleName)) {
+              this.referrerPath = path;
+            }
+            if (lifeCycleName === 'onUnload') {
+              this.lastUnloadPath = path;
+            }
+            break;
+          }
+          default:
+            break;
+        }
+      }
+    );
+  }
+
+  // 初始化性能监听
+  initObserver = () => {
+    const performance = this.minipInst.canIUse('getPerformance')
+      ? this.minipInst.getPerformance()
+      : {};
+    const observer = performance?.createObserver((entryList) => {
+      this.handleLaunch(head(entryList.getEntriesByName('appLaunch')));
+      // this.handleScript(head(entryList.getEntriesByName('evaluateScript')));
+      // this.handleFR(head(entryList.getEntriesByName('firstRender')));
+      // this.handleFP(head(entryList.getEntriesByName('firstPaint')));
+      this.handleFCP(head(entryList.getEntriesByName('firstContentfulPaint')));
+      this.handleLCP(
+        head(entryList.getEntriesByName('largestContentfulPaint'))
+      );
+      this.handleRoute(head(entryList.getEntriesByName('route')));
+    });
+    observer?.observe({ entryTypes: ['render', 'script', 'navigation'] });
+  };
+
+  // 小程序初始化耗时
+  handleLaunch = (entry: any) => {
+    if (!isEmpty(entry)) {
+      this.appPerf = {
+        ...this.appPerf,
+        appStartTime: entry.startTime,
+        appDuration: entry.duration,
+        firstPath: entry.path
+      };
+    }
+  };
+
+  // 注入代码耗时
+  // handleScript = (entry: any) => {
+  //   if (!isEmpty(entry)) {
+  //     this.appPerf = {
+  //       ...this.appPerf,
+  //       scriptStartTime: entry.startTime,
+  //       scriptDuration: entry.duration
+  //     };
+  //   }
+  // };
+
+  // firstRender耗时
+  // handleFR = (entry: any) => {
+  //   if (!isEmpty(entry)) {
+  //     this.pagePerf[entry.path] = {
+  //       ...this.pagePerf[entry.path],
+  //       FRStartTime: entry.startTime,
+  //       FRDuration: entry.duration,
+  //     };
+  //   }
+  // };
+
+  // firstPaint耗时
+  // handleFP = (entry: any) => {
+  //   if (!isEmpty(entry)) {
+  //     this.pagePerf[entry.path] = {
+  //       ...this.pagePerf[entry.path],
+  //       FPStartTime: entry.startTime,
+  //     };
+  //   }
+  // };
+
+  // firstContentfulPaint耗时
+  handleFCP = (entry: any) => {
+    if (!isEmpty(entry)) {
+      this.pagePerf[entry.path] = {
+        ...this.pagePerf[entry.path],
+        FCPStartTime: entry.startTime
+      };
+    }
+    this.entriesValidate(entry ?? { name: 'firstContentfulPaint' });
+  };
+
+  // largestContentfulPaint耗时
+  handleLCP = (entry: any) => {
+    if (!isEmpty(entry)) {
+      this.pagePerf[entry.path] = {
+        ...this.pagePerf[entry.path],
+        LCPStartTime: entry.startTime
+      };
+    }
+    this.entriesValidate(entry ?? { name: 'largestContentfulPaint' });
+  };
+
+  // 路由跳转耗时
+  handleRoute = (entry: any) => {
+    if (!isEmpty(entry)) {
+      this.pagePerf[entry.path] = {
+        ...this.pagePerf[entry.path],
+        navigationStart: entry.startTime,
+        routeDuration: entry.duration
+      };
+    }
+    this.entriesValidate(entry ?? { name: 'route' });
+  };
+
+  // 校验指标是否都获取完毕
+  entriesValidate = (entry: any) => {
+    const path =
+      entry.path || this.growingIO.minipInstance.getCurrentPage().route;
+    if (!this.pagePerf[path]) {
+      this.pagePerf[path] = {
+        path
+      };
+    }
+    if (!this.pagePerf[path].entries) {
+      this.pagePerf[path].entries = [];
+    }
+    this.pagePerf[path].entries.push(entry.name);
+    // 所有的entry都执行过（'firstContentfulPaint', 'largestContentfulPaint', 'route'）
+    const matcher = ['firstContentfulPaint', 'largestContentfulPaint', 'route'];
+    let eve = true;
+    if (this.pagePerf[path].entries.length < matcher.length) {
+      eve = false;
+    }
+    matcher.forEach((o) => {
+      if (!this.pagePerf[path].entries.includes(o)) {
+        eve = false;
+      }
+    });
+    if (eve) {
+      this.handleEvent(path);
+    }
+  };
+
+  // 组装监控事件
+  handleEvent = (path: string) => {
+    const { currentPage } = this.growingIO.dataStore.eventHooks;
+    const perfData: PERF_MONITOR_VLUES = {
+      // 页面标题
+      title: currentPage.getPageTitle()
+    };
+    const { appStartTime } = this.appPerf;
+    const appLaunch = this.appPerf.onLaunch;
+    const appShow = this.appPerf.onShow;
+    const {
+      onLoad, // page生命周期
+      onShowEnd, // page生命周期
+      onReadyEnd, // page生命周期
+      navigationStart,
+      FCPStartTime,
+      LCPStartTime
+    } = this.pagePerf[path];
+    // 用于计算的页面开始时间
+    const pageStart = onLoad;
+    // 用于计算的页面结束时间
+    const pageEnd = onReadyEnd || onShowEnd;
+    // FCP（白屏时长）从created（相当于页面onLoad）开始算
+    if (FCPStartTime) {
+      perfData.first_contentful_paint_duration =
+        FCPStartTime > pageStart ? FCPStartTime - pageStart : 0;
+    }
+    // LCP（最大内容加载时长）从created（相当于页面onLoad）开始算
+    if (LCPStartTime) {
+      perfData.largest_contentful_paint_duration =
+        LCPStartTime > pageStart ? LCPStartTime - pageStart : 0;
+    }
+    // 页面加载时长
+    if (this.referrerPath) {
+      // 如果上次的页面和本次进入的页面是同一个说明是热启动
+      if (path === this.referrerPath && appShow) {
+        // 热启动
+        perfData.page_launch_duration = pageEnd - appShow;
+        perfData.reboot_duration = pageEnd - appShow;
+        perfData.reboot_mode = 'warm';
+        this.lastWarm = false;
+      } else {
+        // 如果上次的页面和本次进入的页面不是同一个说明是跳转页面
+        perfData.page_launch_duration =
+          pageEnd - (navigationStart ?? pageStart);
+      }
+    } else if (this.bootType === 'cold') {
+      // 没有上次页面说明是冷启动
+      perfData.page_launch_duration = pageEnd - appLaunch;
+      // 如果标记是app首屏页面加载的冷启动，添加app的冷启动标识和冷启动整体加载时长
+      perfData.reboot_duration = pageEnd - appStartTime;
+      perfData.reboot_mode = 'cold';
+      // 如果本次标记了冷启动耗时，则标记后续的小程序启动都是热启动
+      this.bootType = 'warm';
+    }
+    forEach(perfData, (v, k) => {
+      if ([null, 'null', NaN, 'NaN'].includes(v)) {
+        unset(perfData, k);
+      }
+    });
+    if (perfData.reboot_mode && !has(perfData, 'reboot_duration')) {
+      unset(perfData, 'reboot_mode');
+    }
+    this.appPerf = {};
+    this.pagePerf[path] = {};
+    // 过滤没有性能信息和没有页面加载时长的性能数据
+    if (keys(perfData).length <= 2 || !has(perfData, 'page_launch_duration')) {
+      return false;
+    }
+    this.buildMonitorEvent(perfData, {
+      timestamp: +Date.now(),
+      path: currentPage.getPagePath(),
+      query: currentPage.getPageQuery(),
+      title: perfData.title
+    });
+  };
+}