You need to enable JavaScript to run this app.
导航

Web SDK接入

最近更新时间2023.12.07 20:16:59

首次发布时间2022.03.16 11:04:54

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

使用限制

目前SDK仅限中国大陆应用使用(不包括港澳台地区)。

步骤一:接入SDK

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

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

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

NPM

前提条件

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

操作步骤

  1. 执行以下命令,安装SDK。

    npm install @apmplus/web
    
  2. 修改代码,接入SDK。

    // 在项目最开始的地方引入下面的代码
    import browserClient  from '@apmplus/web'// 配置参数
    
    browserClient('init', {
     aid: 0, // 应用唯一标识,必填参数
     token:'xxx-xxx' // 应用 token,必填参数
    })
    // 开启上报
    browserClient('start')
    

    说明

    aidtoken须替换为您创建的应用对应的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>

说明

aidtoken须替换为您创建的应用对应的AppID和AppToken,具体请参见如何查询AppID和AppToken?

(可选)步骤二:详细配置

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

步骤三:验证上报

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

使用Chrome DevTools验证上报

  1. 打开Chrome DevTools。
  2. 选择Networks,查看Request Method为POST的请求。
    Request Method为OPTIONS的请求是预检请求,无上报内容。
    图片