search

getsentry / sentry-capacitor

The official Sentry SDK for Capacitor
https://sentry.io
MIT License
116 stars 31 forks source link

Sentry.replayIntegration is not a function #685

Open InterstellarStella opened 3 weeks ago

InterstellarStella commented 3 weeks ago

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: Screenshot 2024-07-03 at 11 59 04

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.

lucas-zimerman commented 3 weeks ago

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')
chris-si commented 2 weeks ago

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)
chris-si commented 2 weeks ago

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)
lucas-zimerman commented 2 weeks ago

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)

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

chris-si commented 2 weeks ago

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.

chris-si commented 2 weeks ago

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. :-)