Connect web applications to ARMS Real User Monitoring - Application Real-Time Monitoring Service

When your web or HTML5 application has performance issues or JavaScript errors in production, diagnosing the root cause requires visibility into real user sessions. Real User Monitoring (RUM), a feature of Application Real-Time Monitoring Service (ARMS), collects performance metrics and tracks exceptions by using JavaScript or npm packages. After integration, you can trace performance bottlenecks and exceptions across your user base.

Important

RUM has been available for commercial use since 00:00:00 (UTC +8) on June 24, 2024. For more information, see Billing. To get technical support, join the DingTalk group chat (ID: 67370002064).

Quick start

Install the SDK with npm, initialize it in your application entry file, and start collecting data immediately.

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: "<your-app-id>",        // Application ID from the ARMS console
  endpoint: "<your-endpoint>", // Endpoint URL from the ARMS console
});

Replace <your-app-id> and <your-endpoint> with the values generated after you create an application in the ARMS console. See Step 1: Create the application for details.

For the full list of SDK parameters, see SDK configuration reference for web and HTML5 applications.

Integration workflow

The integration has three steps:

Create an application in the ARMS console to get your pid and endpoint.
Install the SDK by using one of three methods: CDN async, CDN sync, or npm.
Verify that monitoring data appears in the console.

Step 1: Create the application

Log on to the ARMS console.
In the left-side navigation pane, choose Real User Monitoring > Application List. In the top navigation bar, select a region.
On the Applications page, click Add Application.
In the Create Application panel, click Web & H5.
In the Web & H5 panel, enter an application name and description, and then click Create.
Note
The application name must be unique.
After the application is created, an endpoint (the address to which monitoring data is reported) and a pid (your application ID) are automatically generated in the STEP2 section.
In the STEP2 section, select an installation method and install the OpenRUM SDK.

Step 2: Install the OpenRUM SDK

Choose one of the following installation methods.

Method	Best for	Trade-off
CDN async (recommended)	Applications with strict page load performance targets	Cannot capture errors that occur before the SDK finishes loading
CDN sync	Applications that need complete error coverage from page load	Blocks page rendering until the SDK loads
npm	Modern build-tooling setups that require reducing page scripts and controlling traffic flow	Requires a build step

CDN async loading

Async (non-blocking) loading downloads the SDK without blocking page rendering. Use this method when page load speed is your top priority.

Important

Async loading cannot capture JavaScript errors or resource loading errors that occur before the OpenRUM SDK is initialized.

Copy the following snippet and paste it as the first element inside the <body> tag of your HTML page. Replace <your-app-id> and <your-endpoint> with the values from STEP2 in the console.

<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "<your-app-id>",        // Application ID from the ARMS console
    endpoint: "<your-endpoint>"  // Endpoint URL from the ARMS console
  };
  with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
  })(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js", "__rum");
</script>

CDN sync loading

Sync (blocking) loading ensures the SDK is fully loaded before any other scripts run. Use this method when you need to capture all JavaScript errors and resource loading errors from the moment the page starts loading.

Copy the following snippet and paste it as the first element inside the <body> tag of your HTML page. Replace <your-app-id> and <your-endpoint> with the values from STEP2 in the console.

<script>
  window.__rum = {
    pid: "<your-app-id>",        // Application ID from the ARMS console
    endpoint: "<your-endpoint>"  // Endpoint URL from the ARMS console
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

npm package

The npm package can be used to reduce the number of scripts loaded on a page, control the traffic flow, and select RUM as a separate module for subsequent processing.

Install the package:
```
   npm install @arms/rum-browser --save
```

Initialize the SDK in your application entry file. Replace <your-app-id> and <your-endpoint> with the values from STEP2 in the console.

   import ArmsRum from '@arms/rum-browser';

   ArmsRum.init({
     pid: "<your-app-id>",        // Application ID from the ARMS console
     endpoint: "<your-endpoint>", // Endpoint URL from the ARMS console
   });

Access the SDK API after CDN loading

When you use CDN loading (async or sync), access the SDK instance through the RumSDK.default global namespace. The API is identical to the npm method after initialization.

const ArmsRum = window.RumSDK.default;

// If __rum was not configured before SDK loading, initialize manually:
ArmsRum.init({
  pid: "<your-app-id>",
  endpoint: "<your-endpoint>",
});

// Set additional configuration. This API is the same for CDN and npm.
ArmsRum.setConfig('env', 'pre');

Step 3: Verify the integration

After you install the SDK:

Open your application in a browser and interact with the page to generate monitoring events.
Log on to the ARMS console.
In the left-side navigation pane, choose Real User Monitoring > Application List.
Confirm that your application appears in the list and that monitoring data is being reported.

Next steps

Configure advanced SDK options to meet your business requirements. For the full list of parameters, see SDK configuration reference for web and HTML5 applications.