In NUXT v3 Vue 3 tracing mixing or trackComponents: true produces 'set' on proxy: trap returned falsish for property '$_sentrySpans'

[IngusSkaistkalns]

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

Framework Version

[email protected], [email protected]

Link to Sentry event

https://mitigate-dev.sentry.io/share/issue/30144f4899d645b98e788aa458e87e36/

SDK Setup

export default defineNuxtPlugin((nuxtApp) => {
  const { vueApp } = nuxtApp
  Sentry.init({
    app: vueApp,
    dsn: ".......",
    enabled: true,
    environment: 'production',
    trackComponents: true, // <----- This one manifests the errors
    sampleRate: 1.0,
    tracesSampleRate: 0,
  })

  return {}
})

Steps to Reproduce

1. Create Nuxt 3 app.
2. Create Nuxt plugin
3. Pass vue app instance from nuxtApp.vueApp
4. Enable trackComponents
5. Load the app

Expected Result

Expected not to have JS errors.

Actual Result

Plenty JS errors like so:

[Vue warn]: Error in beforeUpdate hook: "TypeError: 'set' on proxy: trap returned falsish for property '$_sentrySpans'"

found in

---> <VTextField>
       <SearchBar> at /Users/......../code/...../frontend/components/SearchBar.vue... (8 recursive calls)
         <Root>

[IngusSkaistkalns]

Also I am not 100% sure that nuxtApp.vueApp === vue's createApp(App)

[Lms24]

Hi @IngusSkaistkalns thanks for writing in!

We currently don't support Nuxt officially. To triage this issue further, I'm wondering if this is reproducible without Nuxt (i.e. just with a Vue SPA) or if there is some problem with Nuxt interfering here. Are you using this community maintained Nuxt plugin or just our official Vue SDK?

[IngusSkaistkalns]

@Lms24 hi, thanks for fast response!

1. Seems there is a plan at the moment to support nuxt v3 with community module. Plan for Nuxt 3 version nuxt-community/sentry-module#530.

Tested it - does not work at the moment, but thats unrelated to @sentry/vue.

2. I am not able to reproduce same error with plain vue spa app that was created using npm create vue@3,

3. We are using nuxt together with vuetify, so I tested integration on fresh vuetify project - no issues there also.

It looks thats directly related with Nuxt and we can close this issue.

[Lms24]

I'm going to close this issue for now as we discussed internally that we'd revisit it whenever we look at supporting Nuxt.
In the meantime, it should be possible to use our Vue SDK with trackComponents: false.

Thanks for raising this! It's always good to know about potential challenges for future SDKs!