From 9ab07727ab3d757e75d0df1a5ea8db0bcee77128 Mon Sep 17 00:00:00 2001 From: baked Date: Thu, 16 Mar 2023 05:08:36 +0100 Subject: [PATCH 1/2] fix(nextjs): Fix runtime error for static pages --- .../serverComponentWrapperTemplate.ts | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts b/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts index 1c937a5f355c..501d913fbc1f 100644 --- a/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts +++ b/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts @@ -13,10 +13,20 @@ import * as wrapee from '__SENTRY_WRAPPING_TARGET_FILE__'; import * as Sentry from '@sentry/nextjs'; // @ts-ignore This template is only used with the app directory so we know that this dependency exists. // eslint-disable-next-line import/no-unresolved +import { staticGenerationAsyncStorage } from 'next/dist/client/components/static-generation-async-storage'; +// @ts-ignore This template is only used with the app directory so we know that this dependency exists. +// eslint-disable-next-line import/no-unresolved import { headers } from 'next/headers'; declare function headers(): { get: (header: string) => string | undefined }; +declare const staticGenerationAsyncStorage: { + getStore: () => { + isStaticGeneration: boolean; + dynamicShouldError: boolean; + }; +}; + type ServerComponentModule = { default: unknown; }; @@ -38,9 +48,15 @@ if (typeof serverComponent === 'function') { // If we call the headers function inside the build phase, Next.js will automatically mark the server component as // dynamic(SSR) which we do not want in case the users have a static component. if (process.env.NEXT_PHASE !== 'phase-production-build') { - const headersList = headers(); - sentryTraceHeader = headersList.get('sentry-trace'); - baggageHeader = headersList.get('baggage'); + // The headers function can also not be used for revalidaton of previously statically generated pages as that + // results in a Runtime error because the page switches from static to dynamic + const staticGenerationStore = staticGenerationAsyncStorage.getStore(); + const dynamicAllowed = !staticGenerationStore?.isStaticGeneration && !staticGenerationStore?.dynamicShouldError; + if (dynamicAllowed) { + const headersList = headers(); + sentryTraceHeader = headersList.get('sentry-trace'); + baggageHeader = headersList.get('baggage'); + } } return Sentry.wrapServerComponentWithSentry(originalFunction, { From 3179a0103cb25c4dac49a907573ff002c530883e Mon Sep 17 00:00:00 2001 From: baked Date: Thu, 16 Mar 2023 20:50:32 +0100 Subject: [PATCH 2/2] fix(nextjs): Fix runtime error for static pages --- .../serverComponentWrapperTemplate.ts | 20 +++++-------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts b/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts index 501d913fbc1f..7a8e755a147a 100644 --- a/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts +++ b/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts @@ -13,20 +13,10 @@ import * as wrapee from '__SENTRY_WRAPPING_TARGET_FILE__'; import * as Sentry from '@sentry/nextjs'; // @ts-ignore This template is only used with the app directory so we know that this dependency exists. // eslint-disable-next-line import/no-unresolved -import { staticGenerationAsyncStorage } from 'next/dist/client/components/static-generation-async-storage'; -// @ts-ignore This template is only used with the app directory so we know that this dependency exists. -// eslint-disable-next-line import/no-unresolved import { headers } from 'next/headers'; declare function headers(): { get: (header: string) => string | undefined }; -declare const staticGenerationAsyncStorage: { - getStore: () => { - isStaticGeneration: boolean; - dynamicShouldError: boolean; - }; -}; - type ServerComponentModule = { default: unknown; }; @@ -48,14 +38,14 @@ if (typeof serverComponent === 'function') { // If we call the headers function inside the build phase, Next.js will automatically mark the server component as // dynamic(SSR) which we do not want in case the users have a static component. if (process.env.NEXT_PHASE !== 'phase-production-build') { - // The headers function can also not be used for revalidaton of previously statically generated pages as that - // results in a Runtime error because the page switches from static to dynamic - const staticGenerationStore = staticGenerationAsyncStorage.getStore(); - const dynamicAllowed = !staticGenerationStore?.isStaticGeneration && !staticGenerationStore?.dynamicShouldError; - if (dynamicAllowed) { + // try/catch because calling headers() when a previously statically generated page is being revalidated causes a + // runtime error in next.js as switching a page from static to dynamic during runtime is not allowed + try { const headersList = headers(); sentryTraceHeader = headersList.get('sentry-trace'); baggageHeader = headersList.get('baggage'); + } catch { + /** empty */ } }