Connect a web app to ARMS Real User Monitoring - Application Real-Time Monitoring Service

ARMS Real User Monitoring for Web & H5 monitors browser pages and H5 pages in mobile apps. Install a lightweight agent through a JavaScript (JS) script or an npm package to collect performance metrics and track errors, helping you improve your site's user experience.

Important

RUM has been available for commercial use since 00:00:00 (UTC+8), June 24, 2024. For pricing details, see Billing. For technical support, join the DingTalk group (ID: 67370002064).

Create an app

Log on to the ARMS console.
In the left-side navigation pane, choose Real User Monitoring > > Application List, and in the top menu bar, select the target region.
On the Application List page, click Add Application.
In the Create Application panel, click Web & H5.
In the Add Web & H5 Application panel, enter an app name and description, and then click Create .

Note
The app name must be unique.

After the app is created, an endpoint address appears in the STEP 2 section.
In the STEP 2 section, select an installation method and install the agent SDK.
CDN asynchronous loading

Copy the following code and paste it as the first line inside the <body> tag of your HTML page.

Note
Replace your endpoint in the following code with the endpoint address generated for your app.
```
<script>
  !(function(c,b,d,a){c[a]||(c[a]={});c[a]={
    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>
```
CDN synchronous loading

Copy the following code and paste it as the first line inside the <body> tag of your HTML page.

Note
Replace your endpoint in the following code with the endpoint address generated for your app.
```
<script>
  window.__rum = {
    endpoint: "your endpoint"
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js " crossorigin></script>
```
npm package
1. Install the npm package.
```
npm install @arms/rum-browser --save
```
2. Initialize the app.
  
  Note
  Replace your endpoint in the following code with the endpoint address generated for your app.
```
import armsRum from '@arms/rum-browser';
armsRum.init({
  endpoint: "your endpoint"
});
```
Important
Starting with SDK version 0.1.x, you no longer need to pass a PID because the endpoint contains the required parameters. Ensure you are using the latest SDK and endpoint.
The following describes each installation method:
- Asynchronous loading: Also known as non-blocking loading. The browser continues processing the page while downloading the JS script. Recommended when page performance is a high priority.
  
  Important
  With asynchronous loading, ARMS cannot capture JS errors or resource loading errors that occur before the agent SDK is loaded and initialized.
- Synchronous loading: Also known as blocking loading. The browser waits for the JS script to load before processing the rest of the page. Recommended when you need to capture all JS errors and resource loading errors from the moment the page opens.
- npm package: Reduces external script loads on your page and lets you manage CDN delivery and handle Real User Monitoring as a separate module.
When loading the SDK from a CDN, use the global namespace RumSDK.default to access the SDK monitoring instance.
```
const armsRum = window.RumSDK.default;
// Make sure the SDK is loaded before you access RumSDK.
// If the __rum configuration is not defined before the SDK loads, you can initialize it here.
armsRum.init({
  endpoint: "your endpoint",
});
// The following usage is the same for both npm and CDN installations.
armsRum.setConfig('env', 'pre');
```

Application Real-Time Monitoring Service:Connect a web and H5 app

Create an app

CDN asynchronous loading

CDN synchronous loading

npm package

Related documents