Sentry.replayIntegration is not a function
Closed this issue · 7 comments
Environment
What version are you running? Etc.
"@capacitor/android": "^6.1.0",
"@capacitor/cli": "^6.1.0",
"@capacitor/core": "^6.1.0",
"@capacitor/ios": "^6.1.0",
"@sentry/capacitor": "^0.18.0",
"@sentry/vue": "^7.114.0",
"vue": "^3.4.29"Steps to Reproduce
Set up a Vue application and then add capacitor to it. The main.js looks like this:
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import * as Sentry from "@sentry/capacitor";
import * as SentryVue from "@sentry/vue";
Sentry.init(
{
dsn: "DSN HERE",
// Set your release version, such as "getsentry@1.0.0"
release: "my-project-name@<release-name>",
// Set your dist version, such as "1"
dist: "<dist>",
integrations: [
// Registers and configures the Tracing integration,
// which automatically instruments your application to monitor its
// performance, including custom Angular routing instrumentation
SentryVue.browserTracingIntegration(),
// Registers the Replay integration,
// which automatically captures Session Replays
Sentry.replayIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
},
// Forward the init method from @sentry/angular
SentryVue.init
);
createApp(App).mount('#app')Then just run the app. I ran it in development.
Expected Result
The app runs normally.
Actual Result
We get the following error in the browser console:
If we change Sentry.replayIntegration(), to SentryVue.replayIntegration(),, the error goes away and the application works normally.
However, the Sentry docs indicate that we should be able to use Sentry.replayIntegration(), here.
Hi and sorry for the confusion, the docs are pointing to the documentation for the next release :(
For this version, you need to initialize the following Integrations as shown on the below snippet
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import * as Sentry from "@sentry/capacitor";
import * as SentryVue from "@sentry/vue";
Sentry.init(
{
dsn: "DSN HERE",
// Set your release version, such as "getsentry@1.0.0"
release: "my-project-name@<release-name>",
// Set your dist version, such as "1"
dist: "<dist>",
integrations: [
// Registers and configures the Tracing integration,
// which automatically instruments your application to monitor its
// performance, including custom Angular routing instrumentation
new SentryVue.BrowserTracing(),
// Registers the Replay integration,
// which automatically captures Session Replays
new SentryVue.Replay(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 1.0,
replaysOnErrorSampleRate: 1.0,
},
// Forward the init method from @sentry/angular
SentryVue.init
);
createApp(App).mount('#app')Hi, I'm trying to get kind of the same configuration running but with capacitor v6 and @sentry/capacitor": "^0.18.0 but with @sentry/vue=^8.14.0, but unfortunately my IDE complains about the integrations.
This is my setup:
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router';
import * as Sentry from "@sentry/capacitor";
import * as SentryVue from "@sentry/vue";
const vueApp = createApp(App)
Sentry.init(
{
app: vueApp,
dsn: import.meta.env.VITE_SENTRY_DSN,
release: "my-project-name@<release-name>",
dist: import.meta.env.VITE_SENTRY_DIST,,
integrations: [
SentryVue.browserTracing({ router }),
SentryVue.replay(),
],
},
SentryVue.init
);
vueApp.mount('#app')But with this I get the error in the IDE:
Type '(Integration | Replay)[]' is not assignable to type '((Integration[] | ((integrations: Integration[]) => Integration[])) & (Integration[] | ((integrations: Integration[]) => Integration[]))) | undefined'.
Type '(Integration | Replay)[]' is not assignable to type '((integrations: Integration[]) => Integration[]) & Integration[]'.
Type '(Integration | Replay)[]' is not assignable to type '(integrations: Integration[]) => Integration[]'.
Type '(Integration | Replay)[]' provides no match for the signature '(integrations: Integration[]): Integration[]'.ts(2322)
options.d.ts(274, 5): The expected type comes from property 'integrations' which is declared here on type 'CapacitorOptions & Partial<Omit<Options, "tracingOptions"> & { tracingOptions: Partial<TracingOptions>; }>'and this error if I run it:
TypeError: addGlobalEventProcessor2 is not a function
at _SdkInfo.setupOnce (@sentry_capacitor.js?v=3e1dce11:25303:5)
at setupIntegration (@sentry_vue.js?v=3e1dce11:4884:17)
at @sentry_vue.js?v=3e1dce11:4865:7
at Array.forEach (<anonymous>)
at setupIntegrations (@sentry_vue.js?v=3e1dce11:4863:16)
at BrowserClient._setupIntegrations (@sentry_vue.js?v=3e1dce11:5167:26)
at BrowserClient.init (@sentry_vue.js?v=3e1dce11:5079:12)
at initAndBind (@sentry_vue.js?v=3e1dce11:5481:10)
at init (@sentry_vue.js?v=3e1dce11:13691:18)
at init2 (@sentry_vue.js?v=3e1dce11:29587:10)
at Module.init2 (@sentry_capacitor.js?v=3e1dce11:25583:3)
A quick update:
TypeError: addGlobalEventProcessor2 is not a function
This only seems to be caused by SentryVue.init but the type error is caused by the integrations which also lead to this error:
TypeError: integration.setupOnce is not a function
at setupIntegration (@sentry_capacitor.js?v=3e1dce11:8118:17)
at @sentry_capacitor.js?v=3e1dce11:8099:7
at Array.forEach (<anonymous>)
at setupIntegrations (@sentry_capacitor.js?v=3e1dce11:8097:16)
at BrowserClient._setupIntegrations (@sentry_capacitor.js?v=3e1dce11:8536:26)
at BrowserClient.init (@sentry_capacitor.js?v=3e1dce11:8423:12)
at initializeClient (@sentry_capacitor.js?v=3e1dce11:8961:12)
at initAndBind (@sentry_capacitor.js?v=3e1dce11:8951:3)
at init (@sentry_capacitor.js?v=3e1dce11:13666:3)
at Module.init2 (@sentry_capacitor.js?v=3e1dce11:25583:3)
Hi, I'm trying to get kind of the same configuration running but with capacitor
v6and@sentry/capacitor": "^0.18.0but with@sentry/vue=^8.14.0, but unfortunately my IDE complains about the integrations.This is my setup:
import { createApp } from 'vue' import App from './App.vue' import router from '@/router'; import * as Sentry from "@sentry/capacitor"; import * as SentryVue from "@sentry/vue"; const vueApp = createApp(App) Sentry.init( { app: vueApp, dsn: import.meta.env.VITE_SENTRY_DSN, release: "my-project-name@<release-name>", dist: import.meta.env.VITE_SENTRY_DIST,, integrations: [ SentryVue.browserTracing({ router }), SentryVue.replay(), ], }, SentryVue.init ); vueApp.mount('#app')But with this I get the error in the IDE:
Type '(Integration | Replay)[]' is not assignable to type '((Integration[] | ((integrations: Integration[]) => Integration[])) & (Integration[] | ((integrations: Integration[]) => Integration[]))) | undefined'. Type '(Integration | Replay)[]' is not assignable to type '((integrations: Integration[]) => Integration[]) & Integration[]'. Type '(Integration | Replay)[]' is not assignable to type '(integrations: Integration[]) => Integration[]'. Type '(Integration | Replay)[]' provides no match for the signature '(integrations: Integration[]): Integration[]'.ts(2322) options.d.ts(274, 5): The expected type comes from property 'integrations' which is declared here on type 'CapacitorOptions & Partial<Omit<Options, "tracingOptions"> & { tracingOptions: Partial<TracingOptions>; }>'and this error if I run it:
TypeError: addGlobalEventProcessor2 is not a function at _SdkInfo.setupOnce (@sentry_capacitor.js?v=3e1dce11:25303:5) at setupIntegration (@sentry_vue.js?v=3e1dce11:4884:17) at @sentry_vue.js?v=3e1dce11:4865:7 at Array.forEach (<anonymous>) at setupIntegrations (@sentry_vue.js?v=3e1dce11:4863:16) at BrowserClient._setupIntegrations (@sentry_vue.js?v=3e1dce11:5167:26) at BrowserClient.init (@sentry_vue.js?v=3e1dce11:5079:12) at initAndBind (@sentry_vue.js?v=3e1dce11:5481:10) at init (@sentry_vue.js?v=3e1dce11:13691:18) at init2 (@sentry_vue.js?v=3e1dce11:29587:10) at Module.init2 (@sentry_capacitor.js?v=3e1dce11:25583:3)
Hi, for the time being Sentry Capacitor is only compatible with Sentry vue V7, so I would recommend for now to use @sentry/vue on version 7.114.0
Hi, thanks for the hint. It's working with v7 even though it's not very intuitive with the use of those deprecated functions. :-)
One error that remains is that the use of SentryVue.init somehow leads to the error Expected 0-1 arguments, but got 2 (in VScode) but the project nevertheless starts without any complains.
This repo is a minimal reproduction of this case.
One error that remains is that the use of SentryVue.init somehow leads to the error Expected 0-1 arguments, but got 2 (in VScode) but the project nevertheless starts without any complains.
This repo is a minimal reproduction of this case.
I just saw this is related to a false import which was my bad. :-)
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 🥀