Type 'BrowserTracing' is not assignable to type 'Integration' :: Vue 3 w/ Capactor 3

[vanpyrzericj]

Environment

"@capacitor/core": "^3.5.1",
"@sentry/capacitor": "^0.10.0",
"@sentry/vue": "^7.13.0,
"vue": "^3.1.5"

import * as Sentry from "@sentry/capacitor";
import * as SentryVue from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
        app,
        dsn: "***",
        integrations: [
            new BrowserTracing({
                routingInstrumentation: SentryVue.vueRouterInstrumentation(router),
                tracingOrigins: ["localhost", "***", "***", /^\//],
            }),
        ],
        environment: process.env.VUE_APP_SH_ENV,
        tracesSampleRate: 1.0,
    }, SentryVue.init);

Steps to Reproduce

1. Use above package versions & set up in main.ts for a Vue3 project
2. Attempt to build project

Expected Result

The project would build successfully.

Actual Result

See #197 for my original comment. I took NilsFrkl's advice and removed the direct reference to @sentry/tracing which still produces the error:

TS2322: Type 'BrowserTracing' is not assignable to type 'Integration'.   
Types of property 'setupOnce' are incompatible.     
Type '(_: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void' is not assignable to type '(addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void'.       
Types of parameters '_' and 'addGlobalEventProcessor' are incompatible.         
Types of parameters 'callback' and 'callback' are incompatible.          
Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/eventprocessor").EventProcessor' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/eventprocessor").EventProcessor'.             
Types of parameters 'event' and 'event' are incompatible.               
Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/event").Event' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/event").Event'.                 
Types of property 'spans' are incompatible.                   
Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/span").Span[] | undefined' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/span").Span[] | undefined'.                    
 Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/span").Span[]' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/span").Span[]'.                       
Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/span").Span' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/span").Span'.                         
Types of property 'transaction' are incompatible.                           
Type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/transaction").Transaction | undefined' is not assignable to type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/transaction").Transaction | undefined'.                            
Property 'getBaggage' is missing in type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/vue/node_modules/@sentry/types/types/transaction").Transaction' but required in type 'import("/Users/vanpyrzericj/Development/abcd/app-web/node_modules/@sentry/types/types/transaction").Transaction'.

[lucas-zimerman]

Thanks for opening the issue.

About your package manager, are you using npm or yarn?

[thiagobrez]

@lucas-zimerman If it helps, I'm having the same thing on React, using npm

"@capacitor/core": "^3.4.3",
"@sentry/capacitor": "^0.10.0",
"@sentry/react": "^6.19.7,
"@sentry/tracing": "^7.13.0",
"react": "^18.0.0",

[lucas-zimerman]

@lucas-zimerman If it helps, I'm having the same thing on React, using npm

"@capacitor/core": "^3.4.3",
"@sentry/capacitor": "^0.10.0",
"@sentry/react": "^6.19.7,
"@sentry/tracing": "^7.13.0",
"react": "^18.0.0",

Unfortunately for the time being, the SDK is only compatible with version 7.12.x, a new version compatible with version 7.13.x will be released soon.

[thiagobrez]

@lucas-zimerman Thanks! Although I installed "@sentry/tracing": "^7.12.1" and nothing changed apparently

[lucas-zimerman]

Could you check if the problem persists on the latest version of Sentry/Capacitor? I was able to reproduce it and it faded away once the new SDK was installed.

[M-Hagras]

@lucas-zimerman I have a similar issue

package versions:

"@sentry/angular": "7.12.1", "@sentry/capacitor": "^0.10.1", "@sentry/tracing": "7.12.1"

Code:

Sentry.init( { dsn: environment.sentryDSN, tracesSampleRate: environment.sentryPerformance.tracesSampleRate, integrations: [ new BrowserTracing({ }), ], }, sentryAngularInit );

Errors: 1-

Type 'BrowserTracing[]' is not assignable to type '((integrations: Integration[]) => Integration[]) & Integration[]'.

2-

Error: node_modules/@sentry/browser/node_modules/@sentry/types/types/globals.d.ts:2:11 - error TS2451: Cannot redeclare block-scoped variable 'DEBUG_BUILD'.

2 const DEBUG_BUILD: boolean; ~~~~~~~~~~~~~~~

node_modules/@sentry/types/types/globals.d.ts:2:11 2 const DEBUG_BUILD: boolean; ~~~~~~~~~~~~~~~ 'DEBUG_BUILD' was also declared here.

[lucas-zimerman]

@lucas-zimerman I have a similar issue

package versions:

"@sentry/angular": "7.12.1", "@sentry/capacitor": "^0.10.1", "@sentry/tracing": "7.12.1"

Code:

Sentry.init( { dsn: environment.sentryDSN, tracesSampleRate: environment.sentryPerformance.tracesSampleRate, integrations: [ new BrowserTracing({ }), ], }, sentryAngularInit );

Errors: 1-

Type 'BrowserTracing[]' is not assignable to type '((integrations: Integration[]) => Integration[]) & Integration[]'.

2-

Error: node_modules/@sentry/browser/node_modules/@sentry/types/types/globals.d.ts:2:11 - error TS2451: Cannot redeclare block-scoped variable 'DEBUG_BUILD'. 2 const DEBUG_BUILD: boolean;

node_modules/@sentry/types/types/globals.d.ts:2:11
2     const **DEBUG_BUILD**: boolean;

'DEBUG_BUILD' was also declared here.

Hi, for the time being, I'd recommend using a fixed version for Sentry Angular/Tracing/Angular.

For version 0.10.1, you'll need Sentry Angular 7.13.0 otherwise you'll face those issues

[bbugh]

This is blocking us from using Replays as an integration, will an update be released to support 7.25.0 soon?

[lucas-zimerman]

Soon, but even so, replay isn't currently working with Capacitor (with the updated SDK), I opened a different issue to see what's going on with Replay https://github.com/getsentry/sentry-capacitor/issues/279

[github-actions[bot]]

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 🥀

[jlovera3]

I just updated Sentry to the last version (7.64.0) in order to use the new feature Source Maps that they released, and I'm getting the same error now.

Type 'BrowserTracing' is not assignable to type 'Integration'. Types of property 'setupOnce' are incompatible. Type '(_: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void' is not assignable to type '(addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub) => void'. Types of parameters '_' and 'addGlobalEventProcessor' are incompatible. Types of parameters 'callback' and 'callback' are incompatible.

Any updates on this?