Integrate Web & H5 applications - Cloud Monitor - Alibaba Cloud Documentation Center

Cloud Monitor 2.0 monitors browser and H5 pages in mobile applications by collecting performance metrics and tracking issues. To enable monitoring, you can embed a JavaScript (JS) script or use an NPM package. This helps you improve your site's user experience.

Create application

Log on to the Cloud Monitor 2.0 console, and select a workspace. In the left navigation pane, choose Integration Center > Integration Center.
Click the Web & H5 card, select a region, enter an application name and description, and then click Create Application.
Note
The application name must be unique.
After the application is created, an SDK that contains the required pid and endpoint address is automatically generated in the Parameter Configuration section.

In the Parameter Configuration section, select an installation method, application configuration environment, routing mode, and configuration items. Then, install the SDK.

CDN synchronous loading

Copy the following code and paste it immediately after the opening <body> tag of your HTML page.

Note

Replace the pid and endpoint in the following code with your application's pid and endpoint address.

<script>
  window.__rum = {
    pid: 'your app id',
    endpoint: 'your endpoint',
    // Set the environment context. Valid values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
    env: 'prod', 
    // Set the routing mode. Valid values: 'history' | 'hash'
    spaMode: 'history',
    collectors: {
      // Page performance metric listener. Enabled by default.
      perf: false,
      // WebVitals metric listener. Enabled by default.
      webVitals: false,
      // Ajax listener. Enabled by default.
      api: false,
      // Static resource listener. Enabled by default.
      staticResource: false,
      // JS error listener. Enabled by default.
      jsError: false,
      // Console error listener. Enabled by default.
      consoleError: false,
      // User behavior listener. Enabled by default.
      action: false,
    },
    // Tracing Analysis configuration. Disabled by default.
    tracing: false,
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

CDN asynchronous loading

Copy the following code and paste it immediately after the opening <body> tag of your HTML page.

Note

Replace the pid and endpoint in the following code with your application's pid and endpoint address.

<script>
    !(function(c,b,d,a){c[a]||(c[a]={});c[a]=
    {
      pid: 'your app id',
      endpoint: 'your endpoint',
      // Set the environment context. Valid values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
      env: 'prod', 
      // Set the routing mode. Valid values: 'history' | 'hash'
      spaMode: 'history',
      collectors: {
        // Page performance metric listener. Enabled by default.
        perf: false,
        // WebVitals metric listener. Enabled by default.
        webVitals: false,
        // Ajax listener. Enabled by default.
        api: false,
        // Static resource listener. Enabled by default.
        staticResource: false,
        // JS error listener. Enabled by default.
        jsError: false,
        // Console error listener. Enabled by default.
        consoleError: false,
        // User behavior listener. Enabled by default.
        action: false,
      },
      // Tracing Analysis configuration. Disabled by default.
      tracing: false,
    }
    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

Import the NPM package.
```
npm install @arms/rum-browser --save
```

Initialize the application.

Note

Replace the pid and endpoint in the following code with your application's pid and endpoint address.

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

ArmsRum.init({
  pid: 'your app id',
  endpoint: 'your endpoint',
  // Set the environment context. Valid values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
  env: 'prod', 
  // Set the routing mode. Valid values: 'history' | 'hash'
  spaMode: 'history',
  collectors: {
    // Page performance metric listener. Enabled by default.
    perf: false,
    // WebVitals metric listener. Enabled by default.
    webVitals: false,
    // Ajax listener. Enabled by default.
    api: false,
    // Static resource listener. Enabled by default.
    staticResource: false,
    // JS error listener. Enabled by default.
    jsError: false,
    // Console error listener. Enabled by default.
    consoleError: false,
    // User behavior listener. Enabled by default.
    action: false,
  },
  // Tracing Analysis configuration. Disabled by default.
  tracing: false,
});

export default ArmsRum;

The installation methods are described as follows:

Asynchronous loading: Also known as non-blocking loading. With this method, the browser continues to process the page after it downloads and runs the JS script. This method is recommended for pages that require high performance.
Important
Because this is an asynchronous load, ARMS cannot capture JS errors or resource loading errors that occur before the monitoring SDK is loaded and initialized.
Synchronous loading: Also known as blocking loading. With this method, the browser waits for the JS script to finish loading before it processes the rest of the page. Use this method to capture all JS errors and resource loading errors from the moment the page opens until it closes.
NPM package: Using an NPM package reduces the number of script loads on a page. This method lets you control the CDN service for the page script and handle Real User Monitoring as a separate module.

When loading with a CDN, you can use the global namespace RumSDK.default to access the SDK monitoring instance.

const ArmsRum = window.RumSDK.default;
// To access RumSDK, make sure the SDK has finished loading.
// If the __rum configuration is not defined before the SDK loads, you can initialize it here.
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// The following usage is the same for both NPM and CDN.
ArmsRum.setConfig('env', 'pre');

(Optional) Request confirmation before verification.
After you install the SDK, verify that data is being reported correctly. Follow the prompts on the panel, select the verification items, and click Start Data Integration Verification.

References

ARMS Real User Monitoring provides various SDK configuration items that you can use to set parameters for specific requirements. For more information, see SDK configuration reference.