前端站点
查看前端站点
- 登录管理控制台。
- 单击左侧
，选择“管理与监管> 应用性能管理 APM”，进入APM服务页面。 - 在左侧导航栏选择“前端监控 > 前端站点”，展示所有已经接入前端站点的列表。
图1 查看前端站点
表1 前端站点参数说明 参数名称
说明
前端站点
前端站点名称。
所属应用
前端站点所属应用。
用户数量
访问站点用户的数量。
浏览量
页面访问量或点击量。
平均加载时间
页面加载的平均时间。
仅Web/H5支持展示“平均加载时间”值。其他小程序不支持，“平均加载时间”的值统一展示为“0”。
JS错误率
JS错误率=运行JavaScript触发的错误总数/运行JavaScript的总数。
API成功率
API成功率=API成功数量/API总数量。
采集状态
前端站点的采集状态，包括：“运行中”以及“被停止”。
操作
前端站点更多操作。具体操作参见表12。
- 在前端站点页面的右上角，单击时间维度选择按钮，默认“近20分钟”。
当前支持“近20分钟”、“近1小时”、“近3小时”、“近6小时”、“近1天”、“今天”、“昨天”、“近7天”、“近30天”以及自定义。图2 选择时间维度
查看用量统计
为了方便用户查看前端监控上报数量，APM支持查看“用量统计”功能。
- 在左侧导航栏选择“前端监控 > 前端站点”，单击“设置 >用量统计”，查看某站点的用量相关信息。
图3 查看用量统计
默认展示全部站点的上报总数量、PV上报数量、API上报数量、自定义日志上报数量的趋势图，以及各站点的用量总览。
图4 用量统计各指标趋势图
图5 用量统计-各站点用量总览
表2 用量统计参数列表 参数名称
说明
上报总数量（总计）
上报总数量= PV上报数量+ API上报数量/10 + 自定义日志上报数量
PV上报数量（PV）
PV上报的数量。
API上报数量（API）
API上报的数量。
自定义日志上报数量（自定义）
自定义日志上报的数量。
- 在用量统计页面的右上角，单击时间维度选择按钮，默认“今天”。当前支持“今天”、“昨天”以及自定义。
- 单击“PV”、“API”、“自定义”以及“总计”右侧的
，支持按照用量的大小排序。
- 单击“站点”下拉菜单，选择站点名称，展示某个站点的用量统计信息。
接入前端站点
- 在左侧导航栏选择“前端监控 > 前端站点”，单击“接入前端站点”，填写相关信息。
- “创建前端站点”成功后，appId会自动生成。
- SDK拓展配置项参数说明如下：
API自动上报：apiRepo，查看API调用详情和统计成功率。
第三方API上报：thirdApi，上报CrossOrigin第三方接口信息。
hashMode自动解析：hashMode，URL中#内容，在开启时做URL一部分处理，不开启时被当作锚点处理。
JS错误追踪：smartJsErr，监听和上报所有JS错误。注意：这个功能会改变业务在浏览器上显示的路径。
JS错误智能消减：JsErrClean，短时间内大批量JS错误智能消减，在一次访问中超过100条的相同JS错误就不进行上报。
页面资源上报：webResource（仅支持Web&H5），在页面加载时会上报静态资源。
链路追踪：traceType，开启后可与可观测链路 OpenTelemetry 版产品做前后端链路追踪，默认与应用监控APM调用链做前后端链路追踪。
- 前端站点创建成功前，SDK拓展配置项中的参数默认全部勾选。
- 前端站点创建成功后，在“前端监控 > 前端站点”操作列单击
，可以查看SDK拓展配置项参数对应的参数。 - 前端监控数据通过自动生成的appId上报，没有经过有效鉴权，可能产生脏数据。
- 小程序SDK接入相关操作，参见SDK参考。
- Web&H5
图6 接入Web&H5
表3 接入Web&H5 参数名称
说明
创建前端站点
- 所属应用：在下拉列表中选择所属的应用。
- 前端站点名称：创建前端站点的名称，用于区分前端站点。
SDK拓展配置项
- SDK拓展配置项，可以不选择、选择一个或多个配置项。
- 未被选择的配置项，将不在指标中体现其数据。
业务埋码探针
在站点或H5端添加探针。将代码粘贴到站点或H5端的Index.html的<body>内容第一行。
固定版本接入
<script> !function(x, n) { window[n] = window[n] || {}; window[n].config = { appId: "",}; var o = document.createElement('script'); o.src = x, o.async = !0; var d = document.body.firstChild; document.body.insertBefore(o, d); }('https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/js-agent-cdn/1.0.43/jsagent.min.js', '__fr'); </script>最新版本接入
<script> !function(x, n) { window[n] = window[n] || {}; window[n].config = { appId: "",}; var o = document.createElement('script'); o.src = x, o.async = !0; var d = document.body.firstChild; document.body.insertBefore(o, d); }('https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/js-agent/jsagent.min.js', '__fr'); </script> - 微信小程序
图7 接入微信小程序
表4 接入微信小程序 参数名称
说明
创建前端站点
- 所属应用：在下拉列表中选择所属的应用。
- 前端站点名称：创建前端站点的名称，用于区分前端站点。
SDK拓展配置项
- SDK拓展配置项，可以不选择、选择一个或多个配置项。
- 未被选择的配置项，将不在指标中体现其数据。
业务埋码探针
在微信小程序添加探针。
- 安装SDK，在终端中运行以下命令：
npm i apm-mini-sdk
- 将以下代码放入app.js头部:
import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: false,traceType: "apm" platform: 'wx' });
- 请将上报地址“https://apm-web.cn-north-4.myhuaweicloud.com”添加到服务器域名注册为合法域名。
- 获取“服务器域名”路径方法如下：
- 登录微信小程序后台。
- 单击“开发->开发设置->服务器域名”。
- 百度小程序
图8 接入百度小程序
表5 接入百度小程序 参数名称
说明
创建前端站点
- 所属应用：在下拉列表中选择所属的应用。
- 前端站点名称：创建前端站点的名称，用于区分前端站点。
SDK拓展配置项
- SDK拓展配置项，可以不选择、选择一个或多个配置项。
- 未被选择的配置项，将不在指标中体现其数据。
业务埋码BI探针
在百度小程序添加探针。
- 安装SDK，在终端中运行以下命令：
npm i apm-mini-sdk
- 将以下代码放入app.js头部:
import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: false,traceType: "apm" platform: 'baidu' });
- 请将上报地址“https://apm-web.cn-north-4.myhuaweicloud.com”添加“开发设置”注册为合法域名。
- 获取“服务器域名”路径方法如下：
- 登录百度智能小程序后台。
- 单击“管理 -> 基础设置 -> 开发设置”。
- 支付宝小程序
图9 接入支付宝小程序
表6 接入支付宝小程序 参数名称
说明
创建前端站点
- 所属应用：在下拉列表中选择所属的应用。
- 前端站点名称：创建前端站点的名称，用于区分前端站点。
SDK拓展配置项
- SDK拓展配置项，可以不选择、选择一个或多个配置项。
- 未被选择的配置项，将不在指标中体现其数据。
业务埋码BI探针
在支付宝小程序添加探针。
- 安装SDK，在终端中运行以下命令：
npm i apm-mini-sdk
- 将以下代码放入app.js头部:
import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: false,traceType: "apm" platform: 'alipay' });
- 请将上报地址“https://apm-web.cn-north-4.myhuaweicloud.com”添加“服务器域名白名单”注册为合法域名。
- 获取“服务器域名”路径方法如下：
- 登录支付宝开发平台。
- 单击“小程序详情 -> 开发设置 -> 服务器域名白名单”。
- 钉钉小程序
图10 接入钉钉小程序
表7 接入钉钉小程序 参数名称
说明
创建前端站点
- 所属应用：在下拉列表中选择所属的应用。
- 前端站点名称：创建前端站点的名称，用于区分前端站点。
SDK拓展配置项
- SDK拓展配置项，可以不选择、选择一个或多个配置项。
- 未被选择的配置项，将不在指标中体现其数据。
业务埋码BI探针
在钉钉小程序添加探针。
- 安装SDK，在终端中运行以下命令：
npm i apm-mini-sdk
- 将以下代码放入app.js头部:
import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: false,traceType: "apm" platform: 'alipay' });
- 请将上报地址“https://apm-web.cn-north-4.myhuaweicloud.com”添加“安全中心”注册为合法域名。
- 获取“服务器域名”路径方法如下：
- 登录钉钉开发者后台。
- 单击“开发者后台 -> 应用详情页 -> 安全与监控 -> 安全中心”。
- 单击“创建前端站点”，完成操作。
配置告警策略
- 在左侧导航栏选择“前端监控 > 前端站点”，在“操作”列单击
按钮，查看告警策略列表。
图11 告警策略列表
- 单击“新建告警策略”，切换至新建告警策略页签。
- 基础信息
图12 基础信息
表8 基础信息参数列表 选项
含义
策略名称
自定义的名称，不能为空。
只能输入字母，数字，下划线，短横线，汉字。输入长度不能超过512个字符。
告警等级
定义告警等级，分为“轻微”、“严重”。
监控对象
需要监控的前端站点。
监控类型
选择需要监控的“监控类型”。
- 监控类型分为：Api采集、Js错误采集、页面性能采集、流量（PV/UV）采集。被选中类型的信息，会显示在右侧。
指标集
选择需要监控的“指标集”。被选中指标集信息，会显示在右侧。
- 告警规则
表9 告警规则参数列表 选项
含义
维度
可选。对于不同指标集细粒度的定义。
指标
对于指标集中某一个指标定义一个或者多个告警规则。
告警条件
定义告警的触发条件。
A 范围为数字1-10。
B 范围为数字1-10，且不能大于A。
C 不能小于数字10。
恢复策略
定义告警的恢复条件。
恢复时通知
告警恢复时是否触发额外的通知。
严格模式
当指标有多个对象返回值时，通过此选项可对返回的所有指标做告警表达式异常检测。
- 告警通知
图13 告警通知
表10 告警通知参数列表 选项
含义
告警通知内容
用户收到的告警详细内容，输入长度不能超过500个字符。
- 当告警规则中的“严格模式”开关打开时，告警通知内容包括“变量”和“循环”两种格式。“严格模式”开关关闭时，仅可以选择“变量”一种格式。
- 告警通知内容，可以自定义或者选择采集的指标内容。
- 选择采集的指标内容：“基础信息”右侧，单击指标名称前
，将指标内容引用到告警通知内容框。
选择通知对象
在下拉列表中，选择通知对象。告警会发送告警通知给被选的通知对象。
- 基础信息
- 信息填写完整后，单击“确定”完成告警策略配置。
- 告警模板创建完成后，您还可以执行相关操作中的操作。
表11 告警策略相关操作 操作
说明
启、停告警策略
在“操作”列选择
停用告警策略，选择
启动告警策略。编辑告警策略
在“操作”列选择
，可对告警策略重新编辑。删除告警策略
在“操作”列选择
，可删除所选告警策略。
