[Investigation] Vue console error message that does not become a Sentry error

[jas-kas]

Problem

A customer reported seeing a Vue console error message inside the "Console" tab of Replay Details. This was not part of any Sentry errors captured. As a result, they wanted the ability to 'assign' a replay, similar to how you would assign an issue. This ticket is to further look into why that is and potential solutions to have this become a Sentry error.

Potential solution: https://docs.sentry.io/platforms/javascript/configuration/integrations/plugin/#captureconsole

Findings

TBD

[Lms24]

I wonder if this is related to #7310. Meaning the problem was always there, we didn't capture the exception but the console output was omitted 🤔

[billyvg]

This is expected behavior. Libraries/frameworks often do this to warn developers without throwing an exception as to not completely crash applications. The capture console plugin would work here but I would not recommend it as it can become noisy.

[Lms24]

Makes sense to me. Then I think there's no change necessary in the general Vue SDK and we can close this issue. Unless you want to keep this open for Replay-specific changes?

[billyvg]

I'm going to close this out, I don't think there's anything to be done here.

[JhumanJ]

Hey there, I'm experiencing the same issue.
Here's the error without the sentry SDK installed:

As you can see, vue warns about the error, and then the console receives it (as a normal js error).

Now, with the vue 2 SDK installed:

import Vue from 'vue'
import * as Sentry from '@sentry/vue'
import { Replay } from '@sentry/replay'

if (window.config.sentry_enabled) {
  Sentry.init({
    Vue,
    dsn: 'https://ffc8fa3912a5459e991b10607c0bf14f@o769895.ingest.sentry.io/4505277713022976',
    integrations: [
      new Replay()
    ],
    // Performance Monitoring
    tracesSampleRate: 0.01,
    // Session Replay
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    logErrors: true
  })
  if (!window.config.production) {
    console.info('== Sentry enabled ==')
  }
}

I only get the Vue warn:

And the event is not sent to Sentry... I also tried enabling the capture console plugin but that didn't help. Sentry is not receiving any exceptions + the way errors work is broken with the SDK. I'm really confused, and I'm not sure what to do, but the SDK doesn't seem usable in a traditional vue2 project 😔

Please let me know if I can share any more information to help troubleshooting this..

[InterstellarStella]

Will be investigating @JhumanJ 's case over Zendesk.

[JhumanJ]

Hey, thanks a lot for your prompt response @stellaatsentry and for your email. The issue was due to uBlock (#2916), everything seems to be working fine, I’m sorry for the false alert. Enabling logs allowed me to see the network error.
The SDK does prevent error propagation to the console somehow (see screenshot in previous message) but at least I have the vue warning and the error in Sentry.