文档中心

应用性能监控全链路版

请输入

SDK 接入

WebPro SDK 接入

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

使用限制

不同地域的 SDK 请求地址各不相同，详细信息参见：开服地域中的客户端 SDK 接入地址。

步骤一：接入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, // 应用唯一标识。必填参数，number 类型
token:'xxx-xxx' // 应用 token。必填参数，string 类型
})
// 开启上报
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的请求是预检请求，无上报内容。

最近更新时间：2025.09.01 20:17:22

这个页面对您有帮助吗？

有用

无用