接入Web & H5应用_云监控(CMS)-阿里云帮助中心

云监控2.0针对Web & H5主要监控浏览器页面以及移动应用中的H5页面，通过页面内嵌JS脚本或NPM包的方式，采集应用站点运行过程中的性能指标，追踪异常问题，帮助您提升自身应用站点的用户体验。

创建应用

登录云监控2.0控制台，选择目标工作空间，在左侧导航栏选择接入中心 > 接入中心。
单击Web & H5卡片，选择地域，然后输入应用名称和描述，单击创建应用。
说明
应用名称唯一，不能与已创建的应用名称重复。
创建成功后，当前应用将会在参数配置区域自动生成SDK，SDK中包含对应的pid和endpoint地址。

在参数配置区域选择安装方式、应用配置环境、路由模式和配置项，然后安装探针SDK。

CDN同步加载

复制下方代码，并粘贴至HTML页面<body>中的第一行。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。

<script>
  window.__rum = {
    pid: 'your app id',
    endpoint: 'your endpoint',
    // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
    env: 'prod', 
    // 设置路由模式， 参考值：'history' | 'hash'
    spaMode: 'history',
    collectors: {
      // 页面性能指标监听开关，默认开启
      perf: false,
      // WebVitals指标监听开关，默认开启
      webVitals: false,
      // Ajax监听开关，默认开启
      api: false,
      // 静态资源开关，默认开启
      staticResource: false,
      // JS错误监听开关，默认开启
      jsError: false,
      // 控制台错误监听开关，默认开启
      consoleError: false,
      // 用户行为监听开关，默认开启
      action: false,
    },
    // 链路追踪配置开关，默认关闭
    tracing: false,
  };
</script>
<script type="text/javascript" src="https://sdk.rum.aliyuncs.com/v2/browser-sdk.js" crossorigin></script>

CDN异步加载

复制下方代码，并粘贴至HTML页面<body>中的第一行。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。

<script>
    !(function(c,b,d,a){c[a]||(c[a]={});c[a]=
    {
      pid: 'your app id',
      endpoint: 'your endpoint',
      // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
      env: 'prod', 
      // 设置路由模式， 参考值：'history' | 'hash'
      spaMode: 'history',
      collectors: {
        // 页面性能指标监听开关，默认开启
        perf: false,
        // WebVitals指标监听开关，默认开启
        webVitals: false,
        // Ajax监听开关，默认开启
        api: false,
        // 静态资源开关，默认开启
        staticResource: false,
        // JS错误监听开关，默认开启
        jsError: false,
        // 控制台错误监听开关，默认开启
        consoleError: false,
        // 用户行为监听开关，默认开启
        action: false,
      },
      // 链路追踪配置开关，默认关闭
      tracing: false,
    }
    with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window, document, "https://sdk.rum.aliyuncs.com/v2/browser-sdk.js", "__rum");
</script>

npm包

引入npm包。
```
npm install @arms/rum-browser --save
```

初始化应用。

说明

请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。

import ArmsRum from '@arms/rum-browser';

ArmsRum.init({
  pid: 'your app pid',
  endpoint: 'your endpoint',
  // 设置环境信息，参考值：'prod' | 'gray' | 'pre' | 'daily' | 'local'
  env: 'prod', 
  // 设置路由模式， 参考值：'history' | 'hash'
  spaMode: 'history',
  collectors: {
    // 页面性能指标监听开关，默认开启
    perf: false,
    // WebVitals指标监听开关，默认开启
    webVitals: false,
    // Ajax监听开关，默认开启
    api: false,
    // 静态资源开关，默认开启
    staticResource: false,
    // JS错误监听开关，默认开启
    jsError: false,
    // 控制台错误监听开关，默认开启
    consoleError: false,
    // 用户行为监听开关，默认开启
    action: false,
  },
  // 链路追踪配置开关，默认关闭
  tracing: false,
});

export default ArmsRum;

各安装方式说明如下：

异步加载：又称为非阻塞加载，表示浏览器在下载执行JS之后还会继续处理后续页面。若对页面性能的要求非常高，建议使用此方式。
重要
由于是异步加载，ARMS无法捕捉到监控SDK加载初始化完成之前的JS错误和资源加载错误。
同步加载：又称为阻塞加载，表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误，建议使用此方式。
npm包：使用npm包可以减少页面中Script的加载个数，可以自行控制页面Script的CDN业务方向，并可以将用户体验监控作为单独模块进行后续处理。

使用CDN加载情况下，访问 SDK 监控实例，请使用全局命名空间 RumSDK.default

const ArmsRum = window.RumSDK.default;
// 访问 RumSDK 需确保SDK已经完成加载
// 如果SDK加载前没有定义 __rum 配置，可在此初始化
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint",
});
// 以下继续使用，NPM 和 CDN 一致
ArmsRum.setConfig('env', 'pre');

（可选）校验前确认。
安装完探针SDK后，前端应用即已完成接入，云监控2.0可以对数据上报进行校验，请根据面板提示完成校验并选中校验项，然后单击开始数据接入校验。

创建应用

CDN同步加载

CDN异步加载

npm包

相关文档