Implement browser monitoring in the Weex environment - Application Real-Time Monitoring Service

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

Import the NPM package

To use the browser monitoring feature of ARMS in the Weex environment, run the following command in your project to import the Node Package Manager (npm) package named arms/js-sdk and use the dedicated WeexLogger module to report logs:

npm install @arms/js-sdk --save

Initialize the SDK

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

Note

To call the singleton(props) method at the entry point of a Weex application to obtain instances, configure parameters for the imported props. For more information, see the following sections:

General method: @static singleton()
General method: setPage()
General method: setConfig()

// Add the following content to monitor.js:
import WeexLogger from '@arms/js-sdk/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',
    // Configure the UID to generate unique visitor (UV) reports.
    page: 'Lazada | Home',
    // Configure the name of the initial page. The SDK sends page view (PV) reports after the initialization is complete.
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
    // Specify the path to which the reports are sent. If you want to deploy the SDK in the Singapore region, set the path to 'https://arms-retcode-sg.aliyuncs.com/r.png?'.
    // The following code provides an example on how to use the GET method to send reports:
    sendRequest: (data, imgUrl) = >{
        const url = imgUrl + serialize(data);
        fetch({
            method: 'GET',
            url
        });
    },
    // The following code provides an example on how to use the POST method to send reports:
    postRequest: (data, imgUrl) = >{
        fetch({
            method: 'POST',
            type: 'json',
            url: imgUrl,
            body: JSON.stringify(data)
        });
    }
});

export
default wxLogger;

Report logs

Call the corresponding 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 when the method is called for the first time. The following table describes the parameters you can configure when you call the method.

This method can be used to initialize the SDK at the application entry point. For more information, see Initialize the SDK.

Table 1. Parameters of WeexLogger.singleton(props)

Parameter	Type	Description	Required	Default value
pid	String	The site ID.	Yes	None
page	String	The page name after initialization.	No	None
uid	String	The ID of the user.	Yes	None
imgUrl	String	The path to which the logs are uploaded. The path ends with a question mark (?).	No	None

General method: setPage()

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

import wxLogger from '/utils/monitor';
// ...
wxLogger.setPage(nextPage);

Table 2. Parameters of wxLogger.setPage(nextPage)

Parameter	Type	Description	Required	Default value
nextPage	String	Page Name	Yes	None

General method: setConfig()

setConfig() is used to modify configurations after the SDK is initialized. The configuration method is the same as that of singleton(). For more information about the parameters that you can configure for the method, see setConfig().

import wxLogger from '/utils/monitor';
// ...
wxLogger.setConfig(config);

Table 3. Parameters of wxLogger.setConfig(config)

Parameter	Type	Description	Required	Default value
config	Object	The configuration items you want to modify.	Yes	None
uid	String	The user ID used to collect the unique visitor (UV) data.	Yes	Storage settings

Log reporting methods

For more information, see the log reporting methods in SDK methods.

Common SDK parameters

The browser monitoring feature of ARMS allows you to configure a variety of SDK parameters to meet more requirements. The following table describes the parameters that you can configure in 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.	Yes	None
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`

For more information about the SDK parameters that you can configure, see SDK reference.