@sentry/replay cannot be lazily loaded

[balavishnu-hme]

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

SDK Version

7.102.0

Framework Version

18.2.0

Link to Sentry event

No response

SDK Setup

Sentry.init({
dsn: SENTRY_DSN,
environment,
release,
integrations: [Sentry.reactRouterV6BrowserTracingIntegration({
useEffect,
useLocation,
useNavigationType,
createRoutesFromChildren,
matchRoutes,
})]
});

Steps to Reproduce

1. Install @sentry/react
2. Do not enable replay

@sentry/replay adds ~300kb of JS in initial load itself, since we want sentry to start as soon as possible. But we aren't using replay as of now or it can be started lazily.

Sentry docs provide a way to lazy initiate replay, but then it is already part of the bundle.
https://docs.sentry.io/platforms/javascript/guides/svelte/session-replay/#lazy-loading-replay

Expected Result

Replay shouldn't be in the bundle.

Actual Result

Replay should only be part of the bundle if it is being used, or give a way to opt out from replay.

[AbhiPrasad]

when used with a bundler or modern framework await import should result in code getting lazy loaded. See vite dynamic import or webpack code splitting.

const { replayIntegration } = await import('@sentry/react');
Sentry.addIntegration(replayIntegration());

I think we have to fix the code snippet for this, it still references Replay

[balavishnu-hme]

usual code looks something like this

import {init} from '@sentry/react'; // or import * as Sentry from '@sentry/react'

init(/***/)

when we are already import @sentry/react for init, dynamically importing '@sentry/react' later for lazy init wouldn't make a difference in build.

[AbhiPrasad]

when we are already import @sentry/react for init, dynamically importing '@sentry/react' later for lazy init wouldn't make a difference in build.

Bundlers should be smart enough to avoid this. With the rollup bundler for example, it would include shared code in the main bundle, and then dynamically import in the rest of the code. So init would end up in the main bundle file (but no replay integration logic would be there), and the replayIntegration would be in a dynamically loaded js chunk.

So const { replayIntegration } = await import('@sentry/react'); should not be ending up in the main bundle.

If this is not working for your bundler, I recommend you follow these steps instead:

1. Use init as usual as early as you can as usual. Make sure to not include the replayIntegration here.

import {init} from '@sentry/react';

2. Create a separate file that export a method that lazy loads replay.

// for example file is named sentry-replay.js
import {addIntegration, replayIntegration} from '@sentry/react';

export function initReplay() {
    addIntegration(replayIntegration());
};

3. Dynamically import the method from the file you create:

// whenever you want to load replay:
const { initReplay } = await import('path/to/sentry-replay.js');
initReplay();