This topic describes how to use the browser monitoring function of Application Real-Time Monitoring Service (ARMS) to monitor WeChat mini programs. It also demonstrates the general configurations, methods, and advanced scenarios.

Basic usage

To monitor the mini programs, you need to perform at least the three steps: obtaining and initializing the monitoring SDK for WeChat mini programs, reporting logs, and setting the security domain.

  1. Obtain and initialize the monitoring SDK for WeChat mini programs.

    1. Copy and paste the content of this JS file to the wxLogger.js file in the /utils directory of WeChat mini programs.

    2. Add the following information to the monitor.js file in the /utils directory to initialize the SDK.

      Note You can specify the name and storage path of the JS file.

      • If the project is integrated by using the node module (require) method, add the following content to the wxLogger.js file: 

        const WXLogger = require('./wxLogger.js');
    const Monitor = WXLogger.init({
        pid: 'xxx',
        region: 'cn'
    });
    export default Monitor;

      • If the project is integrated by using the ES module (import) method, add the following content to the wxLogger.js file: 

        import WXLogger from './wxLogger.js';
    const Monitor = WXLogger.init({
        pid: 'xxx',
        region: 'cn'
    });
    export default Monitor;
      Note For more information about parameter configurations, see Common parameters.

  2. Call the following methods to automatically collect the page view (PV), error, API request, performance, and health data.

    1. In app.js, call Monitor.hookApp(options) to automatically capture error logs. The options parameter is the app-specific object. 

      import Monitor from '/util/monitor';

App(Monitor.hookApp({
  onError(err) {
      console.log('Trigger onError:', err);
  },
  onLaunch() {
    console.log('Trigger onLaunch');
  },

  onShow(options) {
  },
  onHide() {
  }
}));

    2. In page.js, call Monitor.hookPage(options) to automatically report the API request, PV, and health data. 

      import Monitor from '/util/monitor';
// After hookPage is called, the lifecycle API automatically starts instrumentation.
Page(Monitor.hookPage({
   data: {},
    onLoad(query) {
    },
    onReady() {
    // Page loaded.
    },
    onShow() {

    },
    onLoad(query) {

    },
    onHide() {

    },
    onUnload() {

    }     
}));

  3. Set security domains.

    • If the region is set to cn, add https://arms-retcode.aliyuncs.com to the valid domain of the request.

    • If the region is set to sg, add https://arms-retcode-sg.aliyuncs.com to the valid domain of the request.

Common parameters

The following table lists the common parameters that are used for initializing the monitoring SDK.

Parameter Type Description Required Default value
pid String The ID of the site. Yes null
uid String The ID of the user, which is used to collect the unique visitor (UV) data. No Storage setting
tag String The input tag. Each log carries a tag. No None
disabled Boolean Specifies whether the log reporting function is disabled. No false
sample Integer The log sampling rate. Valid values: 1, 10, and 100. Performance logs and successful API request logs are reported in a 1/number of samples ratio. No 1
enableLinkTrace Boolean Specifies whether front-to-back tracing is supported. No false
disableHook Boolean Specifies whether to disable monitoring the request. By default, the request is monitored, and the API request success rate is reported. No false
sendRequest Function The method for sending logs. If this parameter is not configured, the default value wx.request is used. No wx.request
getCurrentPage Function The method for obtaining the current page. No getCurrentPage

Basic methods for automatic instrumentation

Method Parameter Remarks Scenario
hookApp {} Enter the source app parameters. The app lifecycle API automatically starts instrumentation.
hookPage {} Enter the source page parameters. The page lifecycle API automatically starts instrumentation.
Note If the lifecycle API calls the hookApp or hookPage method for instrumentation in mini program monitoring projects, the projects must conform to the app and page regulations of standard mini programs. In other words, the projects must support onError under App, and onShow, onHide, and onUnload under Page. For usage examples, see Basic usage.

Methods for other settings

Method Parameter Remarks
setCommonInfo {[key: string]: string;} Set basic log fields for the scenarios such as phased release.
setConfig {[key: string]: string;} Set the config field.
pageShow {} Report the PV data.
pageHide {} Report the health data.
error String/Object Report error logs.
api See also api() for reporting the API call success rate Report the API request logs.
sum/avg String Report the custom sum and average logs.

Advanced scenarios

When the basic usage cannot meet your needs, see the following advanced scenarios.

  • Manually report the API request results (automatic reporting is disabled).

    1. Set disableHook to true. The logs of the wx.request request are not reported automatically.

    2. Manually call api() to report the API request results.

  • Disable automatic reporting and enable manual instrumentation.

    1. No longer use the hookApp and hookPage methods in the app.js and page.js files.

    2. To send the PV data of the current page, call pageShow() under onShow of Page.

      Note Do not call pageShow() together with hookPage(). Otherwise, the PV logs are reported repeatedly. 
      import Monitor from '/util/monitor';
Page({
    onShow: function() {
        Monitor.pageShow();
    }
})

    3. To send the health data (health and browsing time) of the current page, call pageHide() under onHide and onUnload of Page.

      Note Do not call pageHide() together with hookPage(). Otherwise, the logs are reported repeatedly. 
      import Monitor from '/util/monitor';
  Page({

      onHide: function() {
          Monitor.pageHide();
      },
      onUnload: function() {
          Monitor.pageHide();
      }
      ... 
  })

More information