Monitor a WeChat mini program

Background

For background information, see the official WeChat mini program documentation.

Basic usage

To get started, follow these three steps: installing and initializing the SDK, enabling automatic instrumentation, and configuring the security domain.

1. Install and initialize the SDK:

   1. In the /utils directory of your WeChat mini program project, create a file named wxLogger.js. Copy the contents of the SDK JS file and paste them into wxLogger.js.
   2. In the /utils directory, create another file named monitor.js and add the following initialization code.
      Note You can customize the file names and their 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. Use '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. Use 'cn' for China or 'sg' for regions near Singapore.
            });
            export default Monitor;

      Note For detailed parameter configurations, see SDK parameters.

2. Use the following methods to automatically instrument page view (PV), error, API, performance, and health data:

   1. In app.js, use the Monitor.hookApp(options) method to automatically capture error logs. Pass your application's original configuration object as the options parameter.

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

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

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

3. Configure the security domain:

   • If you set region to cn, add https://arms-retcode.aliyuncs.com to your valid domain list.

   • If you set region to sg, add https://arms-retcode-sg.aliyuncs.com to your valid domain list.

Automatic instrumentation API

Other APIs

Advanced use cases

If the basic methods are insufficient, consider the following advanced use cases.

• To manually report API information:

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

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

• To use manual instrumentation:

  1. Do not use the hookApp and hookPage methods in your App and Page JavaScript files.

  2. To send PV data for the current page, call the pageShow() method within the page's onShow method.

     Note To avoid duplicate log reporting, do not use this method with hookPage().

     import Monitor from '/util/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 within the page's onHide and onUnload methods.

     Note To avoid duplicate log reporting, do not use this method with hookPage().

     import Monitor from '/util/monitor';
       Page({
     
           onHide: function() {
               Monitor.pageHide();
           },
           onUnload: function() {
               Monitor.pageHide();
           }
           ... 
       })

SDK parameters

The ARMS Browser Monitoring SDK offers various configuration parameters. The following table describes common parameters for this scenario.

For additional SDK configuration parameters, see SDK reference.