本文介绍如何使用ARMS前端监控开始监控其他类别的小程序,即除钉钉小程序、支付宝小程序和微信小程序之外的各类符合标准规范的小程序,以及相关的通用配置、API方法和进阶场景。

基础使用方法

基础方法包含引入npm包并初始化、上报,和设置安全域名这三个步骤:

  1. 引入npm包并初始化:

    1. 在小程序的项目中引入alife-logger npm包,以便使用该模块来上报日志。

      npm install alife-logger
      							
    2. 将以下内容添加至 /utils目录下的monitor.js文件中以完成初始化。

      说明 您可以自定义JS文件的名称和存放位置。
      import MiniProgramLogger from 'alife-logger/miniprogram';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // 设置用户uid,用于统计UV信息。
          region: 'cn', // 指定应用部署的地域:中国设为cn,中国以外地域设为sg。默认值为cn。
          // 基础小程序监控需要手动传入RPC。请按照实际业务写实现方法,以下示例为钉钉E应用中的调用方式。
          sendRequest: (url, resData) => {
                // 此部分由业务方配置,支持Get/Post上报。
              // demo in dingding
              var method = 'GET';
              var data;
              if (resData) {
                  method = 'POST';
                  data = JSON.stringify(resData);
              }
              dd.httpRequest({
                  url: url,
                  method: method,
                  data: data,
                  fail: function (error) {
                      //...
                  }
              });
          },
           // 手动传入获取当前页面路径的方法。请按照实际业务写实现方法,以下示例为钉钉E应用中的调用方式。
           getCurrentPage: () => {
                // 此部分由业务方配置。
              if (typeof getCurrentPages !== 'undefined' && typeof getCurrentPages === 'function') {
                  var pages = (getCurrentPages() || []);
                  var pageLength = pages.length;
                  var currPage = pages[pageLength - 1];
                  return (currPage && currPage.route) || null;
              }
           }
      });
      
      export default Monitor;
      							
      说明 关于参数的详细配置,请参见通用SDK配置项
  2. 上报日志:

    1. 在app.js中,使用以下两种方法之一上报日志:

      • 使用Monitor.hookApp(options)方法静默捕获Error类日志。其中的options即为App层相应的Object配置。

        import Monitor from '/utils/monitor';
        
            App(Monitor.hookApp({
              onError(err) {
                console.log('进入onError:', err);
              },
              onLaunch() {
                console.log('进入onLaunch');
              }
        
              onShow(options) {
              },
              onHide() {
              }
            }));
        
        									
      • 使用Monitor.error(err) 方法手动上报Error类日志。

        import Monitor from '/utils/monitor';
        
            App({
              onError(err) {
                  Monitor.error(err);
                console.log('进入onError:', err);
              },
              onLaunch() {
                console.log('进入onLaunch');
              }
        
              onShow(options) {
              },
              onHide() {
              }
            });
        									
    2. 在page的JS文件中,使用以下两种方法之一上报日志:

      • 使用Monitor.hookPage(options)方法静默上报PV、Health数据。

        说明 此方法不支持静默上报API请求。
        import Monitor from '/utils/monitor';
        
            Page(Monitor.hookPage({
               data: {},
                onLoad(query) {
                },
                onReady() {
                    // 页面加载完成
                },
                onShow() {
        
                },
                onLoad(query) {
        
                },
                onHide() {
        
                },
                onUnload() {
        
                },
                onTitleClick() {
                    /**
                     * 统计打点数据,自定义打点。
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            }));
        									
      • 调用API方法主动打点。

        说明 关于API方法的详细信息,请参见API方法
        import Monitor from './util/monitor';
        
            Page({
               data: {},
                onShow() {
                    Monitor.pageShow();
                },
                onHide() {
                    Monitor.pageHide();
                },
                onUnload() {
                    Monitor.pageHide();
                },
                onTitleClick() {
                    /**
                     * 统计打点数据,自定义打点。
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            });
        									
  3. 设置安全域名:

    • 如果region设为cn,则将https://arms-retcode.aliyuncs.com添加到合法域名。

    • 如果region设为sg,则将https://arms-retcode-sg.aliyuncs.com添加到合法域名。

API方法

方法 参数 备注
hookApp {} 请传入原有的App参数。可用于在App的生命周期中自动打点。
hookPage {} 请传入原有的Page参数。可用于在Page的生命周期中自动打点。
setCommonInfo {[key: string]: string;} 设置日志基础字段,可用于灰度发布等场景。
setConfig {[key: string]: string;} 设置config字段,详情请参见SDK配置项参数
pageShow {} Page Show打点,发送PV数据。
pageHide {} Page Hide打点,发送Health数据。
error String/Object 错误日志打点。
api 参见API参考 API类日志上报。
sum/avg String 自定义求和、求均值日志上报。
说明 小程序监控项目如需使用hookApp、hookPage嵌入生命周期打点,必须符合标准小程序关于App和Page的规范,即App层有onError,Page层有onShowonHideonUnload。使用方法示例请参见基础使用方法

大部分日志上报API与Web端监控SDK一致,其他API的使用方法如下:

  • 如需发送当前页面的PV数据,则在Page的onShow方法下调用pageShow() 方法。

    说明 请勿与hookPage()方法同时使用此方法,否则会造成PV类日志重复上报。
    import Monitor from '/util/monitor';
    Page({
        onShow: function() {
            Monitor.pageShow();
        }
    })
    					
  • 如需发送当前页面的Health类数据,统计当前页面的健康度和页面停留时间,则在Page的onHideonUnload方法下调用pageHide()方法。

    说明 请勿与hookPage()方法同时使用此方法,否则会造成日志重复上报。
    import Monitor from '/util/monitor';
      Page({
    
          onHide: function() {
              Monitor.pageHide();
          },
          onUnload: function() {
              Monitor.pageHide();
          }
          ... 
      })
    					

进阶场景

当基础使用方法无法满足需求时,请参见以下进阶场景:

  • 设置uid(主要用于统计UV信息)

    • 如果在监控SDK初始化之前,能够获得与用户有关的信息,则可以直接设置uid

    • 如果在监控SDK初始化之前,无法获得与用户有关的信息,则可以在应用onShow前获取用户信息,然后通过setCommonInfo({uid: 'xxx'}); 设置uid

  • 设置小程序相关的公共信息

    请使用setCommonInfo方法设置小程序相关的公共信息。ARMS前端监控会对以下字段进行统计分析:

    • sr:屏幕尺寸
    • vp:浏览器窗口可见区域
    • dpr:屏幕像素比
    • ul:文档语言
    • dr:文档Refer
    • ct:网络连接类型(例如WiFi或3G)
      警告 切勿使用setCommonInfo方法设置过多字段,否则可能超出请求的限制长度,从而导致请求失败。

通用SDK配置项

ARMS前端监控提供一系列SDK配置项,让您能够通过设置参数来满足额外需求。以下是适用于本文场景的通用配置项。

参数 类型 描述 是否必选 默认值
pid String 项目唯一ID,由ARMS在创建站点时自动生成。
uid String 用户ID,用于标识访问用户,可手动配置,用于根据用户ID检索。如果不配置,则由SDK自动生成且每半年更新一次。 由SDK自动生成
tag String 传入的标记,每条日志都会携带该标记。
release String 应用版本号。建议您配置,便于查看不同版本的上报信息。 undefined
environment String 环境字段,取值为:prod、gray、pre、daily和local,其中:
  • prod表示线上环境。
  • gray表示灰度环境。
  • pre表示预发环境。
  • daily表示日常环境。
  • local表示本地环境。
prod
sample Integer 日志采样配置,值为110100。性能和成功API日志按照1/sample的比例采样。 1
behavior Boolean 是否为了便于排查错误而记录报错的用户行为 false

ARMS前端监控还提供了更多SDK配置项,可满足进一步的需求,详情请参见SDK参考