errorHandler not working in Promises / async

[plehnen]

Version

2.5.13

Reproduction link

https://jsfiddle.net/zr7rz6xh/8/

Steps to reproduce

Vue.config.errorHandler = function (err, vm, info) {
alert("handler");
};

new Vue({
el: '#app',
mounted: function() {
return new Promise(function(resolve, reject) {
throw new Error('err');
});
}
})

What is expected?

errorHandler should be called

What is actually happening?

Uncaught (in promise) Error: err

---

Vue.config.errorHandler is not called if the error occurs inside a promise or await/async function.

I want to use the created hook with an await call, so it has to be async. But then the errorHandler is ignored.

[nickmessing]

I like that idea, since async/await is getting more common that would probably be a nice thing to have.

[techpines]

This feature would be a great add! Here's another example of how it currently works:

new Vue({
  el: '#app',
  methods: {
    async asyncMethod() {
      throw new Error('This does NOT get caught by Vue') // wish this were caught
    },
    regularMethod() {
      throw new Error('This gets caught by Vue') // yay!
    },
  },
})

As a workaround, you can catch the error in a try / catch block. But I couldn't find a way to trigger an error on the Vue instance. Is this possible?

  methods: {
    async asyncMethod() {
      try {
        throw new Error('This does NOT get caught by Vue')
      } catch (err) {
        // Can you trigger the Vue instance's 'errorCaptured' callback from here?
      } 
    } 
  },

I thought maybe the convention of emitting an error event might work. I think that or something similar could be helpful.

this.$emit('error', error) // no special treatment of 'error' event

[01045972746]

I think it is very comfortable for Vuex actions. I wish to be implemented asap.

vuex/actions.js

	async POST_SOMETHING({commit}, params) {
		await requireAuthAction()

		const { data } = await axios.post(`/api/something`, params)
		commit("POST_SOMETHING", data)
	},

main.js

Vue.config.errorHandler = (err) => {
	alert(err.message)
}

[Doeke]

Until this issue is fixed I am using a hacky mixin to catch errors thrown in async methods and send them to errorHandler:

import Vue from 'vue'

// This mixin fixes following issue:
// errorHandler does not work with async component methods
// https://github.com/vuejs/vue/issues/7653

export default {
  beforeCreate() {
    const methods = this.$options.methods || {}
    Object.entries(methods).forEach(([key, method]) => {
      if (method._asyncWrapped) return
      const wrappedMethod = function (...args) {
        const result = method.apply(this, args)
        const resultIsPromise = result && typeof result.then == 'function'
        if (!resultIsPromise) return result
        return new Promise(async (resolve, reject) => {
          try {
            resolve(await result)
          } catch (error) {
            if (!error._handled) {
              const errorHandler = Vue.config.errorHandler || console.error
              errorHandler(error)
              error._handled = true
            }
            reject(error)
          }
        })
      }
      wrappedMethod._asyncWrapped = true
      methods[key] = wrappedMethod
    })
  },
}

[ErikBjare]

@Doeke Any way to get that working with the errorCaptured hook? (from a glance it doesn't seem like it would)

[Doeke]

@ErikBjare you could loop through this component and $parents after or before errorHandler(error) to check for existance of vm.$options.errorCaptured hooks. Personally I went back to catching exceptions manually again in components, and using unhandledrejection/rejectionhandled to send actual unhandled rejections to analytics (which only works on Chrome)

[jblazevic]

Hi, I expanded Doeke's mixin to simulate propagation to errorCaptured hooks, which may also be async. Not sure it works 100% to spec, but it may help someone temporarily until this issue is resolved:

import Vue from 'vue'

// This mixin fixes following issue:
// errorHandler does not work with async component methods
// https://github.com/vuejs/vue/issues/7653

async function propagateErrorCaptured(component, error, vm) {
    let continuePropagation = true
    const ec = component.$options.errorCaptured
    if (ec instanceof Array) {
        for (let i = 0; i < ec.length; i++) {
            continuePropagation = ec[i].apply(component, [error, vm])
            if (typeof continuePropagation === "object" && typeof continuePropagation.then === "function") {
                // wait for the promise
                continuePropagation = await continuePropagation
            }
            if (!continuePropagation) break;
        }
    }
    if (component.$parent && continuePropagation) {
        return await propagateErrorCaptured(component.$parent, error, vm)
    } else {
        return continuePropagation
    }
}

export default {
    beforeCreate() {
        const methods = this.$options.methods || {}
        Object.entries(methods).forEach(([key, method]) => {
            const wrappedMethod = function (...args) {
                const result = method.apply(this, args)
                const resultIsPromise = result && typeof result.then == 'function'
                if (!resultIsPromise) return result
                return new Promise(async (resolve, reject) => {
                    try {
                        resolve(await result)
                    } catch (error) {
                        const continuePropagation = await propagateErrorCaptured(this, error, this)
                        if (!continuePropagation) {
                            if (Vue.config.errorHandler) {
                                Vue.config.errorHandler(error, this)
                            } else {
                                reject(error)
                            }
                        }
                    }
                })
            }
            methods[key] = wrappedMethod
        })
    },
}

[miser]

@Doeke Hi， your code is nice, but if it catch error by reject('......') ?