This topic describes how to use the browser monitoring function of Application Real-Time Monitoring Service (ARMS) in the Weex environment.

Import the NPM package

To use ARMS browser monitoring in the Weex environment, run the following command in the project to import the Node Package Manager (NPM) package named alife-logger and use the dedicated WeexLogger module to report logs:

npm install alife-logger --save

Initialize the SDK

Create the monitor.js file in the /utils directory and initialize the SDK according to the following sample code.

Note To call the singleton(props) method at the Weex application entry point to obtain instances, set the configurations in the input props. For more information, see General method: @static singleton(), General method: setPage(), and General method: setConfig().
// in monitor.js
import WeexLogger from 'alife-logger/weex';

const fetch = weex.requireModule('stream').fetch;
const serialize = (data) => {
data = data || {};
var arr = [];
for (var k in data) {
if (Object.prototype.hasOwnProperty.call(data, k) && data[k] ! == undefined) {
arr.push(k + '=' + encodeURIComponent(data[k]).replace(/\(/g, '%28').replace(/\)/g, '%29'));
}
}
return arr.join('&');
}

// Initialize the SDK.
const wxLogger = WeexLogger.singleton({
pid: 'your-project-id',
uid: 'zhangsan', // Login uid, for UV report
page: 'Lazada | Home', // Initial page name, if passed, SDK will send a PV log after Initialization completed
imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // Set the URL to which logs are uploaded. If you want to deploy the SDK in Singapore, change it to 'https://arms-retcode-sg.aliyuncs.com/r.png?'.
// Set the GET method for log reporting as follows:
sendRequest: (data, imgUrl) => {
const url = imgUrl + serialize(data);
fetch({
method: 'GET',
url
});
},
// Set the POST method for log reporting as follows:
postRequest: (data, imgUrl) => {
fetch({
method: 'POST',
type: 'json',
url: imgUrl,
body: JSON.stringify(data)
});
}
});

export default wxLogger;

Report logs

Call the corresponding reporting methods to report logs based on instances.

// in some biz module
import wxLogger from '/utils/monitor';
wxLogger.api('/search.do', true, 233, 'SUCCESS');

General method: @static singleton()

@static singleton() is a static method used to return a single instance. props takes effect only upon the initial call. The following table describes the common parameters.

Table 1. WeexLogger.singleton(props) call parameters
Parameter Type Description Required Default value
pid String The ID of the site. Yes None
page String The page name after initialization. No None
uid String The ID of the user. Yes None
imgUrl String The URL to which logs are uploaded, which ends with a question mark (?). [DO NOT TRANSLATE] No None

This method can be used to initialize the SDK at the application entry point. See Initialize the SDK for example code.

General method: setPage()

setPage() is used to set the name of the current page and report the PV logs once (default).

import wxLogger from '/utils/monitor';
// ...
wxLogger.setPage(nextPage);
Table 2. wxLogger.setPage(nextPage) call parameters
Parameter Type Description Required Default value
nextPage String The page name. Yes None

General method: setConfig()

setConfig() is used to modify some configurations after SDK initialization. The configuration method is the same as that of singleton().

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(next);
Table 3. wxLogger.setConfig(next) call parameters
Parameter Type Description Required Default value
next Object The configuration item to be modified and its value. Yes None

Log reporting methods

For more information, see the log reporting methods in Methods user guide .