vue-exception-captor
Version:
用于捕获Vue前端工程中的全局异常、Promise异常,并支持HTTP模式上报到后台存储
54 lines (48 loc) • 2.04 kB
Markdown
# vue-exception-captor
本项目以Vue插件方式应用与Vue工程中,用于捕获Vue前端工程中出现的全局异常、Vue组件异常、Promise异常,并支持HTTP接口方式上送到后台服务进行分析统计。异常捕获主要来自以下几个钩子函数:
1. Vue.config.errorHandle
```
捕获Vue组件异常
```
2. window.onerror
```
1. Vue组件内的同步异常,无法被window.onerror捕获
2. Vue组件内部的定时器异常,可以被window.onerror捕获
3. window.onerror不能捕获promise异常
```
3. window.onunhandledrejection
```
捕获Promise异常
```
## 使用说明
```javascript
npm install vue-exception-captor
import vue-exception-captor from "vue-exception-captor"
Vue.use(vue-exception-captor,{
productName: 'psdc',
username:'testuser',
reportUrl: '/event-tracking/exceptions',
disabled: process.env.NODE_ENV !== 'production',
console: true,
})
```
1. productName:产品名字,用于在异常分析平台分类,默认为unknown
2. username:用于标识异常来自哪个用户,默认为unknown
3. reportUrl:上报异常的Http接口Url
4. disabled:是否停止上报,默认为false
5. console:是否开启控制台打印,默认为false
安装完插件后,会向vue注册两个属性
1. Vue.prototype.$exceptionCaptor
在Vue实例中使用该方法设置username,使得上报的异常可以标识来自哪个用户(只需要在用户名变化后调用一次,后续所有上报的异常均使用该用户名)
```javascript
this.$exceptionCaptor.setUserName(userName)
```
2. Vue.prototype.$reportException
在Vue实例中使用以下方法上报异常
1. type:异常类型,vue.errorHandle、window.onerror、window.onunhandledrejection或者自定义的类型
2. error:Error对象实例
3. message:描述
4. level:异常等级
```javascript
this.$reportException(type,error,message,level)
```