更新时间:2026-01-21 GMT+08:00
分享

Web&H5接入APM

操作步骤

  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”。

相关文档