JavaScript heap out of memory, after adding Sentry to my Vite-React Project - GitLab

[baharalidurrani]

Environment

Versions:

"@sentry/react": "^8.13.0",
"@sentry/vite-plugin": "^2.20.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.1",
"@vitest/ui": "^1.6.0",
"vite": "^5.3.1",
"vite-plugin-svgr": "^4.2.0",
"vitest": "^1.6.0"

Steps to Reproduce

1. Somewhat simple Vite-React Project using Typescript, yarn.
2. Major dependencies: MUI, react-router-dom, react-redux, google-libphonenumber etc.
3. Config files as mentioned below.
4. Build project using vite build --mode production on Gitlab

vite.config.ts

import { sentryVitePlugin } from '@sentry/vite-plugin';
import react from '@vitejs/plugin-react';
import { defineConfig, loadEnv } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, '.', '');
  const isSentry = Boolean(env.VITE_SENTRY_DNS);

  return {
    plugins: [
      react(),
      svgr(),
      isSentry &&
        sentryVitePlugin({
          org: 'REDACTED_ORG',
          project: 'REDACTED_PROJECT',
        }),
    ],

    resolve: { alias: { src: '/src' } }, // for absolute paths baseUrl: '.'

    ...(isSentry
      ? {
          build: {
            sourcemap: true,
            rollupOptions: {
              /** To suppress the following `node_modules` sourcemap warning:
               * Error when using sourcemap for reporting an error: Can't resolve original location of error.
               */
              onwarn(warning, defaultHandler) {
                if (warning.code === 'SOURCEMAP_ERROR') return;
                defaultHandler(warning);
              },
            },
          },
        }
      : {}),
  };
});

sentry.ts -> injected in main.tsx

import * as Sentry from '@sentry/react';
import { environment } from 'src/environments/environment';

if (environment.VITE_SENTRY_DNS)
  Sentry.init({
    environment: environment.MODE,
    dsn: environment.VITE_SENTRY_DNS,
    integrations: [Sentry.replayIntegration()],
    // Session Replay
    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
    replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
  });

Expected Result

Should build, generate sourcemap, and upload to sentry.

Actual Result

Adding sentryVitePlugin consumes too much heap memory. I know it could be a problem with the Gitlab runner, but the sentryVitePlugin shouldn’t occupy much of the memory anyway. It works fine if I remove the plugin.

Failed Build Logs on Gitlab:

yarn build:production
yarn run v1.22.19
$ export NODE_ENV=production && tsc --noEmit && vite build --mode production
vite v5.3.1 building for production...
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
transforming...
node_modules/google-libphonenumber/dist/libphonenumber.js (38:206): Use of eval in "node_modules/google-libphonenumber/dist/libphonenumber.js" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/google-libphonenumber/dist/libphonenumber.js (40:350): Use of eval in "node_modules/google-libphonenumber/dist/libphonenumber.js" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/google-libphonenumber/dist/libphonenumber.js (56:475): Use of eval in "node_modules/google-libphonenumber/dist/libphonenumber.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 13655 modules transformed.
rendering chunks...
<--- Last few GCs --->
[94:0x65e6f20]    44471 ms: Scavenge 2040.2 (2084.9) -> 2039.4 (2094.9) MB, 17.47 / 0.00 ms  (average mu = 0.840, current mu = 0.910) allocation failure; 
[94:0x65e6f20]    46670 ms: Mark-Compact (reduce) 2045.1 (2095.5) -> 2041.9 (2083.7) MB, 1086.91 / 0.00 ms  (+ 757.2 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1895 ms) (average mu = 0.672, current mu = 0.53
<--- JS stacktrace --->
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----
 1: 0xcd8bd6 node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/usr/local/bin/node]
 2: 0x10aedc0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/usr/local/bin/node]
 3: 0x10af0a7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/usr/local/bin/node]
 4: 0x12ce085  [/usr/local/bin/node]
 5: 0x12e4ba8  [/usr/local/bin/node]
 6: 0x12e664a v8::internal::Heap::HandleGCRequest() [/usr/local/bin/node]
 7: 0x12460a8 v8::internal::StackGuard::HandleInterrupts(v8::internal::StackGuard::InterruptLevel) [/usr/local/bin/node]
 8: 0x16cac2f v8::internal::Runtime_HandleNoHeapWritesInterrupts(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
 9: 0x79e94fea53f6 
Aborted (core dumped)
error Command failed with exit code 134.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Cleaning up project directory and file based variables
00:00
ERROR: Job failed: exit code 1

[lforst]

Please see https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/512 and in particular: https://github.com/getsentry/sentry-javascript-bundler-plugins/issues/512#issuecomment-2122127809 Thanks!

[simenravnik]

Try increasing nodejs memory limit. I had similar issue in my github actions deployment script. Solved it using the following:

- name: Build the application
  env:
    NODE_OPTIONS: "--max_old_space_size=4096" # Increase memory limit for build
  run: |
    npm ci
    npm run build