[Next.js] replayCanvasIntegration Safari issue

[slaviczavik]

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/nextjs

SDK Version

8.27.0

Framework Version

React 18.2.0, Next.js 14.2.3

Link to Sentry event

No response

Reproduction Example/SDK Setup

Sentry.init({
  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT,
  release: process.env.NEXT_PUBLIC_SENTRY_RELEASE,
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

  integrations: [
    Sentry.replayIntegration({
      maskAllText: false,
      maskAllInputs: false,
    }),
    Sentry.replayCanvasIntegration(), // The problem!
  ],
  ignoreErrors: SENTRY_IGNORED_ERRORS,
})

• The problem is with the replayCanvasIntegration().
• The problem was noticed within 7.48.0 version, I've tried to update to the latest but the issue stays.

Steps to Reproduce

1. Open web app in Safari (my version is 17.5).
2. Open Safari Developer Tools.
3. Switch to the Network tab (XHR/Fetch).

You can see a snapshot is fetch every single second from this URI: blob:https://domain.tld/UUID.

Expected Result

Same behaviour as in Chrome where no snapshots is fetched.

Actual Result

[Lms24]

Hey @slaviczavik thanks for writing in! Any chance you could provide a minimal reproduction that shows this behaviour? Would be a great help to debug this! 🙏

Gonna tag @mydea and @billyvg who have more context here. Are you aware of similar issues?

[slaviczavik]

Hey @slaviczavik thanks for writing in! Any chance you could provide a minimal reproduction that shows this behaviour? Would be a great help to debug this! 🙏

Gonna tag @mydea and @billyvg who have more context here. Are you aware of similar issues?

Hi @Lms24! Unfortunately I have no reproduction yet, however the loop occurs on the canvas element where a map is rendered like in this example. Please let me know if it is enough, or if you want I may "fork" the web app simplify it and post it here.

[billyvg]

I narrowed this down to converting a blob to ArrayBuffer, it looks like this is Safari-related behavior and not directly related to Session Replay. I monitored the memory usage of Safari while recording a replay w/ canvas and it does not appear to be leaking memory.

@slaviczavik Are you experiencing any specific impacts from this behavior?