Web frontend performance monitoring - CDN - Alibaba Cloud Documentation Center

Use cases

Identify the root cause of access issues, whether they stem from performance problems or other errors.
Gain visibility into the performance and success rates of your website's asynchronous data calls.
Monitor user access across different regions to identify and improve performance in areas with a poor user experience.

Prerequisites

Application Real-Time Monitoring Service (ARMS) must be activated. For more information, see Activate ARMS.

Note

After you activate ARMS, a 15-day free trial of browser monitoring is automatically enabled. After the trial period ends, you must subscribe to the Basic Edition or Pro Edition to continue using the service.

Billing

Web Frontend Performance is a feature provided by Alibaba Cloud CDN in collaboration with ARMS. Alibaba Cloud CDN does not charge for this feature, but ARMS charges for the browser monitoring service.
The free trial for ARMS browser monitoring lasts 15 days and includes a daily quota of 20,000 data reporting events. If you exceed the daily quota, the service stops and resumes the next day.
After the trial period ends, you can subscribe to the Basic Edition or Pro Edition of ARMS browser monitoring, which are billed on a pay-as-you-go basis. For more information, see Billing overview.

Procedure

Create a Web Frontend Performance monitoring task

Log on to the Alibaba Cloud CDN console.
In the left-side navigation pane, click application center.
On the application center page, find the Web Frontend Performance module and click Get started.

On the Web Frontend Performance page, click Create Task and complete the following configuration.

Parameter

Description

Application type

The type of application to monitor. Valid values:

Web & H5
DingTalk Mini Program
Alipay Mini Program
WeChat Mini Program

Accelerated domain name

The accelerated domain name of the web application that you want to monitor.

After the task is created, a dialog box appears. Click Configure Now to go to the ARMS browser monitoring settings page. After the application is created in ARMS, click Configure Now in the pop-up dialog box to perform the initial configuration.

Install the ARMS browser monitoring agent for your web application

For detailed instructions on how to install the ARMS browser monitoring agent, see Install the browser monitoring agent.
1. On the ARMS settings page, in the SDK Extension Configuration area, select the options that you want to enable based on your website requirements. This generates the BI Probe code to insert into your page.
2. In the Copy/Paste BI Probe area, use one of the following methods to install the browser monitoring agent.
  - asynchronous loading or synchronous loading: Copy the provided code, paste it as the first line inside the <body> element of your page's HTML, and then restart your application.
  - npm package:
    1. Run the following command to install the npm package.
```
npm install alife-logger --save
```
    2. Copy and run the following initialization command from the console.
```
const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"b590lhguqs@8cc3f63543d****",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,behavior:true,enableLinkTrace:true,enableConsole:true});
```

View web performance data

On the Web Frontend Performance page in the Alibaba Cloud CDN console, click View Data to go to the browser monitoring overview page in the ARMS console.

On the browser monitoring overview page in the ARMS console, you can view key real-time monitoring data. To learn more, see Console features.

The following table describes the key metrics.

Metric	Description
JS error rate	JS error rate: The percentage of JavaScript errors that occurred on a page. Change from yesterday's average: The percentage change from the previous day's average. Chart: A line chart showing the JS error rate over the last hour. Page error rate ranking: A ranking of pages by their JS error rate.
Alerts in the last 24 hours	Alert count: The total number of alerts triggered in the last 24 hours. Recent alerts: The alerts triggered by browser monitoring in the last 24 hours.
PV/UV	Today's PV: Total page views for the application today. Today's UV: Total unique visitors for the application today. Change from yesterday: The percentage change in PV/UV compared to the previous day. Chart: A line chart showing the PV/UV trend over the last hour. Table: A table ranking the top five regions by PV/UV and their corresponding values. Top 5 services by traffic: A ranking of the top five services by traffic volume.
API request success rate	API request success rate: The percentage of successful API requests. Change from yesterday's average: The percentage change from the previous day's average. Chart: A line chart showing the API request success rate trend over the last hour. API success rate ranking: A ranking of API endpoints by their success rate.
Page loading speed	Page loading speed: The First Paint Time (FPT), measured in milliseconds (ms). Change from yesterday's average: The percentage change from the previous day's average. Chart: A line chart showing the page loading speed trend over the last hour. Top 5 slowest-loading services: A ranking of the five services with the longest page load times.

Set frontend performance alerts

On the Web Frontend Performance page in the Alibaba Cloud CDN console, click Set frontend performance alerts to go to the alert rules page for browser monitoring in the ARMS console.

You can set alert rules based on various metrics, such as First Paint Time (FPT), first meaningful paint (FMP), page, and region. When a rule is triggered, the system sends an alert to the specified contacts or DingTalk group, allowing you to take immediate action. For more information, see Browser monitoring alert rules (new).