Web前端性能监测 - CDN

Web前端性能监控是由阿里云CDN联合应用实时监控服务（ARMS）推出的功能，通过在网页中引入监测代码来实现对Web用户真实访问数据的实时监控。帮助您了解站点性能，例如页面打开速度（测速）、页面稳定性（JS诊断错误）和外部服务调用成功率（API）等。

适用场景

站点访问遇到问题，但不能确认是页面性能问题，还是遇到某种类型的错误，无法定位问题。
站点内有大量的异步数据调用，但站点性能和调用成功率未知，无法有效监控。
每个国家、地区的用户访问存在差异，需要通过监控过滤出访问质量有问题的地区，并进行改进。

前提条件

已开通ARMS，详细操作，请参见开通ARMS。

说明

开通ARMS后会自动开通ARMS前端监控免费试用版，您可以免费试用15天，试用结束后需开通基础版或专家版才能继续使用。

费用说明

Web前端性能监控是由阿里云CDN联合ARMS的能力实现，CDN不单独收取功能费用，ARMS会收取前端监控服务费用。
开通ARMS前端监控免费试用版后，您可以免费试用15天，试用期间，每天的免费额度为20000次数据上报。每天的免费额度使用完毕后，ARMS前端监控服务将自动停止。您可以等待次日免费使用额度恢复后继续免费试用。
试用期到期后如需继续试用，您需要开通ARMS前端监控基础版或专家版。基础版和专家版按量后付费，计费详情，请参见计费概述。

操作步骤

创建Web前端性能监控任务
1. 登录CDN控制台。
2. 在左侧导航栏，单击应用中心。
3. 在应用中心页面，单击Web前端性能模块中去使用。
4. 在Web前端性能页面，单击创建任务，并完成以下配置。
  参数
  说明
  应用类型
  支持前端监控的场景，取值：
  Web & H5
  钉钉小程序
  支付宝小程序
  微信小程序
  加速域名
  需要监控的Web应用加速域名。
5. 任务创建成功后，弹出如下提示框后，单击立即配置，会跳转到ARMS前端监控应用设置页面。
为Web应用安装ARMS前端监控探针
为Web应用安装ARMS前端监控探针的详细操作，请参见安装前端监控探针。
1. 在ARMS设置页面的SDK扩展配置项区域，请根据您的站点情况选择需要开启的选项，便于快捷生成待插入页面的BI探针代码。
2. 在复制/粘贴BI探针区域，选择其中一种方法安装前端监控探针。
  - 异步加载：复制提供的代码并粘贴至页面HTML中 <body>元素内部的第一行，然后重启应用。
  - 同步加载：复制提供的代码并粘贴至页面HTML中 <body>元素内部的第一行，然后重启应用。
  - NPM包：
    1. 执行以下命令以引入npm包。
```
npm install alife-logger --save
```
    2. 从控制台上复制以下初始化命令并执行。
```
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});
```

查看Web性能数据

在CDN控制台的Web前端性能页面，单击查看数据，跳转到ARMS控制台前端监控总览页面。

查看数据

在ARMS控制台前端监控总览页面，您可以了解到监控应用的所有关键实时监控数据。了解更多ARMS报表功能，请参见控制台功能。

监控总览

热门数据字段含义如下：

功能项	字段说明
JS错误率	JS错误率：JavaScript出错的比例。相比昨日均值：与昨日JavaScript平均错误率相比上升或下降的比例。统计图：最近1小时的JavaScript错误率曲线。页面错误率排行：JavaScript错误率排行。
最近24小时告警	告警数量：告警的数量。最近告警信息：最近24小时来自前端监控报警的告警信息。
PV/UV	今日PV：被监控应用的今日PV值。今日UV：被监控应用的今日UV值。同比昨日：与昨日PV/UV相比上升或下降的比例。统计图：最近1小时的PV/UV曲线。统计表：PV/UV排名前5的地域及对应PV/UV值。高访问量Top 5：访问量最多的5个服务。
API请求成功率	API请求成功率：API请求成功的比例。相比昨日均值：与昨日API请求成功率相比上升或下降的比例。统计图：最近1小时的API请求成功率曲线。 API成功率排行：API请求成功率排行。
访问速度	访问速度：首次渲染耗时，单位为毫秒（ms）。相比昨日均值：与昨日访问速度均值相比上升或下降的比例。统计图：最近1小时的访问速度曲线。低访问速度Top 5：访问速度最低的5个服务。

设置前端性能告警

在CDN控制台的Web前端性能页面，单击设置前端性能告警，跳转到ARMS控制台前端监控告警规则页面。

设置前端性能告警

您可以选择多维的告警指标，例如首次渲染时间、首屏时间、页面、地域等设置报警和提醒规则。当规则被触发时，系统会以您指定的通知方式向告警联系人或钉群发送告警信息，以提醒您采取必要的问题解决措施。具体操作，请参见前端监控告警规则（新版）。