To use the browser monitoring function of Application Real-Time Monitoring Service (ARMS) to monitor Web applications, you must install the ARMS agent through CDN (Content Delivery Network) or npm (Node Package Manager). This topic describes how to install the ARMS browser monitoring agent for Web applications through npm.

Install the npm package

Install the npm package named alife-logger.

npm install alife-logger --save

Use npm to install the agent

Initialize the SDK

Initialize the SDK in the BrowerLogger.singleton mode.

const BrowerLogger = require('alife-logger');
// Use BrowserLogger.singleton(conf) config to load config configurations.
const __bl = BrowerLogger.singleton({
    pid: 'your-project-id',
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // Set the URL to which logs are uploaded. If the application is deployed in Singapore, set it to `https://arms-retcode-sg.aliyuncs.com/r.png?`.
    // The other config configurations.
});

When the ARMS browser monitoring agent is connected through npm, the Web SDK automatically generates a user ID (UID) to collect information such as the number of unique visitors (UVs). The automatically generated UID can be used to identify a user but does not have service attributes. If you want to customize a UID, add the following content to the code:

uid: 'xxx', // The UID used to identify a user, which is set based on businesses.

An example is as follows:

const BrowserLogger = require('alife-logger');
// Use BrowserLogger.singleton(conf) config to load config configurations.
const __bl = BrowserLogger.singleton({
    pid: 'your-project-id',
    uid: 'xxx', // The UID used to identify a user, which is set based on businesses.
    imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', // Set the URL to which logs are uploaded. If the application is deployed in Singapore, set it to `https://arms-retcode-sg.aliyuncs.com/r.png?`.
    // The other config configurations.
});

Method description

@static singleton() for a single-instance object

Note This method applies only to npm.

Call parameter description: BrowerLogger.singleton(config,prePipe)

It is a static method that returns a single-instance object. The loaded config and prePipe parameters take effect only for the first call. Only generated instances are returned for subsequent calls.

Parameter Type Description Required Default value
config Object The site configuration. For other configurations, see configurations of #config. Yes None
prePipe Array The pre-reported content. No None

This method can be used to initialize the SDK at the application entry point and obtain an instance during each call.

Other reporting methods

Use BrowerLogger.singleton to obtain instances.

const __bl = BrowerLogger.singleton();

For the usage of other methods of __bl, see Methods user guide.

Config configurations

Config configurations are the same as the CDN mode. For more information, see Configuration items of the browser monitoring SDK.

Pre-report data

Some data must be reported for part of the logic that is executed before BrowserLogger.singleton() is called.

const BrowerLogger = require('alife-logger');
// Same as the pipe structure of the CDN mode.
const pipe = [
    // Report the HTML content of the current page as an API.
    ['api', '/index.html', true, performance.now, 'SUCCESS'],
    // After SDK initialization is complete, enable automatic single-page application (SPA) resolution.
    ['setConfig', {enableSPA: true}]
];
const __bl = BrowserLogger.singleton({pid:'Unique site ID'},pipe);