Monitor other types of mini programs

Basic usage

The basic setup involves three steps: installing and initializing the npm package, reporting logs, and configuring security domain names.

1. Install and initialize the npm package.

   1. In your mini program project, install the@arms/js-sdk npm package to enable monitoring.

      npm install @arms/js-sdk

   2. Add the following code to a monitor.js file in your /utils directory to initialize the SDK.

      Note

      You can customize the name and location of the JavaScript (JS) file.

      import MiniProgramLogger from '@arms/js-sdk/miniapp';
      const Monitor = MiniProgramLogger.init({
          pid: 'xxx',
          uid: 'userxxx', // Set the user ID, which is used for UV statistics.
          region: 'cn', // Specify the region where the application is deployed. Set this parameter to 'cn' for the Chinese mainland or 'sg' for regions outside the Chinese mainland. The default value is 'cn'.
          // For basic mini program monitoring, you must manually provide the RPC function. 
          // Implement the function based on your business logic. The following example shows how to make a call in a DingTalk E-App.
          sendRequest: (url, resData) => {
                // You must configure this part. It supports both GET and POST reporting.
              // Demo in DingTalk
              var method = 'GET';
              var data;
              if (resData) {
                  method = 'POST';
                  data = JSON.stringify(resData);
              }
              dd.httpRequest({
                  url: url,
                  method: method,
                  data: data,
                  fail: function (error) {
                      //...
                  }
              });
          },
           // Manually provide a function to get the current page path. 
           // Implement the function based on your business logic. The following example shows how to make a call in a DingTalk E-App.
           getCurrentPage: () => {
                // You must configure this part.
              if (typeof getCurrentPages !== 'undefined' && typeof getCurrentPages === 'function') {
                  var pages = (getCurrentPages() || []);
                  var pageLength = pages.length;
                  var currPage = pages[pageLength - 1];
                  return (currPage && currPage.route) || null;
              }
           }
      });
      
      export default Monitor;

      Note

      For more information about the parameters, see SDK parameters.

2. Report logs.

   1. In app.js, use one of the following methods to report logs:

      • Use the Monitor.hookApp(options) method to automatically capture Error logs. The options parameter is the original configuration object of your App.

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

      • Use the Monitor.error(err) method to manually report Error logs.

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

   2. In the JS file for a page, use one of the following methods to report logs:

      • Use the Monitor.hookPage(options) method to automatically report page view (PV) and health data.

        Note

        This method does not automatically report API requests.

        import Monitor from '/utils/monitor';
        
            Page(Monitor.hookPage({
               data: {},
                onLoad(query) {
                },
                onReady() {
                    // The page has finished loading.
                },
                onShow() {
        
                },
                onLoad(query) {
        
                },
                onHide() {
        
                },
                onUnload() {
        
                },
                onTitleClick() {
                    /**
                     * Report custom instrumentation data.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            }));

      • Call API methods to manually report data.

        Note

        For more information about API methods, see API methods.

        import Monitor from './util/monitor';
        
            Page({
               data: {},
                onShow() {
                    Monitor.pageShow();
                },
                onHide() {
                    Monitor.pageHide();
                },
                onUnload() {
                    Monitor.pageHide();
                },
                onTitleClick() {
                    /**
                     * Report custom instrumentation data.
                     * @desc
                     */
                    Monitor.sum('titleClick');
                }       
            });

3. Configure security domain names.

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

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

API methods

Most log reporting APIs are consistent with the web browser monitoring SDK. The usage of other APIs is described below:

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

  Note

  Do not use this method together with the hookPage() method. Otherwise, duplicate PV logs are reported.

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

• To send health data for the current page and measure the health level and time on page, call the pageHide() method within the Page's onHide and onUnload lifecycle methods.

  Note

  Do not use this method together with the hookPage() method. Otherwise, duplicate logs are reported.

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

Advanced scenarios

If the basic usage does not meet your requirements, consider the advanced scenarios in this section.

• Setting the uid (for UV statistics)

  • If the user ID is available before the SDK is initialized, you can set the uid directly in the init configuration.

  • If the user ID is not available at initialization, you can retrieve it before the application's onShow event and then set the uid by calling setCommonInfo({uid: 'xxx'}).

• Setting common information for the mini program

  Use the setCommonInfo method to set common information for the mini program. ARMS browser monitoring analyzes the following fields:

  • sr: screen resolution

  • vp: viewport

  • dpr: device pixel ratio

  • ul: document language

  • dr: document referrer

  • ct: network connection type (for example, Wi-Fi or 3G)

    Warning

    Do not set too many fields by using the setCommonInfo method. Exceeding the request length limit may cause the request to fail.

SDK parameters

ARMS browser monitoring provides SDK parameters for advanced configuration. The following table describes common parameters applicable to this scenario.

For a complete list of SDK parameters, see the Browser Monitoring SDK configuration.