将Web应用接入ARMS用户体验监控 - 应用实时监控服务ARMS

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

重要

阿里云用户体验监控于2024年06月24日00:00:00（UTC+8）起正式商用，计费详情，请参见计费说明。如果您在使用中有任何问题，请联系用户体验监控答疑钉钉群（群号：67370002064）获取帮助。

创建应用

登录ARMS控制台。
在左侧导航栏选择用户体验监 > 应用列表，并在顶部菜单栏选择目标地域。
在应用列表页面单击添加应用。
在创建应用面板单击Web & H5。
在接入Web & H5面板输入应用名称和描述，然后单击创建。
说明
应用名称唯一，不能与已创建的应用名称重复。
创建成功后，当前应用将会在STEP2区域自动生成对应的pid和endpoint地址。
在STEP2区域选择安装方式并安装探针SDK。
CDN同步加载
复制下方代码，并粘贴至HTML页面<body>中的第一行。
说明
请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。
```
<script>
  window.__rum = {
    pid: "your app id",
    endpoint: "your endpoint"
  };
</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"
  };
  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包
1. 引入npm包。
```
npm install @arms/rum-browser --save
```
2. 初始化应用。
  说明
  请将以下代码中的pid和endpoint替换为当前应用对应的pid和endpoint地址。
```
import ArmsRum from '@arms/rum-browser';
ArmsRum.init({
  pid: "your app id",
  endpoint: "your endpoint"
});
```
各安装方式说明如下：
- 异步加载：又称为非阻塞加载，表示浏览器在下载执行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');
```

应用实时监控服务ARMS：接入Web & H5应用

创建应用

CDN同步加载

CDN异步加载

npm包

相关文档