⚡ investigate bundle sizes

[bjornharvold]

Problem Statement

This is a screenshot of my Angular main bundle. 320 out of 401Kb is Sentry.

Here is my configuration:

import * as Sentry from '@sentry/browser';

export function initSentry(
  release: string,
  environment: any,
  enableFeedback: boolean,
): void {
  if (environment.environment !== 'local') {

    Sentry.init({
      release,
      environment: environment.environment,
      ignoreErrors: [
        'ResizeObserver loop limit exceeded',
        'Non-Error promise rejection captured with value: undefined',
        'webkit-masked-url://hidden/',
        "undefined is not an object (evaluating 'n.length')",
        "ReferenceError: Can't find variable: gmo"
      ],
      dsn: environment.sentry.dsn,
      // beforeSend(event, hint) {
      //   const eventConditional = event?.exception?.values != null && event?.exception?.values[0]?.value?.startsWith('Non-Error exception captured');
      //   let messageConditional = false;

      //   if (hint?.originalException != null && hint?.originalException instanceof Error) {
      //     const originalExceptionError: Error = hint.originalException;
      //     messageConditional = originalExceptionError.message.startsWith('Non-Error exception captured');
      //   }
      //   /* eslint-disable */
      //   const isNonErrorException = eventConditional || messageConditional;
      //   /* eslint-enable */

      //   if (isNonErrorException) {
      //     // We want to ignore those kind of errors
      //     console.warn('Received a non-standard error', event);
      //     return null;
      //   }
      //   return event;
      // },
      // This sets the sample rate to be 10%. You may want this to be 100% while
      // in development and sample at a lower rate in production
      replaysSessionSampleRate: 0.1,
      // If the entire session is not sampled, use the below sample rate to sample
      // sessions when an error occurs.
      replaysOnErrorSampleRate: 1.0,
      integrations: enableFeedback ?
      [
        Sentry.replayIntegration({
          networkDetailAllowUrls: environment.sentry.networkDetailAllowUrls,
          networkRequestHeaders: environment.sentry.networkRequestHeaders,
          networkResponseHeaders: environment.sentry.networkResponseHeaders,
        }),
        Sentry.replayCanvasIntegration(),
        Sentry.browserProfilingIntegration(),
        Sentry.browserTracingIntegration({
          shouldCreateSpanForRequest: (url: any) => {
            // return true if the url is one of our urls
            const origins = environment.sentry.tracingOrigins as Array<string>;

            return origins.some((origin) => url.includes(origin));
          },
        }),
        Sentry.feedbackIntegration({
          // Additional SDK configuration goes in here, for example:
          colorScheme: 'system',
          messagePlaceholder: 'Please submit bugs ONLY. This form is NOT for booking inquiries.',
          showBranding: false,
        }),
      ]
      :
      [
        Sentry.replayIntegration({
          networkDetailAllowUrls: environment.sentry.networkDetailAllowUrls,
          networkRequestHeaders: environment.sentry.networkRequestHeaders,
          networkResponseHeaders: environment.sentry.networkResponseHeaders,
        }),
        Sentry.replayCanvasIntegration(),
        Sentry.browserProfilingIntegration(),
        Sentry.browserTracingIntegration({
          shouldCreateSpanForRequest: (url: any) => {
            // return true if the url is one of our urls
            const origins = environment.sentry.tracingOrigins as Array<string>;

            return origins.some((origin) => url.includes(origin));
          },
        }),
      ]
      ,
      tracesSampleRate: 0.2,
      profilesSampleRate: 0.2,
      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
      tracePropagationTargets: environment.sentry.networkDetailAllowUrls,
      sendDefaultPii: true,
    });
  }
}

Solution Brainstorm

It is crucial to keep the main bundle as small as possible to speed up the initial load of our apps. What can be done to mitigate a 300% increase in bundle size?

Additional Context

No response

Priority

_{React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding +1 or me too, to help us triage it.}

[linear]

JS-1770

[chargome]

Hey @bjornharvold, looking at your bundle the main size contributor is session replay. You might want to check out our docs for lazily loading integrations which would reduce the initial bundle size hit drastically.