Skip to content

Comments

fix(vue): Remove deprecated next callback from router instrumentation#19476

Open
YevheniiKotyrlo wants to merge 1 commit intogetsentry:developfrom
YevheniiKotyrlo:fix/vue-router-next-deprecation
Open

fix(vue): Remove deprecated next callback from router instrumentation#19476
YevheniiKotyrlo wants to merge 1 commit intogetsentry:developfrom
YevheniiKotyrlo:fix/vue-router-next-deprecation

Conversation

@YevheniiKotyrlo
Copy link

Summary

The Vue Router navigation guard registered by instrumentVueRouter declares a third next parameter, which triggers a deprecation warning in Vue Router 4.x+:

[Vue Router warn]: The next() callback in navigation guards is deprecated. Use return values instead.

Vue Router uses Function.length to detect whether a guard expects the legacy next callback. Since the guard declares 3 parameters (to, _from, next), Vue Router enters callback mode and emits the deprecation warning at runtime.

This PR removes the next parameter entirely. Vue Router automatically resolves navigation for guards with length < 3 via its return-based pattern, so calling next() was already a no-op in Vue Router 4+. The if (next) { next(); } block was only needed for Vue Router 2/3 compatibility, which is no longer supported by @sentry/vue v8+.

Relates to #8349

Changes

  • Removed next parameter from the beforeEach guard in instrumentVueRouter
  • Removed the if (next) { next(); } compatibility block
  • Updated VueRouter interface to reflect the 2-parameter signature
  • Updated all tests to remove mockNext usage
  • Replaced the "doesn't throw when next is not available" test with a Function.length assertion that enforces the guard uses the modern return-based pattern

Test plan

  • Existing unit tests updated and passing (80/80)
  • New Function.length assertion prevents future regressions
  • Verified fix eliminates the deprecation warning at runtime in a Vue Router 4/5 application

@YevheniiKotyrlo
Copy link
Author

Thanks for the review. This concern does not apply here — the next() callback compatibility was only relevant for Vue Router 3.x, which is part of the Vue 2 ecosystem.

Vue Router version timeline:

  • Vue Router 3.x (Vue 2) — guards resolve exclusively via next() callback. EOL alongside Vue 2 on December 31, 2023.
  • Vue Router 4.0.0 (Dec 7, 2020, Vue 3) — introduced return-based guards. Uses Function.length to detect the legacy next pattern: guards with length < 3 auto-resolve without next().
  • Vue Router 5.0.0 (Jan 29, 2026) — continued the modern API.
  • Vue Router 5.0.3 (Feb 19, 2026) — added a formal runtime deprecation warning for the next() callback pattern, which is what this PR fixes.

Since Vue Router 4.0+ (the only router for Vue 3), guards with length < 3 are automatically resolved via guardToPromiseFn — no next() call needed. By removing the third parameter, Function.length drops below 3, and Vue Router handles resolution implicitly. This is the officially recommended pattern per the Vue Router navigation guards documentation.

The if (next) { next(); } block was a backward-compatibility shim for Vue Router 3.x. Keeping it causes every @sentry/vue user on Vue Router 5.0.3+ to see deprecation warnings on every navigation — a worse trade-off than maintaining compatibility with an EOL router version.

Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @YevheniiKotyrlo thanks for opening the PR! Unfortunately, we still guarantee support for Vue 2 and Vue router 2 and 3. IIUC, this warning is shown on navigations for Vue router 5+? This isn't great so I understand why you want to see this fix.

Is there a way we can achieve fixing this without breaking anyone on older Vue router versions? I understand they're EOL but we can't just stop support within a major version of the SDK.

@YevheniiKotyrlo YevheniiKotyrlo force-pushed the fix/vue-router-next-deprecation branch from d111c2c to 83ad5c2 Compare February 23, 2026 18:59
@YevheniiKotyrlo
Copy link
Author

Good point — updated the PR to preserve Vue Router 2/3 backward compatibility.

The root cause is that Vue Router's guardToPromiseFn checks Function.length to decide the resolution strategy: guards with length < 3 auto-resolve via return value, while length >= 3 enters legacy callback mode. In Vue Router 5.0.3, the next callback passed to guards was wrapped with withDeprecationWarning(), so calling it emits the console warning.

The fix uses two techniques:

  1. Rest params (...rest) instead of a named next parameter — rest params don't count toward Function.length, so the guard has length === 2 and Vue Router 4+/5+ uses the modern return-based pattern (no warning).
  2. Runtime version detection ('mode' in router) — Vue Router 3 exposes a mode property ('hash' | 'history' | 'abstract'), while Vue Router 4+ replaced it with options.history. When a legacy router is detected, next() is called via rest[0] to resolve the guard as required by Vue Router 3.

This way Vue Router 3 users still get next() called, and Vue Router 4+/5+ users get auto-resolution without the deprecation warning.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants