Replay freeze 100% CPU when using drag and drop

[agotfredsen82]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/vue

SDK Version

8.19.0

Framework Version

Nuxt 3

Link to Sentry event

No response

SDK Setup/Reproduction Example

Sentry.init({
app: nuxtApp.vueApp,
autoSessionTracking: true,
debug: sentry.environment !== "production",
dsn: sentry.dsn,
environment: sentry.environment,
integrations: [
Sentry.browserTracingIntegration({ router }),
Sentry.replayIntegration()
],

etc

Steps to Reproduce

Using Nuxt3 with drag and drop (tried different drag and drop frameworks ..) but for this case lets use https://drag-and-drop.formkit.com

when using Sentry.replayIntegration() using a drag and drop framework the iPhone freezes and becomes extremely hot . so I guess the cpu turns way beyond 100%

removing Sentry.replayIntegration() and everything works perfect again .. but I want to be able to use replay ..

Expected Result

expecting to be able to use drag and drop in a Nuxt 3 app together with Sentry Replay ..

https://drag-and-drop.formkit.com

Actual Result

cant screenshot because the iPhone freezes . not even screenshot works ..

[agotfredsen82]

ohh and it freeze even if I apply data-sentry-block to the area that uses drag and drop

[chargome]

@agotfredsen82 thanks for reaching out, we'll have a look.

EDIT: I was not able to reproduce this, session replay was working correctly with https://drag-and-drop.formkit.com/ .
Could you please provide more context of your setup to further pin your issue down? A reproducible repo would be very helpful.

[mydea]

Hey, thank you for writing in.

This is obviously not ideal. I wonder if this happens because there is so much re-rendering happening 🤔

Could you try to block and/or ignore the elements that can be drag-and-dropped (or possibly there are classes being applied during the drag-and-drop process that you can block/ignore), and see if that helps?

[agotfredsen82]

@agotfredsen82 thanks for reaching out, we'll have a look.

EDIT: I was not able to reproduce this, session replay was working correctly with https://drag-and-drop.formkit.com/ . Could you please provide more context of your setup to further pin your issue down? A reproducible repo would be very helpful.

Hi @chargome and @mydea . This is truly a big issue . maybe I did not clearly that it's on the iPhone, sorry for that if so . it's not an issue on my MacBook Pro M1 Max .. but in my Iphone 15 Pro Max it's overheating and totally freezes . is does not matter if a block the area that has drag and drop .. can also reproduce is on other iPhones with same freeze ..

my setup is Nuxt 3 with sentry

only thing that works is to disable in other words mute // Sentry.replayIntegration() only then does not freeze happen when dragging. so it seems the only thing that is needed is an iPhone running iOS Safari running Nuxt 3 with sentry with https://drag-and-drop.formkit.com/ I have tried disabling all other modules is nuxt and plugins and still even with a clean setup . Nuxt 3 + Sentry + iPhone Safari + Sentry.replayIntegration() and crash, boom, bang, overheat . how ever everything works perfectly on desktop like Mac OS with Safari on a MacBook Pro

for now only solution will be to skip replay on mobile devices all together ...and that in a shame because I realy realy like replay .