AWS Amplify OOM Build Fail Sentry sentry/[email protected]

[rubenjamesdc-singlifeph]

Only happens when sentry is installed, tested the ampify build by uninstalling the package results to build success with no Heap allocation errors. Already tried Tree Shaking from docs to no avail.

Dependecies

• "@sentry/nextjs": "7.118.0", // tested other versions, from 8^ this one is the only compatible with current Next version
• "next": "13.1.2", // cant update next version for now.

Build Logs

[WARNING]: <--- Last few GCs --->
[WARNING]: <--- Last few GCs --->
                                    [1279:0x562fb00]   371282 ms: Scavenge (reduce) 1969.2 (2071.1) -> 1969.1 (2071.9) MB, 11.0 / 0.0 ms  (average mu = 0.285, current mu = 0.081) allocation failure
                                    [1279:0x562fb00]   372293 ms: Mark-sweep (reduce) 1976.3 (2078.4) -> 1976.2 (2079.1) MB, 999.8 / 0.0 ms  (average mu = 0.296, current mu = 0.308) allocation failure scavenge might not succeed
                                    <--- JS stacktrace --->
                                    FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
2024-07-08T07:24:46.458Z [WARNING]: 1: 0xb08e80 node::Abort() [node]
                                    2: 0xa1b70e  [node]
                                    3: 0xce1890 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
                                    4: 0xce1c37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
                                    5: 0xe992a5  [node]
                                    6: 0xea8f6d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
                                    7: 0xeabc6e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
                                    8: 0xe6cee2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node]
                                    9: 0xe654f4 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawWithImmortalMap(int, v8::internal::AllocationType, v8::internal::Map, v8::internal::AllocationAlignment) [node]
                                    10: 0xe67200 v8::internal::FactoryBase<v8::internal::Factory>::NewRawOneByteString(int, v8::internal::AllocationType) [node]
                                    11: 0x120524d v8::internal::Runtime_StringBuilderConcat(int, unsigned long*, v8::internal::Isolate*) [node]
                                    12: 0x15d9c19  [node]
[WARNING]: 1268 Aborted                 (core dumped) npm run build
 [ERROR]: !!! Build failed

Next Config

const { withSentryConfig } = require('@sentry/nextjs');

const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: [process.env.NEXT_PUBLIC_AWS_S3_BUCKET],
  },
  transpilePackages: ['mui-one-time-password-input'],
  webpack: (config, { webpack }) => {
    config.resolve.alias.canvas = false;
    config.resolve.alias.encoding = false;

    config.plugins.push(
      new webpack.DefinePlugin({
        __SENTRY_DEBUG__: false,
        __RRWEB_EXCLUDE_IFRAME__: true,
        __RRWEB_EXCLUDE_SHADOW_DOM__: true,
        __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
      }),
    );

    /**
     * @description  SVG React Component Generator (SVGR): A tool specifically designed for converting SVGs into React components.
     * It uses SVGO internally to optimize SVG files. Check `svgo.config.js` for more info.
     * @link Learn more here: https://react-svgr.com/
     */
    config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|ts)x?$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

/**
 * @documentaion https://docs.sentry.io/platforms/javascript/guides/nextjs/
 */

const sentryOptions = {
  org: 'mySentryOrgName',
  project: 'javascript-nextjs',
  // // An auth token is required for uploading source maps.
  transpileClientSDK: false,
  disableServerWebpackPlugin: true,
  disableClientWebpackPlugin: true,
  authToken: 'mySentryAuthToken',
  silent: false, // Can be used to suppress logs
  hideSourceMaps: true, // Hide source maps to prevent the built files from containing a sourceMappingURL comment
  disableLogger: true, // Disable the Sentry SDK Debug Logger to save bundle size
};

module.exports = withSentryConfig(nextConfig, sentryOptions);

Client config

as for sentry.edge.config.js & sentry.server.config.js all codes are commented out since I only want to use the client side, and in order to lessen the usage of Sentry Init.

/* eslint-disable no-unused-vars */
import {
  init,
  breadcrumbsIntegration,
  globalHandlersIntegration,
  linkedErrorsIntegration,
  dedupeIntegration,
} from '@sentry/nextjs';

/**
 * @documentaion https://docs.sentry.io/platforms/javascript/guides/nextjs/
 */

/* custom fucntions */
// List of exclusion patterns
const exclusionPatterns = [
  'System Error: "Failed to create event log."',
  // Add more exclusion patterns as needed
];

function shouldExcludeError(event, hint) {
  if (hint && hint.originalException && hint.originalException.data) {
    const errorMessage = String(hint.originalException.message || hint.originalException);
    return exclusionPatterns.some((pattern) => errorMessage.includes(pattern));
  }
  return false;
}

function serializeEvent(event) {
  if (event && event.request && event.request.data) {
    event.request.data = JSON.stringify(event.request.data);
  }
  return event;
}

init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // Replay may only be enabled for the client-side
  integrations: [
    breadcrumbsIntegration(),
    globalHandlersIntegration(),
    linkedErrorsIntegration(),
    dedupeIntegration(),
  ],

  /** @sentryOptions Recommend adjusting this value in production. @sentryOptions */
  /**
   * @function TraceSampleRate
   * @description Provides an even cross-section of transactions, no matter where in your app or under what circumstances they occur.
   */

  tracesSampleRate: 1.0, // 0 = 0%, 0.5 = 50%, 1.0 = 100%,
  attachStacktrace: true,

  /**
   * @function sampleRate
   * @description Samples different transactions at different rates
   */

  //   sampleRate: 0.5, // 0 = 0%, 0.5 = 50%, 1.0 = 100%,

  /**
   * @function ReplaySessions/Errors
   * @description Captures Replay for 0% of all session, and 100% session with an Error
   */

  //   replaysSessionSampleRate: 0,
  // replaysOnErrorSampleRate: 1.0,

  /**
   * @function Debug
   * @description For Sentry Logs and Debugging.
   */
  //   debug: true,

  /**
   * @function EventProcessors
   * @description You can enrich events with additional/custom data by adding your own event processors.
   */

  beforeSend(event, hint) {
    if (shouldExcludeError(event, hint)) {
      return null; // Exclude the event
    }

    return serializeEvent(event); // Send the event to Sentry
  },

  beforeBreadcrumb(breadcrumb) {
    if (breadcrumb.category === 'console' && breadcrumb.level === 'warning') {
      return null;
    }

    return breadcrumb;
  },
  // Note: if you want to override the automatic release value, do not set a
  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
  // that it will also get attached to your source maps
});