vue应用中使用错误监控与处理

前言

在vue应用的开发中，错误监控和处理大致分为三部分：代码层面的错误，请求上的错误，页面级别；下面依次根据这三部分错误给出处理方案

 

 

代码层面的错误

如果你开启了eslint在编写代码的时候就会提示错误。如： 

配合eslint基本上可以在开发过程中就将错误提示处理，在开发中就已经解决了，但是因为有

当然还有很多不能被eslint检查出来的错误，vue 也提供了全局错误处理钩子errorHandler

• 类型：Function

• 默认值：undefined

• 用法：

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。VUE官方文档介绍：

从 2.2.0 起，这个钩子也会捕获组件生命周期钩子里的错误。同样的，当这个钩子是 undefined 时，被捕获的错误会通过 console.error 输出而避免应用崩溃。

从 2.4.0 起，这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。

从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。

下面我们看一下实际情况，在项目的某个组件中抛出错误

<template>
  <div @click="clickerror">error</div>
</template>
 
<script>
  export default {
    name: "Error",
    mounted() {
      this.mounterror()
    },
    methods: {
      mounterror() {
        throw new Error("抛出mount错误")
      },
      clickerror() {
        throw new Error("抛出click错误")
      }
    }
  }
</script>

然后在main.js中配置错误捕获的钩子函数（直接在main.js文件中添加下面代码）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false
Vue.config.errorHandler = (err, vm, info) => {
  console.error('通过vue errorHandler捕获的错误')
  console.error(err)
  console.error(vm)
  console.error(info)
  
  // 在这个方法内可以将捕获到的错误进行上报到后台或者发送错误信息到 node 中间层
  // 上报到后台之后，在请错误请求到页面中进行可视化
}

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

也可以使用下面两种方式进行捕获错误

window.onerror = function(message, source, lineno, colno, error) {
  post('error', {
    data: {
      error: error.stack
    }
  });
};

window.addEventListener('error', (event) => {
  post('error', {
    data: {
      error: event.error.stack
    }
  });
});

对接第三方监控平台

错误追踪服务 Sentry 和 Bugsnag 都通过此选项提供了官方支持。还有fundebug

fundebug查看这篇文章：错误异常监控神器 fundebug

Sentry查看这篇文章：暂定

Bugsnag查看这篇文章：暂定

vue的错误处理 errorHandler 源码

重新定义错误处理方法

直接使用try catch方式

 

请求上的错误处理

 

页面级别