Quick Start for Web Applications - Cloud Monitor - Alibaba Cloud Documentation Center

To monitor data such as user session counts, page views (PV), unique visitors (UV), and page load times for your browser and mobile H5 pages, integrate the Web & H5 software development kit (SDK) for Cloud Monitor 2.0 Real User Monitoring (RUM) into your web application. This integration also helps you quickly locate issues by user ID and improve your website's user experience.

Workflow

Create a RUM application: Create a RUM application for monitoring the web or HTML5 application. Then, copy and save the JavaScript code that introduces the SDK through Alibaba Cloud Content Delivery Network (CDN).
Introduce the SDK: For a single HTML file, insert the JavaScript code into the <body>. For multiple HTML files, introduce the JavaScript code through a layout file, which is then referenced in all pages.
View monitoring data: The SDK automatically reports data. View the user data of the website on the application details page.
Configure alerting: Configure alert rules and notification policies, and view the alert history.

Preparations

This topic takes a simple website program as an example and uses an Elastic Compute Service (ECS) instance bound with a public IP address as the website server. For information about how to log on to an ECS instance, see Use Workbench to log on to a Linux instance.

RUM charges fees based on the number of sessions and custom report submissions, with one observability capacity unit (OCU) corresponding to a certain number of sessions and custom report submissions. Each Alibaba Cloud account has a free quota of 100 OCUs per month. For more information, see Billing overview.

Prerequisites

Ensure that you have activated the Alibaba Cloud Monitor 2.0 service.
You have activated Alibaba Cloud Simple Log Service.

1. Create an application

Log on to the Cloud Monitor 2.0 console, and select a workspace. In the left navigation pane, click Integration Center.
Choose RUM > Web & H5.

In the panel that appears on the right, configure the application settings.

Create Application:
- Select Region: Select the region where you want to integrate the application.
- Application Name: Enter a custom name for the application.
- Application Description: Enter a custom description for the application.
- Region Language: This setting lets you switch the display language for regions and carriers to suit the preferences of users in different regions.

Parameter Configurations:

(1) Configure the following parameters based on your business requirements. The sample code in the subsequent steps will automatically reference the parameters configured in this step.
- Installation Method: Select an installation method, such as Asynchronous load, Synchronous load, or NPM package.
- App Environment: Set the environment context, such as prod, gray, pre, daily, or local.
- Routing Mode: Select the required routing mode, such as history or hash.
- Configuration Items: Select the required configuration items. You can select multiple items.
Note
The parameters that you configure are automatically added to the integration code.

(2) Import the SDK.

Asynchronous load

<script>
    !(function(c,b,d,a){c[a]||(c[a]={});c[a]=
    {
        pid: 'cp*****8lc@b755******f7ed9***e63',
        endpoint: 'https://proj-xtrace-******-ap-southeast-1.ap-southeast-1.log.aliyuncs.com/rum/web/v2',
        // Set environment information, reference values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
        env: 'prod', 
        // Set spa mode, reference values: 'history' | 'hash'
        spaMode: 'history',
        collectors: {
        // Page performance metrics monitoring switch - Default enabled
        perf: true,
        // webVitals metrics monitoring switch - Default enabled
        webVitals: true,
        // AJAX monitoring switch - Default enabled
        api: true,
        // Static resource switch - Default enabled
        staticResource: true,
        // JavaScript error monitoring switch - Default enabled
        jsError: true,
        // Console error monitoring switch - Default enabled
        consoleError: true,
        // User behavior monitoring switch - Default enabled
        action: true,
        },
        // Link tracing configuration switch - Default disabled
        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>

Synchronous load

<script>
  window.__rum = {
    pid: 'cp*****8lc@b755******f7ed9***e63',
    endpoint: 'https://proj-xtrace-*************-ap-southeast-1.ap-southeast-1.log.aliyuncs.com/rum/web/v2',
    // Set environment information, reference values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
    env: 'prod', 
    // Set spa mode, reference values: 'history' | 'hash'
    spaMode: 'history',
    collectors: {
      // Page performance metrics monitoring switch - Default enabled
      perf: true,
      // webVitals metrics monitoring switch - Default enabled
      webVitals: true,
      // AJAX monitoring switch - Default enabled
      api: true,
      // Static resource switch - Default enabled
      staticResource: true,
      // JavaScript error monitoring switch - Default enabled
      jsError: true,
      // Console error monitoring switch - Default enabled
      consoleError: true,
      // User behavior monitoring switch - Default enabled
      action: true,
    },
    // Link tracing configuration switch - Default disabled
    tracing: false,
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

NPM package

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

Initialize.

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

ArmsRum.init({
    pid: 'cp*****8lc@b755******f7ed9***e63',
    endpoint: 'https://proj-xtrace-**********-ap-southeast-1.ap-southeast-1.log.aliyuncs.com/rum/web/v2',
    // Set environment information, reference values: 'prod' | 'gray' | 'pre' | 'daily' | 'local'
    env: 'prod', 
    // Set spa mode, reference values: 'history' | 'hash'
    spaMode: 'history',
    collectors: {
        // Page performance metrics monitoring switch - Default enabled
        perf: true,
        // webVitals metrics monitoring switch - Default enabled
        webVitals: true,
        // AJAX monitoring switch - Default enabled
        api: true,
        // Static resource switch - Default enabled
        staticResource: true,
        // JavaScript error monitoring switch - Default enabled
        jsError: true,
        // Console error monitoring switch - Default enabled
        consoleError: true,
        // User behavior monitoring switch - Default enabled
        action: true,
    },
    // Link tracing configuration switch - Default disabled
    tracing: false,
});

export default ArmsRum;

Parameter	Description
`pid`	The ID of the Web & H5 application.
`endpoint`	The endpoint for reporting data from the Web & H5 application.
`<script type="text/javascript" src="……">`	Loads the Web & H5 SDK through a CDN.

(3) Pre-validation check. After you add the frontend integration code, select the confirmation checkbox and click Start Data Integration Check.

2. Introduce the SDK

For a single HTML file, you can insert JavaScript code in the <body>. For multiple HTML files, you can use a layout file to introduce JavaScript code, which is then referenced in all pages. In this section, the sample website program shopping.zip is introduced through a layout file. In the layout.html file, replace the content in the section marked with the <script> tag with the JavaScript code saved in the previous step.

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Site</title>
    <script>
        window.__rum = {
            "pid": "jj*****",  // Specify the PID.
            "endpoint": "https://jj****-default-cn.rum.aliyuncs.com"
        };
    </script>
    <script type="text/javascript" src="https://jj******-sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

After the SDK is introduced, enter python app.py in the terminal of the server to run the website program.

3. View monitoring details

Enter ${Public IP address of ECS instance:5000} in the address bar of a browser to access the website.
In the Application List, click the name of the target application to view pages such as Instance Overview, Session Tracing, Page Access, and Resource Loading. For more information about the monitoring pages, see Web & H5 Monitoring Details.

4. Create an alert

To create an alert rule, in the RUM navigation bar, choose Alert Rules. click Create an alert rule. For more information about parameter settings, see Alert Rules.

What to do next

In this topic, the SDK is synchronously loaded through CDN. CDN-based asynchronous loading and npm packages are also supported. For information about the procedure and scenarios of these methods, see Integrate a web application or an HTML5 application.
RUM SDK for web & HTML5 supports configuration items such as the application ID, address for data reporting, and application environment. For more information, see Sample configurations of the RUM SDK for web and HTML5 applications.