Lazy loading Sentry in Next.js with different configuration for specific pages

[marko-hologram]

Hello,

I just wanted to get some help with lazy loading Sentry with different configuration depending on the page. I would like to exclude Replay integration from certain pages to keep the bundle size down for those pages. Is this a viable strategy in a Next.js project in sentry.client.config.ts file?

Here is an example of what I mean:

// Other configuration not shown because it's not important
if (window.location.pathname.startsWith("/no-replay")) {
  import("@sentry/nextjs").then(({ init, browserTracingIntegration }) => {
    init({
      integrations: [
        browserTracingIntegration({
          enableInp: true,
        }),
      ],
    });
  });
} else {
  import("@sentry/nextjs").then(({ init, browserTracingIntegration, replayIntegration }) => {
    init({
      integrations: [
        replayIntegration({
          maskAllText: true,
          blockAllMedia: true,
        }),
        browserTracingIntegration({
          enableInp: true,
        }),
      ],
    });
  });
}

I'm not worried about subsequent pages not having replay after /no-replay page is loaded because this is an app that is currently in migration phase so there is no SPA style navigation using Next.js' Link component and all links are actually regular anchors so full page reloads are happening. This means that if you navigate to a page that isn't /no-replay page, Sentry will then initialize with Replay integration (the else block).

I'm just worried that this might cause issues because of some specifics on how Sentry works. There are some docs about tree shaking (https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/), but those don't mention dynamically importing Sentry like this.

It would be great if someone with deeper understanding of Sentry and tree shaking would be able to help me out to see if this could work. I did try to use next bundle analyzer with this setup, but not really sure if it's working as it should. For example I get two of the same bundles containing Replay (screenshot below), but I do get two other Sentry related bundles that are different in size, but one does contain some Next related stuff so I'm not sure what's going on (two more screenshots below).

Two bundles containing replay:

One bundle with Sentry dominating:

Other bundle with Sentry dominating:

[AbhiPrasad]

Hey! We are chatting about this here #11460 - please follow that GH issue for more details on lazy loading.