JsTracker前端监控说明
<h3>文档记录</h3>
<table>
<thead>
<tr>
<th>编号</th>
<th>描述</th>
<th>作者</th>
<th>日期</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.0</td>
<td>JsTracker前端监控说明</td>
<td>Meeler</td>
<td>2018-10-30</td>
<td></td>
</tr>
<tr>
<td>------------</td>
<td>------------</td>
<td>------------</td>
<td>------------</td>
<td>------------</td>
</tr>
</tbody>
</table>
<hr />
<h5>端口占用</h5>
<ol>
<li>9000 storage</li>
<li>9001 acceptor-pushProjectUrl</li>
<li>9002 openapi-pushProjectUrl</li>
<li>9004 offlineLog 离线日志</li>
<li>9500 openapi</li>
<li>9005 dispatcher-mq-消息分发</li>
<li>9006 acceptor-mq-消息接收</li>
<li>9007 js-report 上报端口</li>
<li>9010 acceptor 默认端口</li>
<li>27017 mongodb 默认端口</li>
<li>3306 mysql 默认端口</li>
</ol>
<p>Mysql数据库配置（dev:XXXXX@119.23.17.55:3306/badjs）
1.badjs-web/project.debug.json
2.badjs-web/project.json</p>
<p>mongodb数据库配置（mongodb://127.0.0.1:27017/badjs），3091.mzhen.cn
1.badjs-storage/project.debug.json
2.badjs-storage/project.json</p>
<h3>Vue 产品监控加码说明</h3>
<h4>上报ID申请（ID为空，则不能上报）</h4>
<ol>
<li>
<p>给需要添加前端监控的产品申请上报ID：<a href="http://3091.mzhen.cn:9008/">http://3091.mzhen.cn:9008/</a> 。
gitlab地址：<a href="https://gitlab.mzsvn.com/content/JsTracker.git">https://gitlab.mzsvn.com/content/JsTracker.git</a>
操作步骤：注册新用户-》我的业务-》申请接入
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/3705802a1f24012310e37102a0e69f36?showdoc=.jpg" alt="" />
注：业务URL必须真实，但可以为*，即不对URL做校验。</p>
</li>
<li>平台管理员（admin）审核
操作步骤：申请项目列表-》待审核
<img src="https://www.showdoc.cc/server/api/common/visitfile/sign/6cdd2bf56d47ab640b336393e1792799?showdoc=.jpg" alt="" /></li>
<li>将获取的ID（文档测试id为2）应用于产品加码监控。</li>
</ol>
<h4>产品加码 （二选一）</h4>
<h5>加码方式一、 npm加码</h5>
<ol>
<li>install
npm install badjs-report --save</li>
<li>main.js配置</li>
</ol>
<pre><code class="language-java">// 引入模块
import BJ_REPORT from 'badjs-report';
import VueCookie from 'vue-cookie';
Vue.use(BJ_REPORT);
Vue.use(VueCookie);</code></pre>
<pre><code class="language-java">// 初始化
BJ_REPORT.init({
id: 2, // 上报 id, 不指定 id 将不上报
uin: decodeURI(VueCookie.get('wechatName') || '秒出用户'),
delay: 1000, // 当 combo 为 true 可用，延迟多少毫秒，合并缓冲区中的上报（默认）
url: 'https://dataapi.cn.miaozhen.com/jstracker/badjs', // 指定上报地址
ignore: [/Script error/i], // 忽略某个错误
random: 1, // 抽样上报，1~0 之间数值，1为100%上报（默认 1）
repeat: 50, // 重复上报次数(对于同一个错误超过多少次不上报)
// 避免出现单个用户同一错误上报过多的情况
onReport: function (id, errObj) {
console.log(id, errObj);
}, // 当上报的时候回调。 id: 上报的 id, errObj: 错误的对象
submit: null, // 覆盖原来的上报方式，可以自行修改为 post 上报等
ext: {
clientName: "秒出-平台版-测试环境"
}, // 扩展属性，后端做扩展处理属性。例如：存在 msid 就会分发到 monitor,
offlineLog: true, // 是否启离线日志 [默认 false]
offlineLogExp: 5, // 离线有效时间，默认最近5天
});</code></pre>
<pre><code class="language-java">// 系统错误捕获
const errorHandler = (error, vm)=>{
console.error('抛出全局异常');
console.error(vm);
console.error(error);
BJ_REPORT.report(error);
}
Vue.config.errorHandler = errorHandler;
Vue.prototype.$throw = (error)=> errorHandler(error,this);
Vue.prototype.BJ_REPORT = BJ_REPORT;</code></pre>
<p>至此可以自动对JS错误进行上报。如需手动上报一些信息，语法如下：</p>
<pre><code class="language-java">//主动上报错误日志
BJ_REPORT.report("error msg");
BJ_REPORT.report({
msg: "xx load error", // 错误信息
target: "xxx.js", // 错误的来源js
rowNum: 100, // 错误的行数
colNum: 100, // 错误的列数
});
try{
// something throw error ...
}catch(error){
BJ_REPORT.report(e);
}
//info上报，用于记录操作日志
BJ_REPORT.info("info");
//可以结合实时上报，跟踪问题; 不存入存储
BJ_REPORT.debug("debug");
//记录离线日志
BJ_REPORT.offlineLog("offlineLog");</code></pre>
<h5>加码方式二、引入外部JS</h5>
<ol>
<li>JS 文件地址：
<a href="https://gitlab.mzsvn.com/content/CONT-CLOUD-FE/tree/develop/public/js">https://gitlab.mzsvn.com/content/CONT-CLOUD-FE/tree/develop/public/js</a></li>
<li>根据1将JS文件下载，必须放置在项目的静态文件夹下。（vue-cli放在static目录下，vue-cli3放在public文件夹下）</li>
<li>index.html页面引用</li>
</ol>
<pre><code class="language-java">// 引入文件
<head>
<script src="/js/bj-report-tryjs.js"></script>
<script src="/js/bj-wrap.js"></script>
<script src="/js/require.js"></script>
</head></code></pre>
<pre><code class="language-java">// 初始化配置
<body>
<script>
BJ_REPORT.init({
id: 2, // 上报 id, 不指定 id 将不上报
uin: decodeURI(VueCookie.get('wechatName') || '秒出用户'),
delay: 1000, // 当 combo 为 true 可用，延迟多少毫秒，合并缓冲区中的上报（默认）
url: 'https://dataapi.cn.miaozhen.com/jstracker/badjs', // 指定上报地址
ignore: [/Script error/i], // 忽略某个错误
random: 1, // 抽样上报，1~0 之间数值，1为100%上报（默认 1）
repeat: 10, // 重复上报次数(对于同一个错误超过多少次不上报)
// 避免出现单个用户同一错误上报过多的情况
onReport: function(id, errObj) {
console.log(id, errObj);
}, // 当上报的时候回调。 id: 上报的 id, errObj: 错误的对象
submit: null, // 覆盖原来的上报方式，可以自行修改为 post 上报等
ext: {
clientName: "秒出-平台版-测试环境"
}, // 扩展属性，后端做扩展处理属性。例如：存在 msid 就会分发到 monitor,
offlineLog: true, // 是否启离线日志 [默认 false]
offlineLogExp: 5, // 离线有效时间，默认最近5天
});
</script>
...
</body></code></pre>