Web SDK接入--应用性能监控全链路版-火山引擎

文档中心

立即注册

导航

Web SDK接入

最近更新时间：2024.09.06 15:49:55首次发布时间：2022.03.16 11:04:54

本文为Web服务的接入方法，即直接使用火山引擎平台上的产品及服务。

使用限制

需要区分中国大陆（不包括港澳台地区）和海外的SDK上报域名。

中国发布的应用：上报到中国大陆服务器，域名为https://apmplus.volces.com。
海外发布的应用，上报到马来西亚柔佛服务器，域名为https://apmplus.ap-southeast-1.volces.com。
注意
柔佛是开白地域，如需查看该地域接入的应用和功能页面，请提交工单。

步骤一：接入SDK

接入SDK有两种方式：NPM包接入和CDN接入。
两种接入方式主要有以下区别：

升级：升级SDK版本时，NPM接入需要手动更新版本并重新上线，CDN接入不用手动更新，永远能拉取到最新版本的SDK。
监控时机：NPM包最终会被打包到业务代码里，CDN接入是直接在html中插入一段脚本，脚本会预先开始收集异常。所以相对来说，CDN接入方式监控异常的时机较早。

因此，两种接入方式中，推荐使用CDN接入。

NPM

前提条件

已安装NPM。NPM的安装和使用，请参见官方文档。

操作步骤

执行以下命令，安装SDK。
```
npm install @apmplus/web
```

修改代码，接入SDK。

// 在项目最开始的地方引入下面的代码
import browserClient  from '@apmplus/web'// 配置参数

browserClient('init', {
 aid: 0, // 应用唯一标识，必填参数
 token:'xxx-xxx' // 应用 token,必填参数
})
// 开启上报
browserClient('start')

说明

aid和token须替换为您创建的应用对应的AppID和AppToken，具体请参见如何查询AppID和AppToken？。

CDN（推荐）

在html的head标签顶部添加以下代码即可。

<!-- 页面 <head>标签顶部添加以下代码  -->
<script>
(function(n,e,r,t,a,o,s,i,c,l,f,m,p,u){o="precollect";s="getAttribute";i="addEventListener";c="PerformanceObserver";l=function(e){f=[].slice.call(arguments);f.push(Date.now(),location.href);(e==o?l.p.a:l.q).push(f)};l.q=[];l.p={a:[]};n[a]=l;m=document.createElement("script");m.src=r+"?aid="+t+"&globalName="+a;m.crossorigin="anonymous";e.getElementsByTagName("head")[0].appendChild(m);if(i        in        n){l.pcErr=function(e){e=e||n.event;p=e.target||e.srcElement;if(p        instanceof        Element||p        instanceof        HTMLElement){n[a](o,"st",{tagName:p.tagName,url:p[s]("href")||p[s]("src")})}else{n[a](o,"err",e.error||e.message)}};l.pcRej=function(e){e=e||n.event;n[a](o,"reject",e.reason||e.detail&&e.detail.reason)};n[i]("error",l.pcErr,true);n[i]("unhandledrejection",l.pcRej,true)}if("PerformanceLongTaskTiming"in        n){u=l.pp={entries:[]};u.observer=new        PerformanceObserver(function(e){u.entries=u.entries.concat(e.getEntries())});u.observer.observe({entryTypes:["longtask"]})}})(window,document,"https://apm.volccdn.com/mars-web/apmplus/web/browser.cn.js",0,"apmPlus");
</script>
<script>
window.apmPlus("init",{
  aid:0,
  token: 'xxx-xxx'
});
window.apmPlus("start");
</script>

说明

aid和token须替换为您创建的应用对应的AppID和AppToken，具体请参见如何查询AppID和AppToken？。

（可选）步骤二：详细配置

在上述示例中只配置了aid和token，除了这两个配置项外，还有多个配置项。所有支持的配置项的字段名和字段意义请参见API参考。

步骤三：验证上报

请使用Chrome浏览器执行以下步骤验证数据是否上报。

使用Chrome DevTools验证上报

打开Chrome DevTools。
选择Networks，查看Request Method为POST的请求。
Request Method为OPTIONS的请求是预检请求，无上报内容。