Vue 使用 errorHandler, warnHandler 即时拦截网页错误

在前端其中一个头痛的问题就是网页 Bug，我会想知道使用者在前端操作上遇到了什麽问题，因此在 Vue 中，你可以透过 errorHandler 拦截网页错误，你可以即时抓到这些错误讯息并修正，用法也非常简单

在 main.js 中

import Vue from 'vue'
...

Vue.config.errorHandler = function(err, vm, info) {
  console.log(err.toString())
}

Vue.config.warnHandler = function(err, vm, trace) {
  console.log(err, trace)
}

...
Vue.config.productionTip = false

我的作法是遇到错误就丢到 Slack 频道，很即时就可以知道当下使用者遇到了什麽问题。我现在 Vue 的专案基本上都会有这样的操作

注意：warnHandler 在正式环境是不会起作用的，因此程序码中的 productionTip = false 为必要设定

原文出处：https://ianakaberlin.medium.com/vue-%E4%BD%BF%E7%94%A8-errorhandler-warnhandler%E5%8D%B3%E6%99%82%E6%94%94%E6%88%AA%E7%B6%B2%E9%A0%81%E9%8C%AF%E8%AA%A4-vue-errorhandler-warnhandler-%E4%BC%8A%E6%81%A9%E8%B8%A9%E5%9D%91%E7%AD%86%E8%A8%98-e0a253fa12c9