This topic describes how to use the browser monitoring feature of Application Real-Time Monitoring Service (ARMS) to monitor the standards-compliant mini programs, excluding DingTalk, Alipay, and WeChat mini programs. This topic also describes the related general configurations, API methods, and advanced scenarios.
Basic usage
To monitor mini programs, you must perform the following operations to introduce and initialize the npm package, report logs, and configure security domain names.
Introduce and initialize the npm package.
In your mini program project, introduce the npm package named
alife-logger
to facilitate log reporting.npm install alife-logger
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 MiniProgramLogger from 'alife-logger/miniprogram'; const Monitor = MiniProgramLogger.init({ pid: 'xxx', uid: 'userxxx', // The ID of the user, which is used to collect the unique visitor (UV) data. 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. The default value is cn. // You must specify the remote procedure call (RPC) method to perform browser monitoring of mini programs. Write the implementation method. The method of DingTalk E-App is used in the following example. sendRequest: (url, resData) => { // The following snippet must be configured by the business side. The GET or POST method is supported. // demo in dingding 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 enter the method to obtain the path of the current page. Write the implementation method. The method of DingTalk E-App is used in the following example. getCurrentPage: () => { // The following snippet must be configured by the business side. 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 parameter configurations, see Common SDK parameters.
Report logs.
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 an app-specific object.
import Monitor from '/utils/monitor'; App(Monitor.hookApp({ onError(err) { console.log('Trigger onError:', err); }, onLaunch() { console.log('Trigger 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('Trigger onError:', err); }, onLaunch() { console.log('Trigger onLaunch'); }, onShow(options) { }, onHide() { } });
In page.js, use one of the following methods to report logs:
Use the Monitor.hookPage(options) method to automatically report the page view (PV) and health data.
Note This method does not support automatic report of API requests.import Monitor from '/utils/monitor'; Page(Monitor.hookPage({ data: {}, onLoad(query) { }, onReady() { // Page loaded. }, onShow() { }, onLoad(query) { }, onHide() { }, onUnload() { }, onTitleClick() { /** * Collects instrumentation data and performs instrumentation in a custom manner. * @desc */ Monitor.sum('titleClick'); } }));
Configure security domain names.
If region is set to
cn
, addhttps://arms-retcode.aliyuncs.com
to the valid domain name.If region is set to
sg
, addhttps://arms-retcode-sg.aliyuncs.com
to the valid domain name.
API methods
Method | Parameter | Remarks |
---|---|---|
hookApp | {} | Enter the source app parameters. This method is used to automatically perform instrumentation during the lifecycle of the app. |
hookPage | {} | Enter the source page parameters. This method is used to automatically perform instrumentation during the lifecycle of the page. |
setCommonInfo | {[key: string]: string;} | Set basic log fields for scenarios such as phased release. |
setConfig | {[key: string]: string;} | Set the config field. For more information, see SDK configuration items parameters |
pageShow | {} | Report the PV data. |
pageHide | {} | Report the health data. |
error | String/Object | Report error logs. |
api | For more information, see API reference. | Report the API request logs. |
sum/avg | String | Report the custom sum and average logs. |
Most log reporting methods serve the same purposes as the browser monitoring SDKs. The following section describes how to call other methods:
To send the PV data of the current page, call pageShow() under onShow of pages.
Note Do not call pageShow() together with hookPage(). Otherwise, the PV logs are reported repeatedly.import Monitor from '/util/monitor'; Page({ onShow: function() { Monitor.pageShow(); } })
To send the health data such as health level and time on page, call pageHide() under onHide and onUnload of pages.
Note Do not call pageHide() together with hookPage(). Otherwise, the logs are reported repeatedly.import Monitor from '/util/monitor'; Page({ onHide: function() { Monitor.pageHide(); }, onUnload: function() { Monitor.pageHide(); } ... })
Advanced scenarios
If the basic usage cannot meet your requirements, refer to the following advanced scenarios:
Set uid to collect the UV data.
If you can obtain the user information before the monitoring SDK is initialized, you can set uid.
If you cannot obtain the user information before the monitoring SDK is initialized, you can obtain the user information before onShow is triggered for the application, and then call setCommonInfo({uid: 'xxx'}) to set uid.
Configure common information for mini programs.
Call setCommonInfo to configure common information for mini programs. ARMS browser monitoring performs statistical analysis on the following parameters:
- sr: the size of the screen
- vp: the visible section in the browser window
- dpr: the pixel ratio of the screen
- ul: the language of the document
- dr: the reference of the document
- ct: the network connection type, such as Wi-Fi or 3G Warning Do not call setCommonInfo to configure excess parameters at a time. Otherwise, the request length may exceed the constraints and request failures occur.
Common SDK parameters
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.
Field | Job 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.
| 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 |
ARMS browser monitoring also provides other SDK parameters. For more information, see SDK reference.