You need to enable JavaScript to run this app.
文档中心
应用性能监控全链路版

应用性能监控全链路版

请输入
  • 文档首页
    • 应用性能监控全链路版用户指南客户端监控WebPro 端监控SDK 接入WebPro SDK 接入
复制全文
下载 pdf
我的收藏
SDK 接入
WebPro SDK 接入
复制全文
下载 pdf
我的收藏
WebPro SDK 接入
本文为Web服务的接入方法，即直接使用火山引擎平台上的产品及服务。​
使用限制​
不同地域的 SDK 请求地址各不相同，详细信息参见：开服地域 中的客户端 SDK 接入地址。​
步骤一：接入SDK​
接入SDK有两种方式：NPM包接入和CDN接入。​
两种接入方式主要有以下区别：​
  • 升级：升级SDK版本时，NPM接入需要手动更新版本并重新上线，CDN接入不用手动更新，永远能拉取到最新版本的SDK。​
  • 监控时机：NPM包最终会被打包到业务代码里，CDN接入是直接在html中插入一段脚本，脚本会预先开始收集异常。所以相对来说，CDN接入方式监控异常的时机较早。​
因此，两种接入方式中，推荐使用CDN接入。​
NPM​
前提条件​
已安装NPM。NPM的安装和使用，请参见官方文档。​
操作步骤​
  1. 执行以下命令，安装SDK。​
  • ​
    npm install @apmplus/web​
    ​
  1. 修改代码，接入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验证上报​
  1. 打开Chrome DevTools。​
  1. 选择Networks，查看Request Method为POST的请求。​
  • Request Method为OPTIONS的请求是预检请求，无上报内容。​
  • ​Image​​
​
最近更新时间：2025.09.01 20:17:22
这个页面对您有帮助吗？
有用
有用
无用
无用