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.
NoteYou 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;
NoteFor 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.
NoteThis 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 reference. |
pageShow | {} | Report the PV data. |
pageHide | {} | Report the health data. |
error | String/Object | Report error logs. |
api | For more information, see SDK methods. | Report the API request logs. |
sum/avg | String | Report the custom sum and average logs. |
If you want to call the hookApp or hookPage method for instrumentation in mini program monitoring projects, the projects must conform to the app and page regulations of standard mini programs. The projects must support onError for apps, and onShow, onHide, and onUnload for pages. For examples of the method, see Basic usage.
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.
NoteDo 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.
NoteDo 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
WarningDo 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.
|
|
|
|
|
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 |
|
environment | String | The environment field. Valid values: prod, gray, pre, daily, and local.
| No |
|
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 | No |
|
behavior | Boolean | Specifies whether to record the user behavior that reports errors for easy troubleshooting. | No |
|
ARMS browser monitoring also provides other SDK parameters. For more information, see SDK reference.