fix(#9511): avoid promise catch multiple times

[shasharoman]

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:
fixed #9511

In some cases, invokeWithErrorHandling will have nested calls, and Promise will independently catch multiple times, resulting in multiple calls to handleError.

Look at a sample code：

var p = Promise.reject('some err');

p.catch(() => console.log('1'));  // p = p.catch(...)
p.catch(() => console.log('2'));

The above code will output 1 and 2, but if you reassign the first catch call to p, it will not output 2.

[shasharoman]

npm run test:ssr will also fail before my code is submitted. What should I do?

[posva]

Could you add a test case please?

[shasharoman]

Could you add a test case please?

I added a test case after your reminder, but I still don't know how to handle npm run test:ssr failure, because the original dev branch on my own computer can't pass ssr related tests.

[posva]

I think the test should go with test/unit/features/error-handling.spec.js

[shasharoman]

I think the test should go with test/unit/features/error-handling.spec.js

According to my understanding of the bug, the test case under test/unit/features/error-handling.spec.js might look like this:

it('config.errorHandler should capture async errors once', done => {
    let times = 0
    Vue.config.errorHandler = function () {
      times++
    }
    Vue.component('error-div', {
      mounted: function () {
        this.$emit('error')
      },
      render: function (h) {
        return h('div')
      }
    })
    const vm = new Vue({
      template: '<error-div @error="onError"></error-div>',
      methods: {
        onError: function() {
          return Promise.reject(new Error('async error'))
        }
      }
    }).$mount()

    Vue.nextTick(() => {
      expect(times).toBe(1)
      done()
    })
  })

The above test case will result in nested calls, but there are no other similar scenes in Vue that will cause such nested calls, which I don't know.

I think the above test case, other developers will look a bit confusing in the future, and in the test/unit/modules/util/error/ directory, it will be easier to understand in the future.

The essential reason for this problem is that Promise is not used correctly. This problem is exposed when the method is nested, so I think it is more reasonable to write test cases for the method.

If you still think that I should write test cases in test/unit/features/error-handling.spec.js, I will write the above test cases to this file and submit them again, or move the previously submitted test cases to this file.

My native language is not English, so I need to use google translation often, I hope you can understand. And I am also submitting code to Vue for the first time, not very familiar with the project, thank you very much for your review.