Web Frontend Performance - CDN - Alibaba Cloud Documentation Center

Web Frontend Performance is launched by Alibaba Cloud CDN with Application Real-time Monitoring Service (ARMS). This feature monitors web access data in real time by adding code to web pages. You can view the website performance, such as page loading, page stability (JS errors), and success rate of calls to external services.

Scenarios

You want to confirm whether website access issues are due to performance or other reasons.
There are a large number of asynchronous data calls within the website, but the performance and success rate of calls are unknown.
You want to filter access statistics by country or region to locate and solve access quality issues.

Prerequisites

ARMS is activated. For more information, see Activate ARMS.

Note

You have a free 15-day trial of Web Frontend Performance after you activate ARMS. After the free trial expires, you must activate the Basic Edition or Pro Edition of Web Frontend Performance to continue using the feature.

Billing

Web Frontend Performance is implemented by Alibaba Cloud CDN and ARMS, and is charged by ARMS.
You have a free 15-day trial of Web Frontend Performance after you activate ARMS. During the free trial, the free quota is 20,000 times of data reporting per day. After the free quota is used up, Web Frontend Performance is automatically disabled. You can continue to use the feature when the free quota is replenished the next day.
After the free trial expires, you must activate the Basic Edition or Pro Edition of Web Frontend Performance to continue using the feature. The Basic Edition and the Pro Edition support only the pay-as-you-go billing method. For more information, see Billing overview.

Procedure

Create a monitoring task in Web Frontend Performance

Log on to the Alibaba Cloud CDN console.
In the left-side navigation pane, click Application Center.
On the Application Center page, click Try Now in the Web Frontend Performance section.

On the Web Frontend Performance page, click Create Task and set the following parameters.

Parameter

Description

Application Type

The application that supports frontend monitoring. Valid values:

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

Accelerated Domain Name

The accelerated domain name of the web application to be monitored.

Click Configure Now in the following dialog box that appears.

Install the ARMS browser monitoring agent for a web application
For more information, see Install the browser monitoring agent.
1. In the SDK Extension Configuration section of the ARMS configuration page, select the required options. The code of the BI probe to be pasted into the page is then generated based on the selected options.
2. In the Copy / Paste BI Probe section, select a method to install the browser monitoring agent.
  - Asynchronous Loading: Copy the provided code, paste it to the first line of the <body> element of the HTML page, and then restart the application.
  - Synchronous Loading: Copy the provided code, paste it to the first line of the <body> element of the HTML page, and then restart the application.
  - NPM package:
    1. Run the following command to install the npm package:
```
npm install alife-logger --save
```
    2. Copy and run the following command from the console to initialize the npm package:
```
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.

On the Overview page of Web Frontend Performance, you can view all the critical monitoring data of the monitored application in real time. For more information about the report feature of ARMS, see Console functions.

The following table describes the metrics.

Metric	Description
JS Errors	JS Error Rate: the JS error rate. Compared with Yesterday's Average: the increase or decrease ratio of the average JS error rate compared with the average JS error rate in the previous day. Statistical Chart: the curve of the JS error rate in the last hour. Page Ranked by Error Rate: the JS error rate ranking.
Alerts in the last 24 hours	Alarms: the number of alerts. Recent 3 Alarms: the alerts from browser monitoring in the last 24 hours.
PV/UV	Today's PV: the number of page views (PVs) of the monitored application on the current day. Today's UV: the number of unique visitors (UVs) of the monitored application on the current day. Compared with Yesterday: the increase or decrease ratio of PVs and UVs compared with the PVs and UVs in the previous day. Statistical Chart: the curve of PVs or UVs in the last hour. Statistical Table: the top five regions with the most PVs and UVs and their corresponding PVs and UVs. High Page View TOP5: the top five services with the most PVs.
API request success rate	API Request Success Rate: the success rate of API requests. Compared with Yesterday's Average: the increase or decrease ratio of the API request success rate compared with the API request success rate in the previous day. Statistical Chart: the curve of the API request success rate in the last hour. Service Ranked by API Success Rate: the API request success rate ranking.
Access speed	Page Speed: the First Paint Time (FPT). Unit: milliseconds. Compared with Yesterday's Average: the increase or decrease ratio of the page speed compared with the average page speed in the previous day. Statistical Chart: the curve of the page speed in the last hour. Low Page Speed Top 5: the top five services with the lowest page speeds.

Set frontend performance alerts

On the Web Frontend Performance page in the Alibaba Cloud CDN console, click Set Frontend Performance Alerts.

You can select multiple alert metrics, such as the first paint time (FPT), first meaningful paint (FMP), page, and region, to set alerts and alert rules. If the alert rule is triggered, ARMS sends alert notifications to the specified alert contacts or DingTalk groups by using the specified notification methods. Then, you can take necessary measures at the earliest opportunity. For more information, see Create and manage a Browser Monitoring alert rule.