gio-miniprogram-sdk 4.3.2 → 4.4.0

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
+    });
+  };
+}

package/src/plugins/gioPerformance/network.ts

@@ -0,0 +1,197 @@
+import { GrowingIOType } from '@@/types/growingIO';
+import {
+  compact,
+  forEach,
+  isArray,
+  isEmpty,
+  isNil,
+  isRegExp,
+  isString,
+  unset
+} from '@@/utils/glodash';
+
+export default class Network {
+  private minipInst: any;
+  private excludeRegExp: RegExp | string | any[];
+  private gdpRequestURL: string;
+  private buildNetworkEvent: (attributes: any) => void;
+  constructor(public growingIO: GrowingIOType, public options: any = {}) {
+    this.minipInst = this.growingIO.minipInstance.minip;
+    this.buildNetworkEvent = (attributes: any) => {
+      if (!options.network) {
+        return;
+      }
+      const { duration, url, method, statusCode } = attributes;
+      this.growingIO.plugins.gioPerformance?.buildPerfEvent(
+        'apm_network_request',
+        {
+          response_duration: duration,
+          request_address: url,
+          request_method: method,
+          http_code: statusCode
+        }
+      );
+    };
+
+    if (this.options.network?.exclude) {
+      this.excludeRegExp = this.options.network.exclude;
+    }
+    this.hookRequest();
+    // 重写生成地址的方法，sdk在性能分析时需要拿到主实例的请求地址做判断用
+    const self = this;
+    const originFunc = this.growingIO.uploader.generateURL;
+    this.growingIO.uploader.generateURL = function () {
+      const result = originFunc.apply(this, arguments);
+      const trackingId = arguments[0];
+      if (trackingId === self.growingIO.trackingId) {
+        self.gdpRequestURL = result;
+      }
+      return result;
+    };
+  }
+
+  // 检验url是否符合过滤条件
+  verifyUrl = (url: string) => {
+    // Gio的请求直接过滤
+    if (url.indexOf(this.gdpRequestURL) > -1) {
+      return true;
+    }
+    // 正则或字符串域名数组过滤
+    if (isArray(this.excludeRegExp)) {
+      const verifyResult = compact(
+        (this.excludeRegExp as any[]).map((re: RegExp | string) => {
+          if (isRegExp(re)) {
+            return (re as RegExp).test(url);
+          } else if (isString(re)) {
+            return url.indexOf(re as string) > -1;
+          }
+        })
+      );
+      return !isEmpty(verifyResult);
+    } else if (isString(this.excludeRegExp)) {
+      // 单个字符串过滤校验
+      return url.indexOf(this.excludeRegExp as string) > -1;
+    } else if (isRegExp(this.excludeRegExp)) {
+      // 单个正则过滤校验
+      return (this.excludeRegExp as RegExp).test(url);
+    } else {
+      return false;
+    }
+  };
+
+  // 重写request
+  hookRequest = () => {
+    const self = this;
+    ['request', 'downloadFile', 'uploadFile'].forEach((reqKey: string) => {
+      const originRequest = this.minipInst[reqKey];
+      Object.defineProperty(this.minipInst, reqKey, {
+        writable: true,
+        enumerable: true,
+        configurable: true,
+        value: function (...args: any[]) {
+          const options: any = args[0];
+          const { url } = options;
+          // 如果符合过滤条件就直接发请求不做处理
+          if (self.verifyUrl(url)) {
+            return originRequest.call(this, options);
+          }
+          let cstmRequestInfo: any = {
+            header: options.header || {},
+            url: options.url
+          };
+          switch (reqKey) {
+            case 'request':
+              const { method } = options;
+              cstmRequestInfo = { ...cstmRequestInfo, method };
+              break;
+            case 'downloadFile':
+            case 'uploadFile':
+              const { filePath } = options;
+              cstmRequestInfo = {
+                ...cstmRequestInfo,
+                filePath,
+                method: reqKey === 'downloadFile' ? 'GET' : 'POST'
+              };
+              break;
+            default:
+              break;
+          }
+
+          const originFail = options.fail;
+          const fail = function (result: any) {
+            cstmRequestInfo.endTime = Date.now();
+            self.growingIO.plugins.gioPerformance?.buildPerfEvent('Error', {
+              error_type: result.errMsg,
+              error_content: cstmRequestInfo.url
+            });
+            if (typeof originFail === 'function') {
+              return originFail(result);
+            }
+          };
+
+          const originSuccess = options.success;
+          const success = function (result) {
+            cstmRequestInfo.endTime = Date.now();
+            self.networkPerfBuilder(result, cstmRequestInfo);
+            if (typeof originSuccess === 'function') {
+              return originSuccess(result);
+            }
+          };
+          cstmRequestInfo.startTime = Date.now();
+          return originRequest.call(this, {
+            ...options,
+            success,
+            fail
+          });
+        }
+      });
+    });
+  };
+
+  // 请求性能数据组装
+  networkPerfBuilder = (requestResult: any, cstmRequestInfo: any) => {
+    const { profile = {}, statusCode = 0, errMsg } = requestResult;
+    const { url, filePath, method } = cstmRequestInfo;
+    const {
+      redirectStart,
+      redirectEnd,
+      fetchStart,
+      domainLookUpStart,
+      domainLookUpEnd,
+      connectStart,
+      connectEnd,
+      requestStart,
+      responseStart,
+      responseEnd
+    } = profile;
+    const p = !isEmpty(profile);
+    const networkPerf = {
+      url,
+      filePath,
+      method,
+      statusCode,
+      message: errMsg,
+      // 重定向耗时（重定向没有发生，或者其中一个重定向非同源，则该值为 0）
+      redirect: p ? redirectEnd - redirectStart : 0,
+      // 缓存耗时
+      cache: p ? domainLookUpStart - fetchStart : 0,
+      // dns域名解析耗时
+      dns: p ? domainLookUpEnd - domainLookUpStart : 0,
+      // tcp链接耗时
+      tcp: p ? connectEnd - connectStart : 0,
+      // 在SSL链接建立好后，从客户端发送至服务端首次响应的耗时
+      request: p ? responseStart - requestStart : 0,
+      // 从服务端首次响应至数据完全响应完的耗时
+      response: p ? responseEnd - responseStart : 0,
+      // 请求总耗时
+      duration: p
+        ? responseEnd - fetchStart
+        : cstmRequestInfo.endTime - cstmRequestInfo.startTime
+    };
+    forEach(
+      networkPerf,
+      (v, k) => (v === '' || isNil(v)) && unset(networkPerf, k)
+    );
+    this.buildNetworkEvent(networkPerf);
+  };
+}