All Products
Search
Document Center

Application Real-Time Monitoring Service:Monitor WeChat mini programs

Last Updated:Dec 28, 2024

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 SDK methods.

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.

pid

String

The unique ID of the project. It is automatically generated by ARMS when it creates a site.

Yes

None

uid

String

The ID of the user. The value is an identifier of the user and can be used to search for the user. You can specify a custom value. If you do not specify this parameter, the SDK is automatically generated and updated every six months.

No

Automatically generated by the 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 this parameter to view the report information of different versions.

No

undefined

environment

String

The environment field. Valid values: prod, gray, pre, daily, and local.

  • The value prod indicates an online environment.

  • The value gray indicates a phased-release environment.

  • The value pre indicates a staging environment.

  • The value daily indicates a daily environment.

  • The value local indicates a local environment.

No

prod

sample

Integer

The log sampling configuration. The value is an integer from 1 to 100. The performance logs and success API logs are sampled at the 1/sample ratio. For more information about the metrics of performance logs and success API logs, see Statistical metrics.

No

1

behavior

Boolean

Specifies whether to record the user behavior that reports errors for easy troubleshooting.

No

false

enableLinkTrace

Boolean

For more information about back-to-back Tracing Analysis, 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.