文档首页/ 应用性能管理 APM/ 快速入门（2.0）/ 接入Web&H5监控前端站点指标
更新时间：2026-03-05 GMT+08:00
查看PDF
分享

接入Web&H5监控前端站点指标

APM Agent会周期性采集一些前端监控的性能指标数据，用来衡量浏览器/H5端、小程序端的总体健康状况。可以采集加载性能、API请求、JS错误、访问分析、自定义上报、会话追踪、场景分析以及网络分析等数据，帮助用户全面掌握前端应用的运行情况。

本文以接入Web&H5前端站点为例，帮助您快速上手使用应用性能管理服务的前端监控功能。首先需要接入Web&H5前端站点；然后在APM界面查看接入是否成功。待Web&H5接入成功后，即可在APM控制台上查看前端监控指标。

操作流程

  1. 首次开通APM 2.0并授权。
  2. 接入Web&H5前端站点。
  3. 查看前端监控总览指标。

前提条件

  • 使用APM 2.0前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接跳过如下操作。
    1. 进入华为云官网，单击页面右上角的“注册”。
    2. 参考注册华为账号并开通华为云中操作，完成注册。
    3. 注册后参考实名认证完成个人或企业账号实名认证。
  • 为账户充值。如果您的账户有足够金额，请跳到下一个任务。如果您的账户还没有足够金额，请先为账户充值。
  • 为用户添加应用性能管理 APM的操作权限。

    您需要有APM的管理员权限“APM FullAccess”，具体操作请参考授权IAM用户使用APM。

首次开通APM 2.0并授权

  1. 使用APM 2.0 前，需要先开通APM 2.0。如果您已开通APM 2.0，可直接跳过如下操作。

    1. 登录APM控制台。

      首次登录APM控制台，您可以选择使用应用性能管理的“免费体验”或“开通企业版”。“免费体验”与“开通企业版”的差异参见产品规格差异。

      图1 APM控制台首页
    2. 单击“免费体验”，进入免费体验应用性能管理页面。
      图2 免费体验应用性能管理

    3. 阅读《APM应用性能管理服务声明》 、 《法律声明》以及《隐私政策声明》后，选择“□ 我已阅读 《APM应用性能管理服务声明》以及《法律声明及隐私权政策》”。
    4. 单击“立即体验 ”，弹出“请确认已阅读《华为APM应用性能管理服务声明》及《法律声明及隐私权政策》。”提示框。
    5. 单击“确定”，最多可以免费使用10个Agent。

  2. 自动创建访问密钥。

    APM 2.0通过AK/SK进行签名验证，通过授权的账户才能上报数据。

    1. 登录APM控制台。
    2. 单击左侧导航栏“系统管理 > 访问密钥”，进入访问密钥页面。
    3. 在访问密钥页面查看自动创建的访问密钥。

接入Web&H5前端站点

  1. 登录APM控制台。
  2. 单击左侧，选择“管理与监管> 应用性能管理 APM”，进入APM服务页面。
  3. 在左侧导航栏选择“前端监控 > 前端站点”，单击“接入前端站点”，填写相关信息。

    • “创建前端站点”成功后，appId会自动生成。
    • 站点名称填写前，“创建前端站点”按钮置灰。
    • 前端站点创建成功后，在“前端监控 > 前端站点”操作列单击“编辑”，可以查看SDK拓展配置项参数对应的参数。
    • 前端监控数据通过自动生成的appId上报，没有经过有效鉴权，可能产生脏数据。
    • 小程序 SDK接入相关操作，参见SDK参考。
    • Web&H5接入。
      1. 选择“Web&H5”。
      2. 在下拉列表中选择“所属应用”为“APM（默认）”，填写“站点名称”为：test001，用于区分前端站点。
      3. 单击“创建前端站点”，完成操作。

  4. 业务埋码探针。

    复制下方代码，将其粘贴在Index.html的<body>中。注意，需要将代码粘贴在<body>内容的第一行。

    • 固定版本接入 
      <script>
    !function(x, n) {
      window[n] = window[n] || {};
      window[n].config = { domain: "https://rum.rnd.*****.com",appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: true,traceType: "apm"};
    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.*****.ulanqab.****.com/js-agent/jsagent.min.js', '__fr');
</script>
    • 最新版本接入 
      <script>
    !function(x, n) {
      window[n] = window[n] || {};
      window[n].config = { domain: "https://rum.rnd.****.com",appId: "",apiRepo: true,thirdApi: true,hashMode: true,JsErrClean: true,smartJsErr: true,webResource: true,traceType: "apm"};
    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.****.ulanqab.****.com/js-agent/jsagent.min.js', '__fr');
</script>

  5. 在左侧导航栏选择“前端监控 >前端站点”，在搜索栏中输入“test001”。
  6. 单击“回车”，展示“站点名称”为“test001”的相关信息。

查看前端监控总览指标

Web&H5接入成功后，可以在APM控制台上查看“前端监控 >总览”指标数据。

  1. 在左侧导航栏选择“前端监控 >前端站点”页面，搜索到“站点名称”为“test001”的相关信息。
  2. 单击“前端站点列”的蓝色字体“test001”，跳转至“总览”页面，展示“test001”的前端监控指标总览。

相关文档