Warning when console logging Vue ViewModel

[Duncanxyz]

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

Framework Version

2.7.14

Link to Sentry event

No response

SDK Setup

Sentry.init({
  Vue,
  dsn: 'https://[email protected]/0',
  integrations: [
    new Sentry.BrowserTracing({}),
    new Sentry.Replay({
      maskAllText: false,
      maskAllInputs: false,
      blockAllMedia: false,
    }),
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

Steps to Reproduce

1. Console logging a Vue instance (ViewModel) during the rendering process.

Reproduce the issue in this codepen.

Expected Result

No warnings should appear.

Actual Result

Some warnings appear.

(found in <Root>)
(anonymous) @ instrument.ts:144
warn$2 @ vue.js:5108
warnNonPresent_1 @ vue.js:660
has @ vue.js:699
isSyntheticEvent @ is.ts:153
stringifyValue @ normalize.ts:218
visit @ normalize.ts:89
normalize @ normalize.ts:39
(anonymous) @ handleScope.ts:95
normalizeConsoleBreadcrumb @ handleScope.ts:81
handleScope @ handleScope.ts:62
(anonymous) @ handleScope.ts:26
(anonymous) @ scope.ts:594
_notifyScopeListeners @ scope.ts:593
setSpan @ scope.ts:287
finish @ idletransaction.ts:194
(anonymous) @ idletransaction.ts:288
sentryWrapped @ helpers.ts:98
setTimeout (async)
(anonymous) @ trycatch.ts:122
_restartIdleTimeout @ idletransaction.ts:285
_popActivity @ idletransaction.ts:324
popActivity @ idletransaction.ts:227
span.finish @ idletransaction.ts:50
(anonymous) @ tracing.ts:44
sentryWrapped @ helpers.ts:98
setTimeout (async)
(anonymous) @ trycatch.ts:122
finishRootSpan @ tracing.ts:42
mixins.<computed> @ tracing.ts:124
invokeWithErrorHandling @ vue.js:3700
callHook$1 @ vue.js:3104
mountComponent @ vue.js:2978
Vue.$mount @ vue.js:9311
Vue.$mount @ vue.js:11870
Vue._init @ vue.js:4724
Vue @ vue.js:5774
(anonymous) @ origin.html:48
instrument.ts:144 [Vue warn]: Property or method "preventDefault" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

[Lms24]

Hi @Duncanxyz thanks for writing in and for opening a PR!

I already left a review in #8981 but I have one more general question:

Since you already took a look at the code, can you explain why this warning appears? Is it because adding the console log breadcrumb accesses certain properties within Vue triggers some kind of proxy that emits the warning?

Furthermore, is this only problematic in Vue 2 or is it still a problem in Vue 3?

[Duncanxyz]

Hi @Lms24 , thank you for your review!

You're correct in your understanding of the warning's cause. In Vue 2, there is a proxy during the rendering process.
Vue2 related source code

I apologize for not considering the differences with Vue 3 earlier. I will further investigate and update the PR in the next couple of days.

Thank you once again for your prompt response. Sentry is crucial to our project!

[AbhiPrasad]

Thanks for contributing a fix @Duncanxyz. It has been released in 7.69.0 https://github.com/getsentry/sentry-javascript/releases/tag/7.69.0