Web SDK接入
更新时间：2023.05.29 11:27:31
本文为Web服务的接入方法，即直接使用火山引擎平台上的产品及服务。
使用限制
目前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, // 应用唯一标识，必填参数 token:'xxx-xxx' // 应用 token,必填参数 }) // 开启上报 browserClient('start')
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","largest-contentful-paint","layout-shift"]})}})(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，除了这两个配置项外，还有多个配置项。所有支持的配置项的字段名和字段意义请参见API参考。
步骤三：验证上报
请使用Chrome浏览器执行以下步骤验证数据是否上报。
使用Chrome插件验证上报
- 打开插件，单击添加至Chrome。
- 在对话框要添加"Slarder View"吗？，单击添加扩展程序。
- 在Chrome浏览器，单击右上角更多工具 > 扩展程序。
- 找到Slarder View，单击详情。
- 打开开发者工具，单击Slardar View。
功能介绍：- 搜索框支持按照任意字符串搜索。
- 选择输入框支持筛选不同的上报类型。
- 支持对历史数据进行一键清空。
- 支持视图切换，默认展示的是新SDK【@apmplus/web】的上报。
使用Chrome DevTools验证上报
- 打开Chrome DevTools。
- 选择Networks，查看Request Method为POST的请求。
Request Method为OPTIONS的请求是预检请求，无上报内容。