Errors in `computed` bypass `onErrorCaptured`

[jak-ch-ll]

Vue version

3.4.38

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-kwgofp?file=src%2Fcomponents%2FNotCaptured.vue

Steps to reproduce

Preparations: Open the browser console

1. Click 'Throw'

What is expected?

The same as when clicking 'Throw captured':

• The UI should change according to the logic in App.vue
• The error should not be visible in the console, only 'Capturing error'

What is actually happening?

• The UI does not change
• The error is visible in the console
• 'Capturing error' is not visible in the console

System Info

No response

Any additional comments?

Basic analysis

In our Nuxt application I was able to reproduce the error without using watch and instead by using the computed property directly in a template. After updating this was no longer possible and I was able to pinpoint this to version 3.4.32 and most likely the changes in ee0248a

It seems that the changes made it so, that the Scheduler flushJobs function now passes the instance from the jobs, which creates the desired behavior in the handleError function. But the jobs created for the watch keys seem to be missing that instance.

How did we run into the bug?

We have a Nuxt application and are using TanStack Query. For most API requests we need some information from the current URL that needs to be validated against our session (also coming from the API). This means in the example below role starts as undefined and then either switches to a valid role or throws, so our ErrorBoundary component can handle it. But because TanStack is using Vue's watch under the hood for the queryKey, we are running into this issue.

function useRole() {
  const { data: session } = useSession();
  const route = useRoute();

  return computed(() => {
    if (!session.value) return;

    const role = route.query.roleId as string;

    if (!isValidRole(role, session) {
      throw new Error('Invalid Role');
    }

    return role;
  });
}

function someCustomQuery() {
  const role = useRole();

  return useQuery({
    queryKey: [role],
    ...
  })
}

[edison1105]

It seems never worked. see Playground with v3.4.16

[jak-ch-ll]

@edison1105 Ah it seems we had the same idea, our fixes are identically. I added a test as well, which you can steal for your PR if you want, since yours was first

[edison1105]

@jak-ch-ll
Even though I submitted it first, it's not important. Keep your PR. Thank you for your PR, and feel free to contribute more.