Vue.config.errorHandler and errorCaptured should capture rejected promised in watchers

[xiangnanscu]

Version

2.6.6

Reproduction link

Vue.config.errorHandler: https://jsfiddle.net/0aeufxmr/5/
errorCaptured option: https://jsfiddle.net/shenron/kbuymoz0/

Steps to reproduce

Just click click1 and click2 you will see the difference

What is expected?

when clicking click1, the message should be error response

What is actually happening?

message not changed

[xiangnanscu]

this is code:

<template>
<div id="app">
<button @click="changeTrigger1">click1</button>
<button @click="changeTrigger2">click1</button>
  <p>{{ message }}</p>
</div>
</template>

<script>
Vue.use(VueResource)

Vue.config.errorHandler = function (err, vm, info) {
  console.log('error catched',err)
  vm.message = err
}

new Vue({
  el: '#app',
  data: {
    trigger1: '',
    trigger2: '',
    message: 'Hello Vue.js!'
  },
  watch: {
     async trigger1(v) {
    	await this.fetchData()
    },
    async trigger2(v) {
    	try{
      	await this.fetchData()
      } catch (err) {
      	this.message = err
      }
    },
  },
  methods: {
    async fetchData() {
      await this.$http.get('/foooooooo')
    },
    changeTrigger1() {
    	this.trigger1 = Math.random()
    },
    changeTrigger2() {
    	this.trigger2 = Math.random()
    }
}
})
</script>

[KancerEzeroglu]

Hi @posva, is somebody working on this issue? If not, I would like to work on it.

[posva]

This issue has already an open pull request as the label suggests

[berniegp]

I put on my "hacker" hat and came up with a way to catch errors properly in watchers until #9484 is merged...

// Fix "Vue.config.errorHandler and errorCaptured should capture rejected promised in watchers"
// https://github.com/vuejs/vue/issues/10009
// Ugly monkey patching until https://github.com/vuejs/vue/pull/9484 is merged
const realWatch = Vue.prototype.$watch;
Vue.prototype.$watch = function $watchDetour(expOrFn, callback, options) {
  if (typeof callback === 'function') {
    if (this.$_watchCount === undefined) {
      this.$_watchCount = 0;
    }

    // Reroute $watch to $on which handles promise rejections properly
    const watchDetourEvent = `watchDetour_${this.$_watchCount}`;
    this.$_watchCount += 1;
    const realCallback = callback;
    this.$on(watchDetourEvent, (args) => { return realCallback.apply(this, args); });
    callback = (...args) => { this.$emit(watchDetourEvent, args); };
  }

  // realWatch will call back into $watchDetour with a function if callback wasn't one
  return realWatch.call(this, expOrFn, callback, options);
};