Vue 3 with Webpack - trackComponents option causes sentry to fail with 'set' on proxy: trap returned falsish for property '$_sentrySpans'

[jeremiahvpratt]

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

Framework Version

7.52.1

Link to Sentry event

https://hirefly.sentry.io/issues/4188182414/?project=4504328532066304&query=is%3Aunresolved&referrer=issue-stream&stream_index=0

SDK Setup

Sentry.init({
  app,
  dsn: 'https://bab8a45ce18b4f5e909e71968afe4335@o4504328532066304.ingest.sentry.io/4504328532066304',
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracePropagationTargets: ['hirefly.com', /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 10%
  // of transactions for performance monitoring.
  // Adjust as necessary to stay below quota.
  tracesSampleRate: 0.1,

  environment: process.env.NODE_ENV,

  // Enable performance profiling of all components,
  // instead of just App.vue.
  trackComponents: true,
});

Steps to Reproduce

1. Set up a Vue 3 app that uses Webpack, Sentry, Vuetify, Vue Router 4, and @sentry/webpack-plugin
2. Initialize sentry using the above options
3. Use webpack to bundle the app, using @sentry/webpack-plugin
4. Try to render a Vuetify component, such as v-navigation-drawer
5. Observe the error

Removing the trackComponents eliminates the error

Expected Result

TrackComponents works with Sentry, Vue 3, and Webpack

Actual Result

Many errors with sentry like TypeError 'set' on proxy: trap returned falsish for property '$_sentrySpans'

See this closed bug where this happened in nuxt:

[Lms24]

Hi @jeremiahvpratt thanks for reporting! Hmm yes, this looks oddly similar to #7909. To debug this, we need to find out what the minimal reproduction is here. Seems like we know at least that it's not a Nuxt-only issue (assuming the same bug causes these two issues).

Would you be able to provide a minimal reproduction repo so that we can look into this?

[Lms24]

fwiw, I quickly tried reproducing this with Vite and a Vue starter app (link to my repro) but couldn't reproduce.

Makes me wonder if this is indeed related to webpack 🤔 Then again, for the other issue, Nuxt uses Vite by default 😅

Anyway, I think we need a reproduction here, preferrably with your webpack config @jeremiahvpratt since I don't know how webpack and Vue 3 work together and there are probably a bunch of possibilities to configure webpack.

[Lms24]

Maybe we also need to check if Vuetify does some proxy magic (never used it).

[jeremiahvpratt]

EDIT: Updated, security-conscious repo here

Hey @Lms24 I spent a few hours this morning trying to create a minimum reproduction, but sadly I have failed so far. A basic combination of webpack, Vue 3, vue router, and vuetify doesn't seem to trigger this issue.

Thinks that I would try next, given the time, would be adding some reactive changes to the vuetify component, maybe in an async function, putting the vuetify component in a KeepAlive container, nesting vuetify components.

Other things that I did try that had no effect: intentionally triggering errors on vuetify components, using different types of vuetify components that I've observed the error on

[jeremiahvpratt]

Note that in this attempted minimum reproduction, the webpack config nearly exactly mirrors the config we use in our app - the same goes for the sentry, vue-router, and vuetify configs.

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[Lms24]

Hi @jeremiahvpratt , apologies, this slipped through the cracks.

EDIT: Updated, security-conscious repo here

Hey @Lms24 I spent a few hours this morning trying to create a minimum reproduction, but sadly I have failed so far

Does the repo you posted now contain a reproducible example or is it still not reproducible?

[jeremiahvpratt]

Hey Lukas, I wasn’t able to create a minimum reproduction. Thanks, Jeremiah

On Thu, Aug 3, 2023 at 6:38 AM Lukas Stracke ***@***.***> wrote: Hi @jeremiahvpratt <https://github.com/jeremiahvpratt> , apologies, this slipped through the cracks. EDIT: Updated, security-conscious repo here <https://github.com/jeremiahvpratt/sentry-min-reproduction> Hey @Lms24 <https://github.com/Lms24> I spent a few hours this morning trying to create a minimum reproduction, but sadly I have failed so far Does the repo you posted now contain a reproducible example or is it still not reproducible? — Reply to this email directly, view it on GitHub <#8143 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADRTY3UYGT2UALKNKTATZITXTN5T7ANCNFSM6AAAAAAYEHXCMQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *Jeremiah Pratt* 281-536-4530

[Lms24]

No worries. Sorry that I don't have a better answer but we need to know what's causing this error before we can properly fix it. I've backlogged this issue for the moment but if you or anyone else reading this issue have more context or figure out what combination of tools/libraries/conditions causes the error we're happy to take a look at it.

[getsantry]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you remove the label Waiting for: Community, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