Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Errors in computed bypass onErrorCaptured #11624

Closed
Jak-Ch-ll opened this issue Aug 15, 2024 · 3 comments · Fixed by #11626
Closed

Errors in computed bypass onErrorCaptured #11624

Jak-Ch-ll opened this issue Aug 15, 2024 · 3 comments · Fixed by #11626
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@Jak-Ch-ll
Copy link
Contributor

Jak-Ch-ll commented Aug 15, 2024

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
Copy link
Member

It seems never worked. see Playground with v3.4.16

@edison1105 edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Aug 15, 2024
@Jak-Ch-ll
Copy link
Contributor Author

@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
Copy link
Member

@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.

@github-actions github-actions bot locked and limited conversation to collaborators Sep 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
2 participants