vue.js - 如何从组件内的单个点捕获 vuejs 错误

Question

我有一个组件，我在 catch 中使用了很多带有 then().catch() 的 axios 我总是抛出 console.error() 像:

axios.get(
 //...
).then(
 //...
).catch(
 error => {
  console.error(..)
 }
)

还有其他几个地方我也抛出错误。我正在寻找是否有全局处理错误的方法。我知道也许对于 axios 我可以使用拦截器，但是 vue 组件是否可以捕获错误，所以我可以将它们统一在一个函数中？

Answer 1

Vue API 提供了the errorHandler ，但它不会捕获方法中的错误(强调我的):

Assign a handler for uncaught errors during component render function and watchers.

示例如下。

组件渲染过程中的错误处理:

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  data: {
    people: [
      {name: 'Check the console', address: {zip: 4444}},
      {name: 'No address',     /* address: {zip: 5555} */}
    ]
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>
<template id="person-template">
  <div>
    Name: <b>{{ person.name }}</b> - Zip: {{ person.address.zip }}
  </div>
</template>
<div id="app">
  <div v-for="person in people">
    <person :person="person"></person>
  </div>
</div>

观察者内部的错误处理:

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  data: {
    message: "Some message"
  },
  watch: {
    message() {
      console.log(this.message.trim());
    }
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>

<div id="app">
  Message: {{ message }}
  <br>
  <button @click="message = null">click here to set message to null and provoke watcher error</button>
</div>

但是...

...不幸的是，errorHandler 不适用于方法:

Vue.config.errorHandler = function (err, vm, info)  {
  console.log('[Global Error Handler]: Error in ' + info + ': ' + err);
};

Vue.component('person', {template: '#person-template', props: ['person']});
new Vue({
  el: '#app',
  methods: {
    goMethod() {
      console.log(this.invalidProperty.trim());
    }
  }
})

<script src="https://unpkg.com/vue@2.5.14/dist/vue.min.js"></script>

<div id="app">
  <button @click="goMethod">click to execute goMethod() and provoke error that will NOT be handled by errorHandler</button>
</div>

最后:

I know maybe for the axios I can user interceptor but does vue components have away to catch errors, so I can unify them inside one function?

最重要的是，目前还没有办法在 Vue 中将它们统一到一个函数中。

所以你的猜测是正确的，你最好的选择是定义axios interceptors :

Axios Interceptors

You can intercept requests or responses before they are handled by then or catch.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });