Replay is too slow on 1.0.0-beta.1

[djabif]

Environment

 "@sentry/angular": "^8.24.0",
 "@sentry/capacitor": "^1.0.0-beta.1"

Steps to Reproduce

import * as Sentry from '@sentry/capacitor';
import * as SentryAngular from '@sentry/angular';

Sentry.init(
    {
      dsn: environment.sentryDsn,
      integrations: [Sentry.replayIntegration(), SentryAngular.browserTracingIntegration()],
      ...
    },
    SentryAngular.init
  );

Expected Result

New version should log errors and messages in Sentry the same way as the previous version.

Actual Result

I'm having a type error in the integrations array because of the SentryAngular.browserTracingIntegration(). If I remove browserTracingIntegration and only set integrations: [Sentry.replayIntegration()], I don't get any error.

The error is:

  Type '(Replay | Integration)[]' is not assignable to type '((integrations: Integration[]) => Integration[]) & Integration[]'.
    Type '(Replay | Integration)[]' is not assignable to type '(integrations: Integration[]) => Integration[]'.
      Type '(Replay | Integration)[]' provides no match for the signature '(integrations: Integration[]): Integration[]'

So that's one thing but even if I remove the browserTracingIntegration, with this new version I'm not able to see the logs in sentry.

I ran the migration script and changed @sentry/angular-ivy in favor of @sentry/angular... am I missing something?

I also noted in my browser network that the sentry requests have the sentry_version=7 param... is that ok or should it be 8?

https://xx.ingest.sentry.io/api/xx/envelope/?sentry_key=xxx&sentry_version=7&sentry_client=sentry.javascript.angular%2F8.24.0

Thanks

[lucas-zimerman]

Hi and thank you for opening this issue!
Would you mind checking if using the exact version sentry/angular version 8.9.2 works on your project?
example:

 "@sentry/angular": "8.9.2",
 "@sentry/capacitor": "1.0.0-beta.1"

EDIT: In regard to sentry_version being 7, despite the number being similar to the previous version of Sentry Javascript, it's actually unrelated, it's just the protocol version we are using to communicate with the server.

[djabif]

Thanks for your quick answer.

Using "@sentry/angular": "8.9.2" fixes the typing issue and I'm able to see the error/messages in the Sentry dashboard.
However, and I don't yet understand why, it makes the app suuuuuuuuper slow and unusable, like impossible to use at all. If I disable Sentry the app works good again. Any idea what could be happening?

[djabif]

Is there any "stable workaround" to use the previous version of this package with angular 18?
I need to push an app release before the end of the week and I'm starting to get worried 😬.
Thanks

[djabif]

Update: it looks like if I remove these lines the app works good again:

  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

So this is now my winning Sentry config

import * as Sentry from '@sentry/capacitor';
import * as SentryAngular from '@sentry/angular';

...

 Sentry.init(
    {
      dsn: environment.sentryDsn,
      release: `...@${packageInfo.version}`,
      // replaysSessionSampleRate: 0.1,
      // replaysOnErrorSampleRate: 1.0,
      enabled: environment.production,
      environment: environment.title ?? 'develop',
      ignoreErrors: [...],
      integrations: [Sentry.replayIntegration(), SentryAngular.browserTracingIntegration()],
      tracePropagationTargets: ['localhost', environment.API_URL],
      tracesSampleRate: environment.title === 'production' ? 0.75 : 1
    },
    SentryAngular.init
  );

I saw in the code that replaysSessionSampleRate and replaysOnErrorSampleRate are only for the browser so I guess I should be fine without them as my app is only for native environments.

[reslear]

Vue 3 Capacitor 6, @sentry/vue v8.24.0 same:

