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