Integrate web applications into RUM - Application Real-Time Monitoring Service

The Real User Monitoring (RUM) sub-service of Application Real-Time Monitoring Service (ARMS) monitors web and HTML5 applications by using JavaScript or npm packages to collect performance metrics and track exceptions. This helps you improve the user experience of your applications.

Important

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

Add the app

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 name must be unique.
Then, an address to which monitoring data is reported (endpoint) and an application ID (pid) are automatically generated in the STEP2 section.
In the STEP2 section, select a method and install the OpenRUM SDK.
Synchronous loading through CDN
Copy the following code and paste it to the first line in the <body> of the HTML page.
Note
Replace the pid and endpoint parameters in the following code with the address and application ID.
```
<script>
  window.__rum = {
    pid: "your app id",
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
```
Asynchronous loading through CDN
Copy the following code and paste it to the first line in the <body> of the HTML page.
Note
Replace the pid and endpoint parameters in the following code with the address and application ID.
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    pid: "your app id",
    endpoint: "your endpoint"
  };
  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>
```
npm package
1. Introduce the npm package.
```
npm install @arms/rum-browser --save
```
2. Initialize the application.
  Note
  Replace the pid and endpoint parameters in the following code with the address and application ID.
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```
Usage notes:
- Asynchronous loading: It is also known as non-blocking loading. The browser continues to process subsequent pages regardless of whether JavaScript loading is completed. We recommend that you use this method if you require high page performance.
  Important
  When you use asynchronous loading, ARMS cannot capture JavaScript errors or resource loading errors before the OpenRUM SDK is initialized.
- Synchronous loading: It is also known as blocking loading. The browser does not continue to process subsequent pages until the JavaScript loading is completed. We recommend that you use synchronous loading if you need to continuously capture JavaScript errors and resource loading errors.
- npm package: npm packages 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.
When CDN is used for the loading, use the global namespace RumSDK.default to access the SDK monitoring instance.
```
const ArmsRum = window.RumSDK.default;
// Before accessing the RUM SDK, ensure that the SDK has been loaded.
// If the __Rum setting is not specified before SDK loading, perform initialization.
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// The following setting is the same for the CDN and npm methods.
ArmsRum.setConfig('env', 'pre');
```

References

The RUM SDK for ARMS provides a wide variety of custom configurations to meet your business requirements.

Add the app

Synchronous loading through CDN

Asynchronous loading through CDN

npm package

References