ARMS用户体验监控针对Web & H5主要监控浏览器页面以及移动应用中的H5页面，通过页面内嵌JS脚本或NPM包的方式，采集应用站点运行过程中的性能指标，追踪异常问题，帮助您提升自身应用站点的用户体验。
创建应用
-
登录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>复制下方代码，并粘贴至HTML页面
<body>中的第一行。说明
请将以下代码中的
pid和endpoint替换为当前应用对应的pid和endpoint地址。CDN异步加载
<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包
-
引入npm包。
npm install @arms/rum-browser --save -
初始化应用。
说明
请将以下代码中的
pid和endpoint替换为当前应用对应的pid和endpoint地址。import ArmsRum from '@arms/rum-browser'; ArmsRum.init({pid: "your app id",endpoint: "your endpoint" });
各安装方式说明如下：
使用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');-
异步加载：又称为非阻塞加载，表示浏览器在下载执行JS之后还会继续处理后续页面。若对页面性能的要求非常高，建议使用此方式。
重要
由于是异步加载，ARMS无法捕捉到监控SDK加载初始化完成之前的JS错误和资源加载错误。
-
同步加载：又称为阻塞加载，表示当前JS加载完毕后才会进行后续处理。如需捕捉从页面打开到关闭的整个过程中的JS错误和资源加载错误，建议使用此方式。
-
npm包：使用npm包可以减少页面中Script的加载个数，可以自行控制页面Script的CDN业务方向，并可以将用户体验监控作为单独模块进行后续处理。