vue-exception-captor

vue-exception-captor

本项目以Vue插件方式应用与Vue工程中，用于捕获Vue前端工程中出现的全局异常、Vue组件异常、Promise异常，并支持HTTP接口方式上送到后台服务进行分析统计。异常捕获主要来自以下几个钩子函数：

• Vue.config.errorHandle

  捕获Vue组件异常
  

• window.onerror

  1. Vue组件内的同步异常，无法被window.onerror捕获
  2. Vue组件内部的定时器异常，可以被window.onerror捕获
  3. window.onerror不能捕获promise异常
  

• window.onunhandledrejection

  捕获Promise异常
  

使用说明

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,
})

• productName：产品名字，用于在异常分析平台分类，默认为unknown
• username：用于标识异常来自哪个用户，默认为unknown
• reportUrl：上报异常的Http接口Url
• disabled：是否停止上报，默认为false
• console：是否开启控制台打印，默认为false

安装完插件后，会向vue注册两个属性

• Vue.prototype.$exceptionCaptor

  在Vue实例中使用该方法设置username，使得上报的异常可以标识来自哪个用户（只需要在用户名变化后调用一次，后续所有上报的异常均使用该用户名）

  this.$exceptionCaptor.setUserName(userName)
  

• Vue.prototype.$reportException

  在Vue实例中使用以下方法上报异常

  • type：异常类型，vue.errorHandle、window.onerror、window.onunhandledrejection或者自定义的类型
  • error：Error对象实例
  • message：描述
  • level：异常等级

  this.$reportException(type,error,message,level)