fix(errorHandler): async error handling for watchers

[hello-brsd]

Added async error handling for watchers and immediate watchers

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
• All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
• New/updated tests are included

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
Fixes #9625
Fixes #10009

[jfgodoy]

I'm waiting for this.
@hello-brsd you should squash your commits into one

[posva]

no need to squash your commits, we already do when merging 😉

[posva]

Hey, sorry for the delay and thank you for this!
Could you add a test case in the errorCaptured.spec.js file as well? The test should pass already as the invokeWithErrorHandling already handles it, but it will be nice to have a test case for it 😀
The rest seems to be good!

[hello-brsd]

@posva Thank you for the review, i added some extra test case to the errorCaptured.spec.js.

[abhipanda]

@posva - Is there an ETA for this merge ?

[mvirkkunen]

I just spent half an hour trying to figure out why my error handler wasn't getting called because I assumed all callback handling was already updated to support async functions. Would be really nice if this could be merged.

[Ishadimu]

Great work @hello-brsd! Until this is merged, I'm having to write an interim solution using axios interceptors along with vuex. 😬

@posva Thanks for approving the PR. Any updates on merge ETA?

[posva]

Sorry, I cannot provide any ETA 😓

[caiquecastro]

Any updates?

[mvirkkunen]

I would also like to know what the status is on this because I've been bitten by this multiple times by now, and the fix seems very straightforward. I see Vue 2.x hasn't had a release with anything besides bug fixes for a while, so is this something you would even consider merging anymore? Or is all the focus on Vue 3 now?

[rogierpennick]

Any updates on this? Our error handling would be greatly improved by this because we use a lot of async watches in our code. I'd really like to avoid having to resort to workarounds!

[OzCroot]

Can this please be reviewed?

[msokk]

@OzCroot Looks like this is already approved a while ago, @posva any newer ETA for this to land?

Documentation for errorHandler says:

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

and there is a 2.6.0+ update section that mentions added async support:

In addition, if any of the covered hooks or handlers returns a Promise chain (e.g. async functions), the error from that Promise chain will also be handled.

Overall one would expect from documentation that async watchers would work with global error handler, but currently it is not so 🙂

[berniegp]

Here`s a fix I came up with until this PR 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);
};