import * as Sentry from '@sentry/capacitor'
import * as SentryVue from '@sentry/vue'


 Sentry.init(
      {
        app,
        dsn: import.meta.env.VUE_APP_SENTRY_URL,
        integrations: [
          SentryVue.browserTracingIntegration({ router }),
          Sentry.replayIntegration(),
        ],
        tracePropagationTargets: ['localhost', /^\//],
        tracesSampleRate: 1.0,
        // replaysSessionSampleRate: 0.1,
        //replaysOnErrorSampleRate: 1.0,

        environment,
        //dist,
        //release,
      },
      SentryVue.init
    )

---

solution: pnpm i @sentry/[email protected]

[lucas-zimerman]

Vue Capacitor 6 same:

import * as Sentry from '@sentry/capacitor'
import * as SentryVue from '@sentry/vue'

Sentry.init(
{
app,
dsn: import.meta.env.VUE_APP_SENTRY_URL,
integrations: [
//SentryVue.browserTracingIntegration({ router }),
//Sentry.replayIntegration(),
// WORKAROUND
() => SentryVue.browserTracingIntegration({ router }),
() => Sentry.replayIntegration(),
],
tracePropagationTargets: ['localhost', /^//],
tracesSampleRate: 1.0,
// replaysSessionSampleRate: 0.1,
//replaysOnErrorSampleRate: 1.0,

    environment,
    //dist,
    //release,
  },
  SentryVue.init
)

Also for vue, you also need to use the speicif version of @sentry/vue "8.9.2"

[lucas-zimerman]

Update: it looks like if I remove these lines the app works good again:

replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,

So this is now my winning Sentry config

import * as Sentry from '@sentry/capacitor';
import * as SentryAngular from '@sentry/angular';

...

Sentry.init(
{
dsn: environment.sentryDsn,
release: ...@${packageInfo.version},
// replaysSessionSampleRate: 0.1,
// replaysOnErrorSampleRate: 1.0,
enabled: environment.production,
environment: environment.title ?? 'develop',
ignoreErrors: [...],
integrations: [Sentry.replayIntegration(), SentryAngular.browserTracingIntegration()],
tracePropagationTargets: ['localhost', environment.API_URL],
tracesSampleRate: environment.title === 'production' ? 0.75 : 1
},
SentryAngular.init
);

I saw in the code that replaysSessionSampleRate and replaysOnErrorSampleRate are only for the browser so I guess I should be fine without them as my app is only for native environments.

I am sorry for your experience, did it also happen on the previous version?

[reslear]

@lucas-zimerman thx for Vue pnpm i @sentry/[email protected] works fine. Thank you!
Also why is this version and when can I upgrade to the latest version?

[djabif]

Update: it looks like if I remove these lines the app works good again:
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
So this is now my winning Sentry config
import * as Sentry from '@sentry/capacitor';
import * as SentryAngular from '@sentry/angular';
...
Sentry.init(
{
dsn: environment.sentryDsn,
release: ...@${packageInfo.version},
// replaysSessionSampleRate: 0.1,
// replaysOnErrorSampleRate: 1.0,
enabled: environment.production,
environment: environment.title ?? 'develop',
ignoreErrors: [...],
integrations: [Sentry.replayIntegration(), SentryAngular.browserTracingIntegration()],
tracePropagationTargets: ['localhost', environment.API_URL],
tracesSampleRate: environment.title === 'production' ? 0.75 : 1
},
SentryAngular.init
);
I saw in the code that replaysSessionSampleRate and replaysOnErrorSampleRate are only for the browser so I guess I should be fine without them as my app is only for native environments.

I am sorry for your experience, did it also happen on the previous version?

No, it didn't happen before.

[lucas-zimerman]

@lucas-zimerman thx for Vue pnpm i @sentry/[email protected] works fine. Thank you! Also why is this version and when can I upgrade to the latest version?

We stayed on a fixed version for the first beta, but future betas will have the latest version

[matthew2564]

Is there an indicative date that version 1.0.0 will be out of beta?

[kahest]

We will ship a release candidate next week, you can expect the final 1.0.0 in a few weeks time at the latest

[lucas-zimerman]

Since the issue with conflicting packages were sorted out, I will reuse this issue to track the replay slowness with the latest version.
In regard to the new version, as kahest pointed out, it is expected in a few weeks.

[lucas-zimerman]

@djabif sorry for the late question, are you experiencing the slowness with replay on web, app or both?

[djabif]

@djabif sorry for the late question, are you experiencing the slowness with replay on web, app or both?

Hi, sorry for the late reply. I was experiencing the slowness only in the app.