文档首页/ 应用性能管理 APM/ 用户指南（2.0）/ 前端监控/ 前端站点

更新时间：2024-11-08 GMT+08:00

前端站点

查看前端站点

登录管理控制台。
单击左侧，选择“管理与监管> 应用性能管理 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拓展配置项参数说明如下：
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

图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 apm-mini-sdk 单机开发者工具菜单栏中的"工具>构建npm"，构建当前工程的npm库文件。在"miniprogram_npm"文件夹中查看有"apm-mini-sdk"文件夹表示引入成功。构建npm命令位置验证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”添加到服务器域名注册为合法域名。
获取“服务器域名”路径方法如下：
1. 登录微信小程序后台。
2. 单击“开发->开发设置->服务器域名”。

百度小程序

图5 接入百度小程序
点击放大

表4 接入百度小程序
参数名称	说明
创建前端站点	所属应用：在下拉列表中选择所属的应用。前端站点名称：创建前端站点的名称，用于区分前端站点。
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”添加“开发设置”注册为合法域名。
获取“服务器域名”路径方法如下：
1. 登录百度智能小程序后台。
2. 单击“管理 -> 基础设置 -> 开发设置”。

支付宝小程序

图6 接入支付宝小程序
点击放大

表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: 'alipay' });

请将上报地址“https://apm-web.cn-north-4.myhuaweicloud.com”添加“服务器域名白名单”注册为合法域名。
获取“服务器域名”路径方法如下：
1. 登录支付宝开发平台。
2. 单击“小程序详情 -> 开发设置 -> 服务器域名白名单”。

钉钉小程序

图7 接入钉钉小程序
点击放大

表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”添加“安全中心”注册为合法域名。
获取“服务器域名”路径方法如下：
1. 登录钉钉开发者后台。
2. 单击“开发者后台 -> 应用详情页 -> 安全与监控 -> 安全中心”。

单击“创建前端站点”，完成操作。

配置告警策略

在左侧导航栏选择“前端监控 > 前端站点”，在“操作”列单击按钮，查看告警策略列表。

图8 告警策略列表

单击“新建告警策略”，切换至新建告警策略页签。

基础信息

图9 基础信息

表7 基础信息参数列表
选项	含义
策略名称	自定义的名称，不能为空。只能输入字母，数字，下划线，短横线，汉字。输入长度不能超过512个字符。
告警等级	定义告警等级，分为“轻微”、“严重”。
监控对象	需要监控的前端站点。
监控类型	选择需要监控的“监控类型”。监控类型分为：Api采集、Js错误采集、页面性能采集、流量（PV/UV）采集。被选中类型的信息，会显示在右侧。
指标集	选择需要监控的“指标集”。被选中指标集信息，会显示在右侧。

告警规则

表8 告警规则参数列表
选项	含义
维度	可选。对于不同指标集细粒度的定义。
指标	对于指标集中某一个指标定义一个或者多个告警规则。
告警条件	定义告警的触发条件。 A 范围为数字1-10。 B 范围为数字1-10，且不能大于A。 C 不能小于数字10。
恢复策略	定义告警的恢复条件。
恢复时通知	告警恢复时是否触发额外的通知。
严格模式	当指标有多个对象返回值时，通过此选项可对返回的所有指标做告警表达式异常检测。

告警通知

图10 告警通知
点击放大

表9 告警通知参数列表
选项	含义
告警通知内容	用户收到的告警详细内容，输入长度不能超过500个字符。当告警规则中的“严格模式”开关打开时，告警通知内容包括“变量”和“循环”两种格式。“严格模式”开关关闭时，仅可以选择“变量”一种格式。告警通知内容，可以自定义或者选择采集的指标内容。选择采集的指标内容：“基础信息”右侧，单击指标名称前，将指标内容引用到告警通知内容框。
选择通知对象	在下拉列表中，选择通知对象。告警会发送告警通知给被选的通知对象。

信息填写完整后，单击“确定”完成告警策略配置。

告警模板创建完成后，您还可以执行相关操作中的操作。

**表10** 告警策略相关操作
操作	说明
启、停告警策略	在“操作”列选择停用告警策略，选择启动告警策略。
编辑告警策略	在“操作”列选择，可对告警策略重新编辑。
删除告警策略	在“操作”列选择，可删除所选告警策略。

**表11** 相关操作
操作	说明
启、停前端站点	在操作列选择“停用”停用前端站点；选择“启用”启动前端站点。
查看告警策略	在操作列选择“查看告警策略”，可查看告警策略，相关操作参见配置告警策略。
设置前端站点	在操作列选择“设置”，可对前端站点重新编辑。
删除前端站点	在操作列选择“删除”，可删除所选前端站点。

意见反馈

文档内容是否对您有帮助？

有帮助没帮助

提供反馈

提交成功！非常感谢您的反馈，我们会继续努力做到更好！您可在我的云声建议查看反馈及问题处理状态。

系统繁忙，请稍后重试

在使用文档中是否遇到以下问题

内容与产品页面不一致

内容不易理解

缺失示例代码

步骤不可操作

搜不到想要的内容

缺少最佳实践

意见反馈（选填）

0/500

请至少选择一项反馈信息并填写问题反馈

字符长度不能超过500

直接提交取消

如您有其它疑问，您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问

前端站点

查看前端站点

接入前端站点

配置告警策略

更多操作

相关文档

意见反馈

文档内容是否对您有帮助？

7*24

备案

专业服务

退订

建议反馈

售前咨询热线