fix(runtime-core): handle error in async watchEffect

packages/runtime-core/__tests__/errorHandling.spec.ts

@@ -8,7 +8,8 @@ import {
  ref,
  nextTick,
  defineComponent,
- watchEffect
+ watchEffect,
+ createApp
 } from '@vue/runtime-test'
 
 describe('error handling', () => {
@@ -536,5 +537,51 @@ describe('error handling', () => {
  log.mockRestore()
  })
 
+ //# 3127
+ test('handle error in watch & watchEffect', async () => {
+ const error1 = new Error('error1')
+ const error2 = new Error('error2')
+ const error3 = new Error('error3')
+ const error4 = new Error('error4')
+ const handler = jest.fn()
+
+ const app = createApp({
+ setup() {
+ const count = ref(1)
+ watch(
+ count,
+ () => {
+ throw error1
+ },
+ { immediate: true }
+ )
+ watch(
+ count,
+ async () => {
+ throw error2
+ },
+ { immediate: true }
+ )
+ watchEffect(() => {
+ throw error3
+ })
+ watchEffect(async () => {
+ throw error4
+ })
+ },
+ render() {}
+ })
+
+ app.config.errorHandler = handler
+ app.mount(nodeOps.createElement('div'))
+
+ await nextTick()
+ expect(handler).toHaveBeenCalledWith(error1, {}, 'watcher callback')
+ expect(handler).toHaveBeenCalledWith(error2, {}, 'watcher callback')
+ expect(handler).toHaveBeenCalledWith(error3, {}, 'watcher callback')
+ expect(handler).toHaveBeenCalledWith(error4, {}, 'watcher callback')
+ expect(handler).toHaveBeenCalledTimes(4)
+ })
+
  // native event handler handling should be tested in respective renderers
 })

packages/runtime-core/src/apiWatch.ts

@@ -200,7 +200,7 @@ function doWatch(
  if (cleanup) {
  cleanup()
  }
- return callWithErrorHandling(
+ return callWithAsyncErrorHandling(
  source,
  instance,
  ErrorCodes.WATCH_CALLBACK,