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()
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 |
|
environment | String | The environment field. Valid values: prod, gray, pre, daily, and local.
| No |
|
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 | No |
|
behavior | Boolean | Specifies whether to record the user behavior that reports errors for easy troubleshooting. | No |
|
enableSPA | Boolean | Listen to hashchange events on the page and report the PV again. This is applicable to single-page application scenarios. | No |
|
enableLinkTrace | Boolean | For more information about back-to-back Tracing Analysis, see Use the front-to-back tracing feature to diagnose API errors. | No |
|
For more information about the SDK parameters that you can configure, see SDK reference.