refactor: lazy-load sentry (#6128)

* refactor: lazy-load sentry

* chore: other sentry changes

next.config.mjs

@@ -3,7 +3,12 @@
 import { withSentryConfig } from '@sentry/nextjs';
 import withNextIntl from 'next-intl/plugin';
 
-import { BASE_PATH, ENABLE_STATIC_EXPORT } from './next.constants.mjs';
+import {
+  BASE_PATH,
+  ENABLE_STATIC_EXPORT,
+  SENTRY_DSN,
+  SENTRY_ENABLE,
+} from './next.constants.mjs';
 import { redirects, rewrites } from './next.rewrites.mjs';
 
 /** @type {import('next').NextConfig} */
@@ -78,28 +83,37 @@ const sentrySettings = {
   org: 'nodejs-org',
   // Define the Sentry Project on our Sentry Organisation
   project: 'nodejs-org',
+  // Sentry DSN for the Node.js Website
+  dsn: SENTRY_DSN,
 };
 
 /** @type {import('@sentry/nextjs/types/config/types').UserSentryOptions} */
 const sentryConfig = {
   // Upload Next.js or third-party code in addition to our code
   widenClientFileUpload: true,
-  // Transpile the Sentry code too since we target older browsers in our .browserslistrc
-  transpileClientSDK: true,
   // Attempt to circumvent ad blockers
-  tunnelRoute: ENABLE_STATIC_EXPORT ? undefined : '/monitoring',
+  tunnelRoute: !ENABLE_STATIC_EXPORT && '/monitoring',
   // Prevent source map comments in built files
   hideSourceMaps: false,
   // Tree shake Sentry stuff from the bundle
   disableLogger: true,
+  // Applies same WebPack Transpilation as Next.js
+  transpileClientSDK: true,
 };
 
-// Next.js Config with Sentry Configuration
-export default withSentryConfig(
+// Next.js Configuration with `next.intl` enabled
+const nextWithIntl = withNextIntl('./i18n.tsx')(nextConfig);
+
+// Next.js Configuration with `sentry` enabled
+const nextWithSentry = withSentryConfig(
   // Next.js Config with i18n Configuration
-  withNextIntl()(nextConfig),
+  nextWithIntl,
   // Default Sentry Settings
   sentrySettings,
   // Default Sentry Extension Configuration
   sentryConfig
 );
+
+// Decides wheter enabling Sentry or not
+// By default we only want to enable Sentry within a Vercel Environment
+export default SENTRY_ENABLE ? nextWithSentry : nextWithIntl;

next.constants.mjs

@@ -190,3 +190,9 @@ export const DEFAULT_VIEWPORT = {
  */
 export const SENTRY_DSN =
   'https://02884d0745aecaadf5f780278fe5fe70@o4506191161786368.ingest.sentry.io/4506191307735040';
+
+/**
+ * This states if Sentry should be enabled and bundled within our App
+ */
+export const SENTRY_ENABLE =
+  process.env.NODE_ENV === 'development' || !!VERCEL_ENV;

sentry.client.config.ts

@@ -1,37 +1,17 @@
-import { init, Replay } from '@sentry/nextjs';
+import { SENTRY_DSN, SENTRY_ENABLE } from '@/next.constants.mjs';
 
-import { SENTRY_DSN, VERCEL_ENV } from '@/next.constants.mjs';
-
-init({
-  // Only run Sentry on Vercel Environment
-  enabled: !!VERCEL_ENV,
-  // Tell Sentry where to send events
-  dsn: SENTRY_DSN,
-  // Percentage of events to send to Sentry (1% of them) (for performance metrics)
-  tracesSampleRate: 0.01,
-  // Percentage of sessions to sample (1%)
-  replaysSessionSampleRate: 0.01,
-  // Percentage of errors to sample (all of them)
-  replaysOnErrorSampleRate: 1.0,
-  // Support replaying client sessions to capture unhappy paths
-  integrations: [new Replay()],
-  // We only want to capture errors from _next folder on production
-  // We don't want to capture errors from preview branches here
-  allowUrls: ['https://nodejs.org/_next'],
-  // Filter-out Events/Errors that are invalid for us
-  beforeSend: (event, hint) => {
-    const originalException = hint.originalException as Error;
-
-    // All the Events we send must have a message and stack trace
-    if (originalException?.message && originalException?.stack) {
-      // All our Events come eventually from code that originates on node_modules
-      // so everything else should be discarded
-      // Even React Errors or other errors will eventually have node_modules in the code
-      if (String(originalException.stack).includes('node_modules')) {
-        return event;
-      }
-    }
-
-    return null;
-  },
-});
+// This lazy-loads Sentry on the Browser
+import('@sentry/nextjs').then(({ init }) =>
+  init({
+    // Only run Sentry on Vercel Environment
+    enabled: SENTRY_ENABLE,
+    // Tell Sentry where to send events
+    dsn: SENTRY_DSN,
+    // Disable Sentry Tracing as we don't need to have it
+    // as Vercel already does Web Vitals and Performance Measurement on Client-Side
+    enableTracing: false,
+    // We only want to capture errors from _next folder on production
+    // We don't want to capture errors from preview branches here
+    allowUrls: ['https://nodejs.org/_next'],
+  })
+);

sentry.edge.config.ts

@@ -1,10 +1,10 @@
 import { init } from '@sentry/nextjs';
 
-import { SENTRY_DSN, VERCEL_ENV } from '@/next.constants.mjs';
+import { SENTRY_DSN, SENTRY_ENABLE } from '@/next.constants.mjs';
 
 init({
   // Only run Sentry on Vercel Environment
-  enabled: !!VERCEL_ENV,
+  enabled: SENTRY_ENABLE,
   // Tell Sentry where to send events
   dsn: SENTRY_DSN,
   // Percentage of events to send to Sentry (1% of them) (for performance metrics)

sentry.server.config.ts

@@ -1,11 +1,11 @@
 import { init } from '@sentry/nextjs';
 import { ProfilingIntegration } from '@sentry/profiling-node';
 
-import { SENTRY_DSN, VERCEL_ENV } from '@/next.constants.mjs';
+import { SENTRY_DSN, SENTRY_ENABLE } from '@/next.constants.mjs';
 
 init({
   // Only run Sentry on Vercel Environment
-  enabled: !!VERCEL_ENV,
+  enabled: SENTRY_ENABLE,
   // Tell Sentry where to send events
   dsn: SENTRY_DSN,
   // Percentage of events to send to Sentry (1% of them) (for performance metrics)