This topic describes how to use the browser monitoring function of Application Real-Time Monitoring Service (ARMS) to monitor the standards-compliant mini programs, except for DingTalk, Alipay, and WeChat mini programs. It also demonstrates the general configurations, methods, and advanced scenarios.
Basic usage
To monitor the mini programs, you need to perform at least the three steps: introducing and initialize the npm (Node Package Manager) package, reporting logs, and setting security domains.
-
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 npm package.
Note You can specify the name and storage path of the 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 it to cn if the application is deployed in China and to sg if the application is deployed outside China. The default value is cn. // You need to specify the remote procedure call (RPC) method to perform browser monitoring of mini programs. Write the implementation method as needed. The following example takes the method of DingTalk E-App as an example. sendRequest: (url, resData) => { // This parameter 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 get the path of the current page. Write the implementation method as needed. The following example takes the method of DingTalk E-App as an example. getCurrentPage: () => { // This parameter 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 parameters.
-
-
Report logs.
-
In app.js, use either of the following two methods to report logs:
-
Use the Monitor.hookApp(options) method to automatically capture error logs. The options parameter is the 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 either of the following two methods to report logs:
-
Use the Monitor.hookPage(options) method to automatically report the PV and health data.
Note Automatic report of API request results is not supported in this method.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'); } }));
-
-
-
Set security domains.
-
If the region is set to
cn
, addhttps://arms-retcode.aliyuncs.com
to the valid domain of the request. -
If the region is set to
sg
, addhttps://arms-retcode-sg.aliyuncs.com
to the valid domain of the request.
-
Common parameters
The following table lists the common parameters that are used for initializing the NPM package.
Parameter | Type | Description | Required | Default value |
---|---|---|---|---|
pid | String | The ID of the site. | Yes | null |
uid | String | The ID of the user, which is used to collect the UV data. | No | Storage setting |
tag | String | The input tag. Each log carries a tag. | No | None |
disabled | Boolean | Specifies whether the log reporting function is disabled. | No | false |
sample | Integer | The log sampling rate. Valid values: 1, 10, and 100. Performance logs and successful API request logs are reported in a 1/number of samples ratio. | No | 1 |
disableHook | Boolean | Specifies whether to disable monitoring my.httpRequest. By default, the request is monitored, and the API request success rate is reported. | No | false |
sendRequest | Function | The method for sending logs. If this parameter is not configured, the logs cannot be sent. | Yes | None |
getCurrentPage | Function | The method for obtaining the current page. | Yes | None |
Fields in sendRequest
The sendRequest parameter is used to send logs and must support the GET or POST method. The POST method is used to report error logs. The method parameters are described as follows.
Parameter | Type | Description |
---|---|---|
url | String | The URL to which the log is reported. |
resData | Object | The content that you want to report in the POST method. When a value is set for this parameter, the log must be reported in the POST method. Otherwise, the log must be reported in the GET method. |
sendRequest
configuration example
sendRequest: (url, resData) => {
// This parameter 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) {
//...
}
});
}
Methods
Method | Parameter | Remarks |
---|---|---|
hookApp | {} | Enter the source app parameters. The app lifecycle API automatically starts instrumentation. |
hookPage | {} | Enter the source page parameters. The page lifecycle API automatically starts instrumentation. |
setCommonInfo | {[key: string]: string;} | Set basic log fields for the scenarios such as phased release. |
setConfig | {[key: string]: string;} | Set the config field. |
pageShow | {} | Report the PV data. |
pageHide | {} | Report the health data. |
error | String/Object | Report error logs. |
api | See also API reference | Report the API request logs. |
sum/avg | String | Report the custom sum and average logs. |
Most log report methods achieve 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 Page.
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 (health and browsing time) of the current page, call pageHide() under onHide and onUnload of Page.
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
When the basic usage cannot meet your needs, see the following advanced scenarios.
-
Set the uid, which is used to collect the UV data.
-
If you can obtain the user information before initializing the monitoring SDK, you can directly set the uid.
-
Otherwise, you can obtain the user information before onShow is triggered for the application and then call setCommonInfo({uid: 'xxx'}) to set the uid.
-
-
Set common information for mini programs.
Call setCommonInfo to set common information for mini programs. ARMS browser monitoring performs statistical analysis of the following fields:
- 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, for example, Wi-Fi or 3G.
Warning Do not call setCommonInfo to set too many fields at a time. Otherwise, the request length may exceed the constraints, causing request failures.