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

Background information

For more information, see https://docs.alipay.com/mini/developer/getting-started

Basic usage

To monitor mini programs, you must perform the following operations to introduce and initialize the npm package, report logs, and set security domain names.

  1. Introduce and initialize the npm package.

    1. In your mini program project, introduce the npm package named alife-logger to facilitate log reporting.

      npm install alife-logger
    2. Add the following information to the monitor.js file in the /utils directory to initialize the package.

      Note You can specify the name and storage path of the JavaScript (JS) file.
      import AlipayLogger from 'alife-logger/alipay';
      const Monitor = AlipayLogger.init({
          pid: 'xxx',
          region: 'cn', // The region where the application is deployed. Set region to cn if the application is deployed in China and set region to sg if the application is deployed outside China.
      });
      
      export default Monitor;              
      Note For more information about parameter settings, see Common parameters of SDK.
  2. Use the following methods to automatically collect the PV, error, API, performance, and health data of the Alipay mini program:

    1. In the app.js file, call the Monitor.hookApp(options) method 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, PV, and health data of the Alipay mini program.

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

    • If region is set to cn, add arms-retcode.aliyuncs.com to the HTTP security domain.

    • If region is set to sg, add arms-retcode-sg.aliyuncs.com to the HTTP security domain.

Basic API methods for automatic tracking

Method Parameter Description Scenario
hookApp {} Enter the parameters of the application. API lifecycle management automatically tracks the application.
hookPage {} Enter the parameters of the page. 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 usage.

Other API methods

Method Parameter Description
setCommonInfo {[key: string]: string;} Set basic log fields for the scenarios such as phased release.
setConfig {[key: string]: string;} Set the config field. For more information about the operation, see SDK configuration items parameters.
pageShow {} Report PV data.
pageHide {} Report health data.
error String/Object Report error logs.
api For more information, see API reference. Report API logs.
sum/avg String Report custom sum and average logs.

Advanced scenarios

If the basic usage cannot meet your requirements, refer to the following advanced scenarios:

  • Manually report the API request results.

    1. Set disableHook to true. The logs of my.httpRequest are not automatically reported.

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

  • 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 page, call the pageShow() method in the onShow method.

      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 (health and browsing time) of the page, call the pageHide() method in the onHide and onUnload methods.

      Note We recommend that you 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 parameters of SDK

ARMS browser monitoring provides a series of SDK parameters. You can configure the 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

ARMS browser monitoring also provides other SDK parameters. For more information, see SDK reference.