在某些时候开发我错误输入新变量的名称 . 抛出异常,但如果在Vue操作中的Promise上下文中调用代码,则不会在控制台上记录此异常 .

假设一个Vue动作返回一个抛出异常的Promise:

export const debug = ({}) => {
    return new Promise((resolve, reject) => {
        throw 'MyError';
    });
}

dispatch 调用该操作时,异常将被静音并且永远不会在控制台上记录 . 确保报告问题的最佳方法是什么?

一种显而易见的方法是为每个负责记录错误的 dispatch (或每个动作)添加一个 catch

// Each action
export const debug = ({}) => {
    return new Promise((resolve, reject) => {
        throw 'MyError';
    })
    .catch(err => {
        console.error(err);
    });
}

// Each dispatch
this.$store.dispatch('debug')
.catch(err => {
    console.error(err);
});

该解决方案看起来很重,只是记录错误 . 毕竟,这里的要点不是优雅地从错误中恢复,而是记录在Vuex操作上下文之外调用时将报告的内容 .

Vuex使用发出 vuex:error 消息的 catch 包装动作promises(请参阅vuex store.js ):

function registerAction (store, type, handler, local) {
  const entry = store._actions[type] || (store._actions[type] = [])
  entry.push(function wrappedActionHandler (payload, cb) {
    let res = handler({
      dispatch: local.dispatch,
      commit: local.commit,
      getters: local.getters,
      state: local.state,
      rootGetters: store.getters,
      rootState: store.state
    }, payload, cb)
    if (!isPromise(res)) {
      res = Promise.resolve(res)
    }
    if (store._devtoolHook) {
      return res.catch(err => {
        store._devtoolHook.emit('vuex:error', err)
        throw err
      })
    } else {
      return res
    }
  })
}

通用处理程序可以对 vuex:error 作出反应,但由于 store._devtoolHook 似乎也没有 .

处理在Vuex操作的上下文中抛出异常的Promise的最佳方法是什么?