Remix - enable tree shaking

[alexblack]

Hi, it looks to me like tree shaking isn't working (or working well) with Remix and esbuild. It is working well for us with our code, an other libraries like HeroIcons.

I read the docs: https://docs.sentry.io/platforms/javascript/guides/remix/configuration/tree-shaking/

But I don't see how to set those flags like _SENTRY_DEBUG__ in the context of a remix esbuild build.

Thanks!

Alex

[AbhiPrasad]

Hey! You can use https://esbuild.github.io/api/#define to set flags like __SENTRY_DEBUG__, which should then tree-shake this automatically.

As for the rest - could you provide your Sentry.init from your client config? That will allow us to tell what should/shouldn't be in the final bundle.

In addition, is this bundle analysis with --tree-shaking=true supplied to esbuild? I think you need that flag, or --bundle to enable tree shaking with esbuild.

[alexblack]

Thanks. Do you know how to do that in the context of remix? Its not obvious that it's possible to configure esbuild

…

On Mon, Feb 6, 2023, 5:14 AM Abhijeet Prasad ***@***.***> wrote: Hey! You can use https://esbuild.github.io/api/#define to set flags like __SENTRY_DEBUG__, which should then tree-shake this automatically. As for the rest - could you provide your Sentry.init from your client config? That will allow us to tell what should/shouldn't be in the final bundle. In addition, is this bundle analysis with --tree-shaking=true supplied to esbuild? I think you need that flag, or --bundle to enable tree shaking with esbuild. — Reply to this email directly, view it on GitHub <#7058 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABELQSRWOFSGDW64TEJOW3WWD2LJANCNFSM6AAAAAAUSHQGJY> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[AbhiPrasad]

From remix-run/remix#2437, it seems https://www.npmjs.com/package/remix-esbuild-override should work!

[alexblack]

thanks I will take a look. While I believe you will most likely get a lot of benefit from using this library, it can sometimes destroy your product scares me a bit! It'd be great if there was a more natural way to achieve reduced bundle size when using Sentry with Remix.

[alexblack]

I tried this, with this in my remix.config.js:

// eslint-disable-next-line import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
const { withEsbuildOverride } = require('remix-esbuild-override');

withEsbuildOverride((option, { isServer, isDev }) => {
  return {
    ...option,
    define: {
      ...option.define,
      __SENTRY_DEBUG__: false,
      __SENTRY_TRACING__: false
    },
  };
});

It doesn't seem to have impacted the sentry part of the bundle size much, I think it went down 9kb. Is that the expected result?

[alexblack]

Here is my Sentry.init on the client:

export const initSentry = () => {
  Sentry.init({
    beforeSend,
    dsn: SENTRY_ADDON_DSN,
    tracesSampleRate: getApp() === 'syncwith' ? 1 : 0.05,
    sendDefaultPii: true,
    normalizeDepth: 6, // stringify deeper objects
    integrations: [
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(
          useEffect,
          useLocation,
          useMatches
        ),
      }),
    ],
  });

[alexblack]

also, your docs here https://docs.sentry.io/platforms/javascript/guides/remix/configuration/tree-shaking/ have an anchor default integrations that links to https://webpack.js.org/plugins/define-plugin/ which seems like a mistake

[alexblack]

So... how do I determine what the default integrations are, so I can include them in a custom init?

[alexblack]

Ok here's what I've got, does this look correct?

export const initSentry = () => {
  const client = new BrowserClient({
    beforeSend,
    dsn: SENTRY_ADDON_DSN,
    tracesSampleRate: getApp() === 'syncwith' ? 1 : 0.05,
    sendDefaultPii: true,
    normalizeDepth: 6, // stringify deeper objects
    transport: makeFetchTransport,
    stackParser: defaultStackParser,
    integrations: [
      ...Sentry.defaultIntegrations,
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.remixRouterInstrumentation(
          useEffect,
          useLocation,
          useMatches
        ),
      }),
    ],
  });

  getCurrentHub().bindClient(client);

  const userId = window.env.USER_ID;
  const userEmail = window.env.USER_EMAIL;

  if (userId || userEmail) {
    Sentry.setUser({
      ...(userId && { id: userId }),
      ...(userEmail && { email: userEmail }),
    });
  }
};

[alexblack]

Ok I've implemented that, and made sure we're avoiding all imports like * as Sentry, and it hasn't helped, Sentry's bundle size is identical.

[lforst]

9kb is about the expected result when you're stripping away the debug statements with __SENTRY_DEBUG__.

The thing is you're still importing BrowserTracing which will effectively "un-treeshake" the tracing part of the SDK.

Doing * as Sentry or import { ... } from '...' shouldn't matter.

Further, looking at your bundle, you can see that a very big part is just RRWeb which is used for Session Replay. Are you using that?

[alexblack]

Thanks for the response.  We're not using replay. I got things working, I think the issue was that Remix uses esbuild, and to properly tree shake requires ESM modules, but our own internal libraries were CJS, and they used sentry too.  

Once we converted them to ESM they treeshake, and it looks like sentry does now too, looks like we're down to 61kb now, nice!