Monitor a WeChat mini program

Background information

For background information about WeChat mini programs, see the WeChat mini program documentation.

Basic usage

To monitor a WeChat mini program with ARMS Browser Monitoring, complete the following three steps:

1. Obtain the WeChat mini program monitoring SDK and initialize it:

   1. In the /utils directory of your WeChat mini program project, create a file named wxLogger.js. Copy the contents of the monitoring SDK JS file and paste them into the wxLogger.js file.
   2. In the /utils directory, create a file named monitor.js and add the following code to the monitor.js file to initialize the SDK.
      Note You can customize the file names and storage locations.

      • If your project uses Node.js modules (require), add the following code:

        const WXLogger = require('./wxLogger.js');
        const Monitor = WXLogger.init({
          pid: 'xxx',
          region: 'cn', // Specify the deployment region: set to cn for China, or sg for regions near Singapore.
        });
        export default Monitor;

      • If your project uses ES modules (import), add the following code:

        import WXLogger from './wxLogger.js';
        const Monitor = WXLogger.init({
          pid: 'xxx',
          region: 'cn', // Specify the deployment region: set to cn for China, or sg for regions near Singapore.
        });
        export default Monitor;

      Set region to the deployment region of your application: cn for China, or sg for regions outside China that are close to Singapore.

      Note For detailed parameter configurations, see SDK parameters.

2. Enable automatic instrumentation to collect PV, error, API, performance, and health data:

   1. In app.js, use the Monitor.hookApp(options) method to automatically capture error logs. The options parameter is the Object configuration of the App layer.

      import Monitor from '/utils/monitor';
      
      App(Monitor.hookApp({
        onError(err) {
          console.log('Enter onError:', err);
        },
        onLaunch() {
          console.log('Enter onLaunch');
        },
        onShow(options) {
        },
        onHide() {
        }
      }));

   2. In the JS file of each page, use the Monitor.hookPage(options) method to automatically report API requests, PV, and health data.

      import Monitor from '/utils/monitor';
      
      // After you use hookPage, lifecycle APIs are automatically instrumented.
      Page(Monitor.hookPage({
        data: {},
        onLoad(query) {
        },
        onReady() {
          // The page is loaded.
        },
        onShow() {
        },
        onHide() {
        },
        onUnload() {
        }
      }));

3. Configure the security domain: add the ARMS domain that corresponds to your region value to the list of valid request domains of your WeChat mini program.

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

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

SDK parameters

ARMS Browser Monitoring provides SDK configuration parameters that you can set to meet additional requirements. The following table describes the common configuration parameters that apply to WeChat mini programs.

ARMS Browser Monitoring also provides additional SDK configuration parameters for further requirements. For more information, see SDK configuration parameters.

Automatic instrumentation APIs

The following table describes the methods that the WeChat mini program monitoring SDK provides for automatic lifecycle instrumentation.

Other configuration APIs

The following table describes the methods that you can call to configure the WeChat mini program monitoring SDK and report data.

Advanced use cases

When the automatic instrumentation methods described in Basic usage do not meet your requirements, use one of the following advanced configurations:

• Manually report API information instead of using automatic instrumentation:

  1. Set disableHook to true to disable automatic log reporting for wx.request requests.

  2. Manually call the api() method to report API information.

• Disable automatic instrumentation and instrument your pages manually:

  1. Do not use the hookApp or hookPage methods in the JS files of App and Page.

  2. To send PV data for the current page, call the pageShow() method in the onShow method of the page.

     Note Do not use this method together with hookPage(). Otherwise, duplicate PV data is reported.

     import Monitor from '/utils/monitor';
     
     Page({
       onShow: function() {
         Monitor.pageShow();
       }
     })

  3. To send health data for the current page, which includes page health and time on page, call the pageHide() method in the onHide and onUnload methods of the page.

     Note Do not use this method together with hookPage(). Otherwise, duplicate health data is reported.

     import Monitor from '/utils/monitor';
     
     Page({
       onHide: function() {
         Monitor.pageHide();
       },
       onUnload: function() {
         Monitor.pageHide();
       }
       // Other lifecycle methods.
     })