From a28951ece51ad3a8fab0858ae02f09fec132a4d7 Mon Sep 17 00:00:00 2001 From: Claudio W Date: Fri, 17 Nov 2023 23:36:18 +0000 Subject: [PATCH] refactor: lazy-load sentry (#6128) * refactor: lazy-load sentry * chore: other sentry changes --- next.config.mjs | 28 ++++++++++++++++------ next.constants.mjs | 6 +++++ sentry.client.config.ts | 52 +++++++++++++---------------------------- sentry.edge.config.ts | 4 ++-- sentry.server.config.ts | 4 ++-- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/next.config.mjs b/next.config.mjs index 43112a161a2e2..c119bb937dc57 100644 --- a/next.config.mjs +++ b/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; diff --git a/next.constants.mjs b/next.constants.mjs index f0febd5de6cdd..d2f988a2fb964 100644 --- a/next.constants.mjs +++ b/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; diff --git a/sentry.client.config.ts b/sentry.client.config.ts index e6224bf4cfdd4..069933a03a620 100644 --- a/sentry.client.config.ts +++ b/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'], + }) +); diff --git a/sentry.edge.config.ts b/sentry.edge.config.ts index 55317104b0c85..5df0a39014caa 100644 --- a/sentry.edge.config.ts +++ b/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) diff --git a/sentry.server.config.ts b/sentry.server.config.ts index ac57325c76512..4eca5b7e9d497 100644 --- a/sentry.server.config.ts +++ b/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)