How to install the ARMS browser monitoring agent for a web application using a CDN - Application Real-Time Monitoring Service

Install the ARMS browser monitoring agent via a Content Delivery Network (CDN) to monitor your web application.

Install the browser monitoring agent

Log on to the ARMS console.
In the left-side navigation pane, choose Browser Monitoring > Browser Monitoring. In the top navigation bar, select a region.
On the Browser Monitoring page, click Create Application Site in the upper-right corner.
In the Integration Center panel, under the Frontend, Mobile, and Client Applications section, click Web & H5.
In the Integrate Web & H5 panel, enter a custom application name in the Create Application section.
In the Integrate Web & H5 panel, select the desired options in the SDK Extension Configuration section to generate the agent code.
- Disable Automatic API Reporting: If you select this option, you must manually call the__bl.api() method to report the API success rate.
- Enable Automatic SPA Resolution: If you select this option, ARMS listens for thehashchange event and automatically reports page views. This is suitable for single-page applications (SPAs).
- Enable FMP Collection: If you select this option, ARMS collects First Meaningful Paint (FMP) data.
- Enable Page Resource Reporting: If you select this option, the agent reports static resources from the page when the onload event is triggered.
- Associate with Application Monitoring: If you select this option, API requests are correlated with back-end Application Monitoring to enable front-to-back tracing.
- Enable User Behavior Backtracking: If you select this option, User Behavior Backtracking is enabled to assist with JavaScript error diagnosis.
- Enable Console Tracking: If you select this option, User Behavior Backtracking traces console content, includingerror,warn,log, andinfo.
  
  Important
  This feature affects the console path.

Choose one of the following methods to install the browser monitoring agent.

Asynchronous loading: Copy the provided code and paste it as the first line inside the <body> element in the page HTML. Then, restart the application. Select the Asynchronous loading tab, copy the provided code, and paste it as the first line of the <body> content in the page HTML.

The following code shows a complete HTML example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>ARMS</title>
  </head>
  <body>
    <script>
      !(function (c, b, d, a) {
        c[a] || (c[a] = {})
        c[a].config = {
          pid: 'xxx',
          appType: 'web',
          imgUrl: 'https://arms-retcode.aliyuncs.com/r.png?',
          sendResource: true,
          enableLinkTrace: true,
          behavior: true,
          useFmp: true,
          enableSPA: true,
        }
        with (b) with (body) with (insertBefore(createElement('script'), firstChild)) setAttribute('crossorigin', '', (src = d))
      })(window, document, 'https://sdk.rum.aliyuncs.com/v1/bl.js', '__bl')
    </script>
    <div id="app"></div>
  </body>
</html>

Synchronous loading: Copy the code and paste it as the first element inside your page's<body> tag. Then, restart your application.

npm package:

Run the following command to install the npm package.
```
npm install alife-logger --save
```

Copy the following initialization command from the console and run it.

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});

Differences between asynchronous and synchronous loading

Asynchronous loading: Also known as non-blocking loading. The browser downloads and executes the agent JavaScript file without blocking page rendering. Recommended when page performance is a top priority.

Important
Due to its asynchronous nature, ARMS cannot capture JavaScript errors or resource loading errors that occur before the monitoring SDK finishes loading and initializing.
Synchronous loading: Also known as blocking loading. The browser pauses page rendering until the agent JavaScript file is fully loaded and executed. Recommended when you need to capture all JavaScript errors and resource loading errors throughout the page lifecycle.

Set a custom UID

The SDK automatically generates a user ID (UID) to count unique visitors (UVs) and other metrics. The auto-generated UID distinguishes users but lacks business context. To use a custom UID, add the following to theconfig object in your code:

uid: "xxx" // This value identifies a user. Set it based on your business logic.

For example:

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxx",appType:undefined,imgUrl:"https://arms-retcode.aliyuncs.com/r.png?", uid: "xxxx"};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://sdk.rum.aliyuncs.com/v1/bl.js","__bl");
</script>

Important

If you change the options in the SDK Extension Configuration section, the code will change. Make sure to copy and paste the new code.

Common SDK parameters

The following table lists common SDK configuration parameters.

Parameter	Type	Description	Required	Default
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 Diagnose API errors with front-to-back tracing.	No	`false`

For the full list of SDK configuration parameters, see SDK reference.