Sentry v8 broke the integration with our Chrome extension which uses Vue.

[pavitra-infocusp]

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

8.0.0

Framework Version

3.4.21

Link to Sentry event

No response

SDK Setup

import { BrowserClient, Scope, browserTracingIntegration, defaultStackParser, makeFetchTransport, replayIntegration, vueIntegration } from "@sentry/vue";
import packageJson from '../package.json';

export function initSentry(app, router) {
  const client = new BrowserClient({
    dsn: "https://________@________.ingest.sentry.io/________",
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    integrations: [
      browserTracingIntegration({ router }),
      // replayIntegration({
      //   maskAllText: false,
      //   blockAllMedia: false,
      // }),
      vueIntegration({ app, trackComponents: true }),
    ],
    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
    tracePropagationTargets: ["localhost", "https://api.example.com"],
    // Performance Monitoring
    tracesSampleRate: 1.0, //  Capture 100% of the transactions
    // Session Replay
    // Capture Replay for 10% of all sessions,
    // plus for 100% of sessions with an error
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,

    environment: import.meta.env.MODE,
    release: `my-extension@${packageJson.version}`
  });

  const scope = new Scope();
  scope.setClient(client);

  client.init();
}

Steps to Reproduce

I just upgraded to v8 of the Sentry JS SDK, and it said that browser extension can't use global init. So, I changed my code to use scope init as above.

Expected Result

It should catch any errors without any setup other than initing the SDK.

Actual Result

I am disappointed that it does not track any errors by itself. Explicit calls using scope.captureException works, but this is undesirable.

[pavitra-infocusp]

Cause: #10632

[pavitra-infocusp]

Our Chrome extension runs on only on the new tab page. I couldn't understand the reasoning behind disabling extensions support completely, instead of finding alternative solutions.

[Lms24]

Hi @pavitra-infocusp thanks for writing in! This was an intentional change and we're likely not going to revert it.
Using Sentry in a browser extension is quite an edge case and I'd argue it's in everyones best interest if chrome extensions do not capture errors and data from the host websites and vice versa. This was our main motivation for "disabling" the Sentry.init call and adding a specific guide how to use Sentry in browser extensions.

I couldn't understand the reasoning behind disabling extensions support completely, instead of finding alternative solutions.

Unfortunetely, there's no good way to isolate extensions from the rest of the page (and vice versa). If you have concrete suggestions, feel free to let us know.

Our Chrome extension runs on only on the new tab page

In this case, if you can ensure that your extension really runs in "empty" tabs, you can re-add the global integrations that we're filtering out in this guide. Ultimately this will give you the same experience as previously with a simple Sentry.init call.

[pavitra-infocusp]

The document https://docs.sentry.io/platforms/javascript/best-practices/browser-extensions/ provides no help with setting up the error handling instrumentation code manually. It leaves us with zero clue how to use Sentry further.

[Lms24]

It leaves us with zero clue how to use Sentry further.

The usual way of using Sentry "manually" is to try/catch your application's code and send the error to Sentry using captureException. This is documented and should always work.

In your specific case you're already adding vueIntegration to your client setup which will register a Vue errorHandler. So errors caught from Vue should be sent automatically to Sentry.