# vue-exception-captor
本项目以Vue插件方式应用以Vue工程中，用于捕获点击、搜索框回车搜索、路由切换等埋点数据，并支持HTTP接口方式上送到后台服务进行分析统计。

## 使用说明
```javascript
npm install vue-uv-tracker"

import vue-tracking from "vue-uv-tracker"
Vue.use(vue-tracking,{
    productName: 'psdc',
    username:'testuser',
    reportUrl: '/event-tracking/exceptions',
    disabled: process.env.NODE_ENV !== 'production',
    console: true,
    router: router
})
```
1. productName：产品名字，用于在异常分析平台分类，默认为unknown
2. username：用于标识异常来自哪个用户，默认为unknown
3. reportUrl：上报异常的Http接口Url
4. disabled：是否停止上报，默认为false
5. console：是否开启控制台打印，默认为false
6. router：vue-router实例，通过监听vue-route实例beforeEach钩子，捕获路由切换的相关信息。不传则表示不对路由埋点

安装完插件后，会向vue注册两个属性
1. Vue.prototype.$tracker
   
   在Vue实例中使用该方法设置username，使得上报的埋点数据可以标识来自哪个用户（只需要在用户名变化后调用一次，后续所有上报的异常均使用该用户名）
   ```javascript
   this.$tracker.setUserName(userName)
   ```
   
2. Vue.prototype.$reportTrackingData 
   
   在Vue实例中使用以下方法上报埋点数据
   1. eventName：事件类型，如buttonClick，XXXSearch...
   2. eventData:事件信息，JSON Object结构
   ```javascript
   this.$reportTrackingData(eventName,eventData)
   ```
3. track指令的使用说明：
   ``` javascript
   <button v-track="{eventName: 'buttonClick', eventData: {buttonName: 'submit'}}">Submit</button>
   ```
4. track-search指令的使用说明：
   ``` javascript
   <input v-track-search="{eventName: 'xxxSearch'}">Submit</input>
   ```