All Products
Search
Document Center

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

Last Updated:Oct 16, 2024

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

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()

Note

This method applies only to the implementation of browser monitoring by using npm.

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.

Parameter

Type

Description

Required

Default value

config

Object

The site configurations. For more information about other parameters you can configure in config, see SDK reference.

Yes

None

prePipe

Array

The content that must be reported in advance.

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

You can use BrowerLogger.singleton to obtain instances.

const __bl = BrowserLogger.singleton();

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

Other reporting methods

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.

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.

No

Automatically generated by the SDK

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

behavior

Boolean

Specifies whether to record the user behavior that reports errors for easy troubleshooting.

No

true

enableSPA

Boolean

Listen to hashchange events on the page and report the PV again. This is applicable to single-page application scenarios.

No

false

enableLinkTrace

Boolean

For more information about back-to-back Tracing Analysis, see Use the front-to-back tracing feature to diagnose API errors.

No

false

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