Track Alipay Mini Program Performance with ARMS Browser SDK - ARMS - Alibaba Cloud - Application Real-Time Monitoring Service

Install and initialize the Application Real-Time Monitoring Service (ARMS) Browser Monitoring SDK in your Alipay mini program to start monitoring the mini program. This topic also describes the common SDK parameters, API methods, and advanced scenarios that ARMS Browser Monitoring supports.

Prerequisites

The pid of the application that you want to monitor in ARMS Browser Monitoring. You set this value when you initialize the SDK.
An Alipay mini program project in which you can install npm packages.

Basic usage

Complete the following steps to integrate the ARMS Browser Monitoring SDK into your Alipay mini program:

Set the HTTP security domain that corresponds to the region value that you use to initialize the SDK:
- If you set region to cn, add arms-retcode.aliyuncs.com to the HTTP security domain.
- If you set region to sg, add arms-retcode-sg.aliyuncs.com to the HTTP security domain.
In your Alipay mini program project, install the @arms/js-sdk npm package so that you can use the module to report logs.
```
npm install @arms/js-sdk
```

Add the following code to the monitor.js file in the /utils directory to complete the initialization.

import AlipayLogger from '@arms/js-sdk/miniapp';
const Monitor = AlipayLogger.init({
    pid: 'xxx',
    region: 'cn', // Specify the region where your application is deployed. Set this to cn for China or sg for regions outside China.
});

export default Monitor;

Note

You can use a custom name and location for the JS file.

For descriptions of pid, region, and the other parameters that you pass to init(), see Common SDK parameters.

Common SDK parameters

ARMS Browser Monitoring provides SDK parameters that you can set to meet additional requirements. The following table describes the commonly used parameters.

Parameter	Type	Description	Required	Default
	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 Diagnose API errors with front-to-back tracing.	No	`false`

ARMS Browser Monitoring also provides more SDK parameters for further requirements. For a complete list, see Browser Monitoring SDK configuration.

API methods

Method	Parameter	Description
`setCommonInfo`	{[key: string]: string;}	Sets basic log fields. Use this method for scenarios such as a canary release.
`setConfig`	{[key: string]: string;}	Set the config field. For more information, see SDK reference.
`pageShow`	{}	Instruments the page show event and reports page view (PV) data.
`pageHide`	{}	Instruments the page hide event and reports health data.
`error`	String/Object	Instruments and reports error logs.
`api`	See Frontend API reference	Reports API logs.
`sum`/`avg`	String	Reports custom sum and average logs.

Advanced scenarios

The basic usage of the ARMS Browser Monitoring SDK is the default path, in which the SDK reports logs automatically. If the basic usage does not meet your requirements, use one of the following advanced scenarios.

Manually report API information instead of using automatic reporting

Set disableHook to true to disable automatic reporting of logs for my.httpRequest requests.
Manually call the api() method to report API information.

Disable automatic reporting and switch to manual instrumentation

Stop using the hookApp and hookPage methods in the JS files that correspond to App and Page.

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

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

To send health data for the current page and collect the page dwell time, call the pageHide() method within the page's onHide and onUnload methods.

import Monitor from '/utils/monitor';
  Page({

      onHide: function() {
          Monitor.pageHide();
      },
      onUnload: function() {
          Monitor.pageHide();
      }
      // Other page lifecycle methods.
  })