Web SDK接入

步骤一：接入SDK

接入SDK有两种方式：NPM包接入和CDN接入。

两种接入方式主要有以下区别：

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

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

NPM

前提条件

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

操作步骤

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

npm install @owl-js/web

2. 修改代码，接入SDK。

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

browserClient('init', {
 aid: 'xxxxx', // 应用唯一标识，必填参数
 token:'xxx-xxx' // 应用 token,必填参数
})

// 开启上报
browserClient('start')

CDN（推荐）

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

<script>
        !function(e,t,r,n,a){var o=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];e.push(Date.now(),location.href),("precollect"==e[0]?o.p.a:o.q).push(e)};o.q=[],o.p={a:[]},e[a]=o;var s=document.createElement("script");s.src=r+"?aid="+n+"&globalName="+a,s.crossOrigin="anonymous",t.getElementsByTagName("head")[0].appendChild(s),"addEventListener"in e&&(o.pcErr=function(t){var r=t||e.event,n=r.target||r.srcElement;n instanceof Element||n instanceof HTMLElement?e[a]("precollect","st",{tagName:n.tagName,url:n.getAttribute("href")||n.getAttribute("src")}):e[a]("precollect","err",r.error||r.message)},o.pcRej=function(t){var r=t||e.event;e[a]("precollect","err",r.reason||r.detail&&r.detail.reason)},e.addEventListener("error",o.pcErr,!0),e.addEventListener("unhandledrejection",o.pcRej,!0)),"PerformanceLongTaskTiming"in e&&(o.pp={entries:[]},o.pp.observer=new PerformanceObserver((function(e){o.pp.entries=o.pp.entries.concat(e.getEntries())})),o.pp.observer.observe({entryTypes:["longtask","largest-contentful-paint","layout-shift"]}))}(window,document,"https://www.unpkg.com/@owl-js/web@latest/cdn/browser.js","aid","browserClient");
</script>
<script>
  window.browserClient("init", {
      aid: aidInput.value,
      token: 'xxx-xxx',
      domain: 'http://localhost:3000'
  });
  window.browserClient("start");
</script>

参考下列步骤，传入相应的配置，初始化 SDK 。

window.browserClient("init",{
  aid:0,
  token: 'xxx-xxx'
});
window.browserClient("start");