Replay is too slow on 1.0.0-beta.1

Question

Replay is too slow on 1.0.0-beta.1

Closed this issue 2 months ago · 16 comments

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

Answer 1 · 2024-08-07T00:48:01.000Z

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.

Answer 2 · 2024-08-07T13:16:34.000Z

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?

Answer 3 · 2024-08-07T13:20:37.000Z

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

Answer 4 · 2024-08-07T14:08:10.000Z

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.

Answer 5 · 2024-08-08T23:19:18.000Z

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/vue@8.9.2

Answer 6 · 2024-08-08T23:30:23.000Z

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"

Answer 7 · 2024-08-08T23:30:56.000Z

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?

Answer 8 · 2024-08-08T23:45:50.000Z

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

Answer 9 · 2024-08-09T13:55:40.000Z

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.

Answer 10 · 2024-08-12T17:13:47.000Z

@lucas-zimerman thx for Vue pnpm i @sentry/vue@8.9.2 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

Answer 11 · 2024-08-16T13:02:50.000Z

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

Answer 12 · 2024-08-30T12:51:54.000Z

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

Answer 13 · 2024-08-30T14:41:19.000Z

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.

Answer 14 · 2024-08-30T14:42:15.000Z

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

Answer 15 · 2024-09-09T14:49:50.000Z

@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.

Answer 16 · 2024-10-19T00:14:22.000Z

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 🥀