Using vue-router 4.2.2 with `Sentry.vueRouterInstrumentation` result in TypeError next is not a function

[egistli-geezerbuild]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

7.55.2

Framework Version

Vue 3.3.4, Nuxt 3.5.3

Link to Sentry event

https://ebtex.sentry.io/issues/4252605919/?query=is%3Aignored&referrer=issue-stream&stream_index=3

SDK Setup

It's a nuxt plugin.

import * as Sentry from '@sentry/vue';
import { BrowserTracing } from '@sentry/browser';
import type { Router } from 'vue-router'

export default defineNuxtPlugin((nuxtApp) => {
    console.log('init nuxt sentry', [nuxtApp.$router]);
    const { vueApp } = nuxtApp;
    const vueRouter = nuxtApp.$router as Router

    Sentry.init({
        app: [vueApp],
        dsn: process.env.SENTRY_DSN,
        environment: process.dev ? 'development' : 'production',
        integrations: [
            new BrowserTracing({
                routingInstrumentation: Sentry.vueRouterInstrumentation(vueRouter)
            })
        ],
        // Set tracesSampleRate to 1.0 to capture 100%
        // of transactions for performance monitoring.
        // We recommend adjusting this value in production
        tracesSampleRate: 1.0,
        beforeSend(event, hint) {
            // Check if it is an exception, and if so, log it.
            if (event.exception) {
                // eslint-disable-next-line no-console
                console.error(`[Exeption handled by Sentry]: (${hint.originalException})`, { event, hint });
            }
            // Continue sending to Sentry
            return event;
        }
    });

    vueApp.mixin(Sentry.createTracingMixins({ trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] }));
    Sentry.attachErrorHandler(vueApp, { logErrors: false, attachProps: true, trackComponents: true, timeout: 2000, hooks: ['activate', 'mount', 'update'] });

    return {
        provide: {
            sentrySetContext: Sentry.setContext,
            sentrySetUser: Sentry.setUser,
            sentrySetTag: Sentry.setTag,
            sentryAddBreadcrumb: Sentry.addBreadcrumb,
            sentryCaptureException: Sentry.captureException
        }
    };
});

Steps to Reproduce

1. Set up a Nuxt3 project
2. Add above sentry plugin into plugins folder
3. run npx nuxt generate

Expected Result

Nuxt cli can successfully generate SPA content.

Actual Result

However I see error as the following

 ERROR  [Exeption handled by Sentry]: (TypeError: next is not a function) { event: 
   { exception: { values: [Array] },
     level: 'error',
     event_id: 'a1a34826c2b043a4b182d554decb251d',
     platform: 'javascript',
     timestamp: 1686988594.694,
     environment: 'production',
     sdk: { integrations: [Array] },
     breadcrumbs: [ [Object] ],
     sdkProcessingMetadata: {} },
  hint:
   { originalException:
      TypeError: next is not a function
...

Commenting out the line routingInstrumentation: Sentry.vueRouterInstrumentation(vueRouter) resolves this issue.
I also check the source, the issue is in the node_modules/@sentry/vue/cjs/router.js there's a callback on beforeEach. In the last line of the callback, next is called.

However in vue-router 4, the next parameter has been removed from beforeEach callback hence the error thrown.
Is it because vue-router4 not supported yet by @sentry/vue?

[Lms24]

Hi @egistli-geezerbuild thanks for reporting!

Is it because vue-router4 not supported yet by @sentry/vue?

Vue Router 4 is supported according to our docs but you're right that the next call seems to be problematic. I wonder why this didn't come up before. I opened #8351 to fix this.