This topic describes how to use the browser monitoring feature of Application Real-Time Monitoring Service (ARMS) to monitor WeChat mini programs. This topic also describes the common SDK configurations, API operations, and advanced scenarios of the browser monitoring feature.

Background information

For more information about WeChat mini programs, visit WeChat mini programs.

Basic method

To monitor a WeChat mini program, you must perform the following steps:

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

    1. Create a wxLogger.js file in the /utils folder of the WeChat mini program that you want to monitor and copy the content of the JS file to the wxLogger.js file.
    2. Create a monitor.js file in the /utils folder and add the following content to the monitor.js file to initialize the monitoring SDK.
      Note You can customize 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 monitor.js file:

        const WXLogger = require('./wxLogger.js');
            const Monitor = WXLogger.init({
                pid: 'xxx',
                region: 'cn',    // Specify the region where the application is deployed. A value of cn indicates China, and a value of sg indicates regions that are close to Singapore. 
            });
            export default Monitor;
      • If the project is integrated by using the ES module (import) method, add the following content to the monitor.js file:

        import WXLogger from './wxLogger.js';
            const Monitor = WXLogger.init({
                pid: 'xxx',
                region: 'cn',    // Specify the region where the application is deployed. A value of cn indicates China, and a value of sg indicates regions that are close to Singapore. 
            });
            export default Monitor;
      Note For more information about parameter settings, see Common SDK parameters.
  2. Use the following methods to automatically collect the PV, error, API, performance, and health data of the WeChat mini program:

    1. In app.js, call the Monitor.hookApp(options) method to automatically capture error logs. The options parameter is an 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 the Monitor.hookPage(options) method to automatically report the API, PV, and health data of the WeChat mini program.

      import Monitor from '/util/monitor';
      // After you call the hookPage method, the lifecycle-based API automatically starts instrumentation. 
      Page(Monitor.hookPage({
         data: {},
          onLoad(query) {
          },
          onReady() {
          // The page is loaded. 
          },
          onShow() {
      
          },
          onLoad(query) {
      
          },
          onHide() {
      
          },
          onUnload() {
      
          }     
      }));
  3. Set security domain names.

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

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

Basic methods for automatic instrumentation

Method Parameter Description Scenario
hookApp null Enter the source app parameters. Perform automatic instrumentation during the lifecycle of the app.
hookPage null Enter the source page parameters. API lifecycle management automatically tracks the page.
Note If you want to call the hookApp or hookPage method to track and monitor mini programs, the code must conform to the app and page specifications of standard mini programs. The onError method must be included in the code of the application. The onShow, onHide, and onUnload methods must be included in the code of the page. For more information, see Basic method.

Methods for other settings

Method Parameter Description
setCommonInfo {[key: string]: string;} Set basic log fields for scenarios such as canary releases.
setConfig {[key: string]: string;} Set the config field. For more information, see SDK reference.
Note For the setConfig method, the uid parameter is not supported if you monitor mini programs. However, you can use the setUsername parameter to replace the uid parameter.
pageShow null Report the PV logs.
pageHide null Report the health logs.
error String/Object Report the error logs.
api For more information, see API reference. Report the API request logs.
sum/avg String Reports the custom sum and average logs.

Advanced scenarios

If the basic usage of application monitoring cannot meet your requirements, try the usage in the following advanced scenarios:

  • Manually report the API request results.

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

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

  • Disable automatic reporting and enable manual tracking.

    1. Do not 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 the pageShow() method in the onShow method of Page.

      Note We recommend that you do not call the pageShow() method together with the hookPage() method. Otherwise, the PV logs are repeatedly reported.
      import Monitor from '/util/monitor';
      Page({
          onShow: function() {
              Monitor.pageShow();
          }
      })
    3. To send the health data including the health and browsing time of the current page, call the pageHide() method under the onHide and onUnload methods of Page.

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

Common SDK parameters

The browser monitoring feature of ARMS allows you to set a variety of SDK parameters to meet additional requirements. The following table describes the common parameters suitable for the scenarios described in this topic.

Parameter Type Description Required Default Value
pid String The unique ID of the project, which is automatically generated by ARMS when it creates the site. Yes N/A
uid String The user ID, which identifies the user and can be manually configured to be retrieved based on the user ID. If you do not configure the settings, they are automatically generated by the SDK and updated semi-annually. No Automatically generated by SDK
tag String The input tag. Each log carries a tag. No None
release String The version of the application. We recommend that you configure to view the reports of different versions. No undefined
environment String The environment field. Valid values: prod, gray, pre, daily, and local, where:
  • prod indicates an online environment.
  • gray indicates a phased-release environment.
  • pre indicates a staging environment.
  • daily indicates a daily environment.
  • local indicates a local environment.
No prod
sample Integer The log sampling configuration. The value is an integer ranging from 1 to 100. For performance logs and successful API logs, follow the steps in 1/sample The proportional sampling of. For more information about metrics descriptions of performance logs and successful API logs, see Statistical metrics. No 1
behavior Boolean Whether to record the error user behavior to facilitate troubleshooting. No false
enableLinkTrace Boolean For more information about tracing frontend and backend links, see Use the front-to-back tracing feature to diagnose API errors. No false

The ARMS browser monitoring feature also provides other SDK parameters to meet your business requirements. For more information, see SDK reference.