Application Real-Time Monitoring Service:Set up browser monitoring for Weex

Prerequisites

Before you begin, make sure that you have:

• An ARMS browser monitoring site with a valid site ID (pid)

• Node.js and npm in your development environment

• A Weex project that uses the stream module

Step 1: Install the SDK

Run the following command in your Weex project root:

npm install @arms/js-sdk --save

Step 2: Initialize the SDK

Create a monitor.js file in the /utils directory. This file serves as a centralized monitoring module that the rest of your application imports.

The initialization code has two parts:

• Weex transport layer -- Boilerplate that enables HTTP reporting in Weex. ARMS requires custom sendRequest and postRequest functions that use the Weex stream module.

• SDK configuration -- Your project-specific settings such as site ID and reporting endpoint.

// /utils/monitor.js
import WeexLogger from '@arms/js-sdk/weex';

// --- Weex transport layer (copy as-is) ---
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('&');
};

// --- SDK configuration (replace placeholders with your values) ---
const wxLogger = WeexLogger.singleton({
    pid: '<YOUR_SITE_ID>',
    uid: '<YOUR_USER_ID>',           // User identifier for UV reports
    page: '<YOUR_INITIAL_PAGE>',     // Initial page name; triggers a PV report on init
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
    // For the Singapore region, use:
    // imgUrl: 'https://arms-retcode-sg.aliyuncs.com/r.png?',

    // GET transport
    sendRequest: (data, imgUrl) => {
        const url = imgUrl + serialize(data);
        fetch({
            method: 'GET',
            url
        });
    },
    // POST transport
    postRequest: (data, imgUrl) => {
        fetch({
            method: 'POST',
            type: 'json',
            url: imgUrl,
            body: JSON.stringify(data)
        });
    }
});

export default wxLogger;

Replace the following placeholders with your values:

Step 3: Report logs

Import the wxLogger instance from any module to report monitoring data:

import wxLogger from '/utils/monitor';

// Report an API call
wxLogger.api('/search.do', true, 233, 'SUCCESS');

For the full list of log reporting methods, see SDK methods.

API reference

import wxLogger from '/utils/monitor';

wxLogger.setPage(nextPage);

import wxLogger from '/utils/monitor';

wxLogger.setConfig(config);

SDK parameters

The following parameters are available in WeexLogger.singleton(props) and wxLogger.setConfig(config).

For the complete parameter reference, see SDK reference.