feat(errors): sync/async error handling for lifecycle hooks and v-on handlers (#7653, #6953)

[enkot]

• Added async errors handling for lifecycle hooks and event handlers (issue link: errorHandler not working in Promises / async #7653).

Update:

• Added normal and async errors handling in v-on handlers from @coldino (issue link: errorCaptured and errorHandler should capture errors in v-on handlers #6953).

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:

[coldino]

Can we add error handling for v-on handlers to this? Both sync and async need to be caught for them.

I have working code and tests for this here: https://github.com/coldino/vue/commits/event-handler-errors. It would need very minor updates to work with the changes in this PR.

This will also address #6953.

[enkot]

@coldino
I think it will be great to address 2 issues in this PR. But what will be the proper way to merge changes? You can create pull request to this branch - "feature/async-errors-handling", and I will edit PR according to the changes from you ( for #6953 ).
P.S. or just create separate PR for #6953

[coldino]

@enkot The changes will overlap significantly as I would switch to using your handlePromiseError function, so I will create a PR for your branch. Note that in addition to the ones you implemented, I also added async error handling for:

• watcher callbacks
• nextTick callbacks
• invoked functions (v-on)
• directive hooks

Currently there are only tests for the v-on invoked function async+sync errors. I don't have enough experience with the testing system to add tests for all of them. If you are able to assist with this we can have much greater coverage for async error catching.

I will keep the hooks without tests in a separate commit so you can include/exclude as you choose.

[coldino]

I have only included the v-on checks in the PR as I didn't want to include changes with no tests and possibly delay this PR.

[humoyun91]

Does it support async methods which is called from hooks like created or mounted as most of the time one of the most common operations is to call some API to get some data from these hooks. Async methods which is bounded as event handlers are triggering errors as expected and errorCaptured is catching them but when the same async methods are called from created or mounted hooks, ErrorBoundary's errorCaptured is not catching anything. E.g., :

// LabelerAccount.vue
  mounted() {
    this.labelerInfo();
  },
  // ...
  async labelerInfo() {
    const response = await userInfo(this.userId);
  },


// Usage
<ErrorBoundary>
  <LabelerAccount />
</ErrorBoundary>

// `errorCaptured` hook of ErrorBoundary is not catching exceptions thrown from above usage

I checked it with Vue@2.7.10, it is not working