更新时间:2024-03-04 GMT+08:00
分享

前端站点

查看前端站点

  1. 登录管理控制台。
  2. 单击左侧,选择“管理与监管> 应用性能管理 APM”,进入APM服务页面。
  3. 在左侧导航栏选择“前端监控 > 前端站点”,展示所有已经接入前端站点的列表。

    图1 查看前端站点
    表1 前端站点参数说明

    参数名称

    说明

    前端站点

    前端站点名称

    所属应用

    前端站点所属应用

    用户数量

    访问站点用户的数量

    浏览量

    页面访问量或点击量

    平均加载时间

    页面加载的平均时间

    JS错误率

    JS错误率=运行JavaScript触发的错误总数/运行JavaScript的总数

    API成功率

    API成功率=API成功数量/API总数量

    采集状态

    前端站点的采集状态,包括:“运行中”以及“被停止”。

    操作

    前端站点更多操作。具体操作参见表11

  4. 在前端站点页面的右上角,单击时间维度选择按钮,默认“近20分钟”。

    当前支持“近20分钟”、“近1小时”、“近3小时”、“近6小时”、“近1天”、“今天”、“昨天”、“近7天”、“近30天”以及自定义。
    图2 选择时间维度

接入前端站点

  1. 在左侧导航栏选择“前端监控 > 前端站点”,单击“接入前端站点”,填写相关信息。

    • “创建前端站点”成功后,appId会自动生成。
    • SDK拓展配置项参数说明如下:

      apiRepo:API自动上报。

      thirdApi:第三方API上报。

      hashMode:hashMode自动解析。

      smartJsErr:JS错误追踪。

      JsErrClean:JS错误智能消减。

      webResource:页面资源上报(仅支持Web&H5)。

      链路追踪:开启后可与可观测链路 OpenTelemetry 版产品做前后端链路追踪,默认与应用监控APM调用链做前后端链路追踪。

    • 前端站点创建成功前,SDK拓展配置项中的参数默认全部勾选。
    • 前端站点创建成功后,在“前端监控 > 前端站点”操作列单击,可以查看SDK拓展配置项参数对应的参数。
    1. 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>
    2. 微信小程序
      图4 接入微信小程序
      表3 接入微信小程序

      参数名称

      说明

      创建前端站点

      • 所属应用:在下拉列表中选择所属的应用。
      • 前端站点名称:创建前端站点的名称,用于区分前端站点。

      SDK拓展配置项

      • SDK拓展配置项,可以不选择、选择一个或多个配置项。
      • 未被选择的配置项,将不在指标中体现其数据。

      业务埋码探针

      在微信小程序添加探针。

      1. 安装SDK,在终端中运行以下命令:
        npm i @cloud/apm-mini-sdk
      2. 新建SDK初始化文件apmInit.js,并将以下代码放入其中:
        import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ 
          appId: "",   
          platform: 'wx' 
        });
    3. 百度小程序
      图5 接入百度小程序
      表4 接入百度小程序

      参数名称

      说明

      创建前端站点

      • 所属应用:在下拉列表中选择所属的应用。
      • 前端站点名称:创建前端站点的名称,用于区分前端站点。

      SDK拓展配置项

      • SDK拓展配置项,可以不选择、选择一个或多个配置项。
      • 未被选择的配置项,将不在指标中体现其数据。

      业务埋码BI探针

      在百度小程序添加探针。

      1. 安装SDK,在终端中运行以下命令:
        npm i @cloud/apm-mini-sdk
      2. 新建SDK初始化文件apmInit.js,并将以下代码放入其中:
        import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ 
         appId: "",
         platform: 'baidu'
        });
    4. 支付宝小程序
      图6 接入支付宝小程序
      表5 接入支付宝小程序

      参数名称

      说明

      创建前端站点

      • 所属应用:在下拉列表中选择所属的应用。
      • 前端站点名称:创建前端站点的名称,用于区分前端站点。

      SDK拓展配置项

      • SDK拓展配置项,可以不选择、选择一个或多个配置项。
      • 未被选择的配置项,将不在指标中体现其数据。

      业务埋码BI探针

      在支付宝小程序添加探针。

      1. 安装SDK,在终端中运行以下命令:
        npm i @cloud/apm-mini-sdk
      2. 新建SDK初始化文件apmInit.js,并将以下代码放入其中:
        import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ 
         appId: "",
         platform: 'alipay'
        });
    5. 钉钉小程序
      图7 接入钉钉小程序
      表6 接入钉钉小程序

      参数名称

      说明

      创建前端站点

      • 所属应用:在下拉列表中选择所属的应用。
      • 前端站点名称:创建前端站点的名称,用于区分前端站点。

      SDK拓展配置项

      • SDK拓展配置项,可以不选择、选择一个或多个配置项。
      • 未被选择的配置项,将不在指标中体现其数据。

      业务埋码BI探针

      在钉钉小程序添加探针。

      1. 安装SDK,在终端中运行以下命令:
        npm i @cloud/apm-mini-sdk
      2. 新建SDK初始化文件apmInit.js,并将以下代码放入其中:
        import apmAgent from 'apm-mini-sdk'; apmAgent.startSDK({ 
         appId: "",
         platform: 'ding_talk'
        });

  2. 单击“创建前端站点”,完成操作。

