Application Real-Time Monitoring Service:Implement browser monitoring by using npm

Install the npm package

Install the npm package named alife-logger.

npm install alife-logger --save

Initialize the SDK

Use BrowserLogger.singleton to initialize the SDK.

const BrowserLogger = require('alife-logger');
                // Use BrowserLogger.singleton(conf) config to load the configurations specified by config.
                const __bl = BrowserLogger.singleton({
                pid: 'your-project-id',
                // Specify the path to which the logs are uploaded.
                // If you want to deploy the SDK in the Singapore region, set the path to https://arms-retcode-sg.aliyuncs.com/r.png?.
                // If you want to deploy the SDK in the US (Silicon Valley) region, set the path to https://retcode-us-west-1.arms.aliyuncs.com/r.png?.
                imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                // Set other configurations specified by config.
                });

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

uid: 'xxx', // The UID is used to identify a user. Set its value based on your businesses.

Example:

const BrowserLogger = require('alife-logger');
                // Use BrowserLogger.singleton(conf) config to load the configurations specified by config.
                const __bl = BrowserLogger.singleton({
                    pid: 'your-project-id',
                        // Specify the path to which the logs are uploaded.
                        // If you want to deploy the SDK in the Singapore region, set the path to https://arms-retcode-sg.aliyuncs.com/r.png?.
                        // If you want to deploy the SDK in the US (Silicon Valley) region, set the path to https://retcode-us-west-1.arms.aliyuncs.com/r.png?.
                     uid: 'xxx', // The UID is used to identify a user. Set its value based on your businesses.
                        imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?', 
                    // Set other configurations specified by config.
                });

API operation

Method used to return a single instance: @static singleton()

The following table describes the parameters you can configure for BrowserLogger.singleton(config,prePipe).

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

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

Other reporting methods

You can use BrowerLogger.singleton to obtain instances.

const __bl = BrowserLogger.singleton();

For more information about how to use other methods of __bl, see API reference.

Config configurations

The configurations of config is the same as those when you use CDN to install the ARMS browser monitoring agent. For more information, see SDK reference.

Data pre-report

If some data must be reported based on the logic of the code executed before BrowserLogger.singleton() is called, you must pre-report the data. For more information, see Pre-report data.

const BrowserLogger = require('alife-logger');
                // The structure of pipe is the same as the that when you use CDN to install the ARMS browser monitoring agent.
                const pipe = [
                // Report the current HTML page as an API request.
                ['api', '/index.html', true, performance.now, 'SUCCESS'], // This is equivalent to __bl.api(api, success, time, code, msg).
                // After the SDK is initialized, enable automatic Single Page Application (SPA) resolution.
                ['setConfig', {enableSPA: true}]
                ];
                const __bl = BrowserLogger.singleton({pid:'Unique site ID'},pipe);

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.

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