错误异常监控神器 fundebug

前言

有时候，看到用户的反馈，我们往往会一脸茫然，因为反馈的信息太少了。

比如有用户反馈登录不了。为了解这个问题，一般的流程是这样的：首先试试自己能不能登录网站，发现没问题；然后查看后台日志，发现最近没有登录接口相关的报错；最后根据用户反馈的时间，去后台查日志记录。结果日志记录没有错误信息。

那这个问题没法解决了！除非找出用户的联系信息，和他去聊聊这个bug。

这样的情况很多，有时候及时有报错信息，还是一脸蒙逼，不知道为啥呢。

不过这个问题已经可以很好滴解决啦！Fundebug最近上线了一个新的大功能，叫做场景重现。其实直观理解就是加了个视频录制，把用户出错前的行为习惯可视化的录制，然后绑定到对应的错误上。通过观看场景重现，可以直观的去理解用户是如何触发错误的。如下面所示：

是不是很惊艳！不仅可以看到报错相关信息，还可以看到用户的操作视频。

 

 

Vue项目实例测试

我们需要将Fundebug的JavaScript监控插件接入，首先在Fundebug网站创建一个Vue的监控项目。

然后接入代码，接入部分很多代码，只能截图一部分，不过还是比较简单的，你只需要复制黏贴就可以了。

然后先要创建好我们的vue项目，这里就不过多的说明了，直接将fundebug插件接入项目

第一步：安装插件

npm install fundebug-javascript fundebug-vue --save

第二步：在main.js引入插件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as fundebug from "fundebug-javascript"
import fundebugVue from "fundebug-vue"
fundebug.apikey = "fasdfasfasdfas42314213412344134k123l41234123k4j123l4kjl123k4j"
fundebugVue(fundebug, Vue)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后，在添加errorHandler代码(main.js文件中)：

Vue.config.errorHandler = function (err, vm, info) {
  let propsData = vm.$options && vm.$options.propsData
  fundebug.notifyError(err, {
    metaData: {
      propsData: propsData,
      info: info
    }
  })
}

具体配置可以查看API：https://docs.fundebug.com/notifier/javascript/api/

配置好之后，在自己项目中造一个错误

当触发了错误之后，来我们试试Fundebug能抓到怎样的错误。

基本的报错堆栈信息都有

堆栈信息

TypeError

Cannot read property '_normalized' of undefined

• at normalizeLocation (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1296:12)
• at VueRouter.resolve (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2623:18)
• at Proxy.render (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:424:22)
• at VueComponent.Vue._render (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3536:22)
• at VueComponent.updateComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4054:21)
• at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4467:25)
• at new Watcher (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4456:12)
• at mountComponent (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:4061:3)
• at VueComponent.Vue.$mount (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:8399:10)
• at init (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:3115:13)

场景重现（这个功能需要付费所以不做演示）