配置告警策略

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

    图8 告警策略列表

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

    1. 基础信息
      图9 基础信息
      表7 基础信息参数列表

      选项

      含义

      策略名称

      自定义的名称,不能为空。

      只能输入字母,数字,下划线,短横线,汉字。输入长度不能超过512个字符。

      告警等级

      定义告警等级,分为“轻微”、“严重”。

      监控对象

      需要监控的前端站点。

      监控类型

      选择需要监控的“监控类型”。

      • 监控类型分为:Api采集、Js错误采集、页面性能采集、流量(PV/UV)采集。被选中类型的信息,会显示在右侧。

      指标集

      选择需要监控的“指标集”。被选中指标集信息,会显示在右侧。

    2. 告警规则
      图10 告警规则
      表8 告警规则参数列表

      选项

      含义

      维度

      可选。对于不同指标集细粒度的定义。

      指标

      对于指标集中某一个指标定义一个或者多个告警规则。

      告警条件

      定义告警的触发条件。

      A 范围为数字1-10。

      B 范围为数字1-10,且不能大于A。

      C 不能小于数字10。

      恢复策略

      定义告警的恢复条件。

      恢复时通知

      告警恢复时是否触发额外的通知。

      严格模式

      当指标有多个对象返回值时,通过此选项可对返回的所有指标做告警表达式异常检测。

    3. 告警通知
    图11 告警通知
    表9 告警通知参数列表

    选项

    含义

    告警通知内容

    用户收到的告警详细内容,输入长度不能超过500个字符。

    • 当告警规则中的“严格模式”开关打开时,告警通知内容包括“变量”和“循环”两种格式。“严格模式”开关关闭时,仅可以选择“变量”一种格式。
    • 告警通知内容,可以自定义或者选择采集的指标内容。
    • 选择采集的指标内容:“基础信息”右侧,单击指标名称前,将指标内容引用到告警通知内容框。

    选择通知对象

    在下拉列表中,选择通知对象。告警会发送告警通知给被选的通知对象。

  3. 信息填写完整后,单击“确定”完成告警策略配置。
  4. 告警模板创建完成后,您还可以执行相关操作中的操作。

    表10 告警策略相关操作

    操作

    说明

    启、停告警策略

    在“操作”列选择停用告警策略,选择启动告警策略。

    编辑告警策略

    在“操作”列选择,可对告警策略重新编辑。

    删除告警策略

    在“操作”列选择,可删除所选告警策略。

更多操作

您可以执行表11中的操作。
表11 相关操作

操作

说明

启、停前端站点

在“操作”列选择停用前端站点,选择启动前端站点。

查看前端站点

在“操作”列选择,可查看前端站点。

设置前端站点

在“操作”列选择,可对前端站点重新编辑。

删除前端站点

在“操作”列选择,可删除所选前端站点。

分享:

    相关文档

    相关产品