@bbtfe/bbt-monitor v0.0.2

前端监控组件

本组件计划集成H5页面错误监控和性能监控

目前错误监控已集成，性能监控待完成

错误监控：全局监听捕获了站内JS触发的异常，然后将错误日志上报给后台，字段包括报错的消息，代码位置，报错堆栈，所使用的系统（iOS/Android），孕育App版本，浏览器信息ua等

npm引用

npm i @bbtfe/bbt-monitor

import bbtMonitor from '@bbtfe/bbt-monitor';

script引用

支持HTTPS和HTTP，建议在通常页面中使用下面去掉协议头的形式引用即可。

<script src="//static02.babytreeimg.com/img/bca/bbtMonitor/0.0.2/bbtMonitor.min.js" crossorigin="anonymous"></script>

PHP引用方式

建议合并脚本

StaticFileControl::addXXX('/img/bca/bbtMonitor/0.0.2/bbtMonitor.min.js');

url引入使用方法

cdn地址引入。

注意事项：

针对跨域脚本错误：

由于前端浏览器对于脚本安全的考虑，默认是不允许跨域捕获脚本错误信息，所以，需要做两件事：

1. 服务器端：脚本的Response Header添加Access-Control-Allow-Origin头，表明允许跨域；
2. 前端： script属性配置 crossorigin="anonymous"

这样，前端就能同时捕获跨域脚本的错误了。

API

初始化调用 初始化方法调用后，pre 和 online 环境默认开启错误监控 dev和test环境默认不开启错误监控 如果测试环境需要开启错误监控，需在url后面追加这个参数_error=true

bbtMonitor.init();

针对异步错误

原则上, 捕获了异步函数触发的异常，这是基于unhandledrejection这个事件的，但是支持的浏览器非常有限，当前在移动端浏览器几乎不被支持，所以在封装和写异步函数的时候，强烈要求在await函数和promise上自己catch一下错误，做好错误异常处理，然后在catch里面把错误信息上报给后台, 调用该方法：

bbtMonitor.catchError(err.message, err.stack);

因为客户端的盲目调用，页面会出现如下无意义的报错，为了不污染splunk数据，再0.0.2版本过滤这些报错： ios: ReferenceError: Can't find variable: Base64 ReferenceError: Can't find variable: webviewDisappear ReferenceError: Can't find variable: webviewAppear

android: Uncaught ReferenceError: onNetStateChange is not defined Uncaught TypeError: window.webviewDisappear is not a function Uncaught TypeError: window.webviewAppear is not a function Uncaught ReferenceError: pageLoadFinish is not defined