Meisha-fe-watch NPM

梅沙科技前端监控脚本

收集运行于浏览器端JS的错误信息、记录页面加载时间、记录AJAX出错信息并发送至后端统计与分析。

开发配置

git clone此项目；
npm install；
npm run dev，在Gulp下继续开发；
npm run build构建用于生产环境的meisha-watch.js。

使用方法

引入

npm install --save meisha-fe-watch，支持以下任一方式加入前端项目中：

1、作为JS文件通过<script>引入html中，但必须保证在所有JS脚本的最前执行：

<script src="/meisha-fe-watch/dist/meisha-watch.js"></script>

2、支持ES6+的import引入：

import MeishaWatch from 'meisha-fe-watch';

3、支持CommonJS语法引入：

const MeishaWatch = require('meisha-fe-watch');

配置

引入后，在项目入口调用MeishaWatch.init()方法全局配置：

MeishaWatch.init({
  isReport: true, // 是否向后端提交MeishaWatch收集信息，默认为true，可自行检测当前环境，在开发、测试、预发布环境关闭，如：isReport: !/127.0.0.1|192.168|localhost|test-|pre-/.test(window.location.host)
  reportURL: '/path/to/report', // 向后端提交MeishaWatch收集信息的URL(必填，否则无法提交)
  projectId: 'project id', // 日志系统设置的项目英文名（必填，否则无法提交）
});

对于使用Vue 2.2.0以上版本的项目，还需要以下配置：

import Vue from 'vue';
...
Vue.use(MeishaWatch.useVue()); // 添加MeishaWatch为Vue插件
...
new Vue({
  ...
});

为了能定位到出错的用户，在用户登录后，还要设置用户的识别信息：

MeishaWatch.setUser(userId); // userId可替换为任一能识别用户身份的信息，可以是任何能转换成JSON的类型

之后就可以愉快地使用了 :)

错误上报时机

1.进入系统时（进入系统会获取localStorage的_msLogs字段（注意⚠️：避免在业务系统中用到localstorage中的_msLogs字段）。

2.当前存储的log数大于等于5时。

3.每次捕获到一条错误信息，会同步到localstorage；每次执行错误上报，也会同步移除localstorage的_msLogs字段

MeishaWatch会自动进行错误上报，使用时无需关注细节。如果需要主动上报，可调用report方法。

MeishaWatch.report();

页面性能上报

如果需要主动上报页面设置的埋点耗时，可调用reportPageTime方法。

MeishaWatch.reportPageTime(name, time); // name为自定义标签，time为耗时

使用技巧

对于混淆压缩后的JS代码，可能无法定位到出错的具体位置，为了更精确地定位，可在代码中通过try catch捕获错误，并主动通过console.error输出，MeishaWatch代理了console，通过console.log、console.error等输出的错误信息都会记录。请去掉生产环境代码中多余的console.log，否则会当作错误处理。

对于使用Vue的项目，在定义组件时，请务必为组件命名，以便更快定位到报错的位置，如：

// main.vue
export default {
  name: 'Main',
  ...
}

另外，在生产模式构建后Vue的浏览器开发者工具devtool不可用，如果要快速开启，可在url参数加上devtools=true后刷新页面。

更新日志

v1.1.4

修复低版本浏览器类型判断的bug。

v1.1.2

上报字段logs新增createTime记录日志生成时间。

v1.1.1

若当前环境的配置属性isReport为false，不执行存储logs到localstorage的操作。
修复部分error未收集到localStorage的bug。

v1.1.0

新增接口客户端UA字段上报。
新增自定义页面性能上报。
原配置中的projectId的值改为原有字段partionId的值，并移除字段partitionId。
上报方式全部改为异步上报。
上报时机：
（1）进入系统时（进入系统会获取localStorage的_msLogs字段（注意⚠️：避免在业务系统中用到localstorage中的_msLogs字段）。
（2）当前存储的log数大于等于5时。
取消原有的iOS系统进入页面的初次上报机制