vue使用阿里云ARMS前端监控

其实使用方法也很简单。cdn的方式就是h5一样，在index.html的body的第一行中引入script（同步异步任选）。

<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"xxxx",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,enableLinkTrace:true,behavior:true,enableConsole:true};
with(b)with(body)with(insertBefore(createElement("script"),firstChild))setAttribute("crossorigin","",src=d)
})(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>

另外npm的方式

npm install alife-logger --save

然後再main.js或適當的位置引入

const BrowserLogger = require('alife-logger');
const __bl = BrowserLogger.singleton({pid:"xxxxx",appType:"web",imgUrl:"https://arms-retcode.aliyuncs.com/r.png?",sendResource:true,enableLinkTrace:true,behavior:true,enableConsole:true});

紅色接口報錯，藍色的是監控上報

手动触发监控

如果是大项目，每个页面每个接口都做监控的话，就会很浪费资源，所以也提供了手动调用的api，手动上传。

需要在控制台设置那里把自动上报关闭。

然后在你的项目封装接口请求的地方进行手动调用（按照你需要场景，例子：我想只监控这个页面的接口）

if(window.location.href.includes('pay.html')){
	//因为__bl是全局引入的  所以直接使用即可  注意：所传每个参数都要有  并且注意格式  否则无法上报，尤其是time
    __bl.api(api, success, time, code, msg)   
}