on-demand revalidation fails with "Page changed from static to dynamic at runtime" when Sentry is used with Next 13 and /app directory

[patshologram]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Self-hosted/on-premise

Which SDK are you using? If you use the CDN bundles, please specify the exact bundle (e.g. bundle.tracing.min.js) in your SDK setup.

@sentry/nextjs

SDK Version

7.44.2

Framework Version

Next 13.2.4 & Next Canary

Link to Sentry event

No response

SDK Setup

the default ones generated via npx @sentry/wizard -i nextjs

// This file configures the initialization of Sentry on the browser.
// The config you add here will be used whenever a page is visited.
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

import * as Sentry from '@sentry/nextjs';

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
 dsn: SENTRY_DSN || '<PROVIDE_DSN>',
 // Adjust this value in production, or use tracesSampler for greater control
 tracesSampleRate: 1.0,
 // ...
 // 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
});

Steps to Reproduce

1. check out https://github.com/patshologram/revalidation-error-with-middleware
2. search for PROVIDE_ and set the DSN, project and org name
3. start with yarn build && yarn start
4. call http://localhost:3000/api/revalidate

Side-note: if sentry is removed from the next.config.js, on-demand revalidation works fine

Expected Result

On-demand revalidation can be executed without an error

Actual Result

Page changed from static to dynamic at runtime /, reason: headers
see more here https://nextjs.org/docs/messages/app-static-to-dynamic-error
 at Object.staticGenerationBailout (/Users/martonpa/Sources/revalidation-error-with-middleware/.next/server/chunks/516.js:3704:21)
 at headers (/Users/martonpa/Sources/revalidation-error-with-middleware/.next/server/chunks/516.js:3545:39)
 at Object.apply (/Users/martonpa/Sources/revalidation-error-with-middleware/.next/server/app/page.js:172:84)
 at Object.preloadComponent (/Users/martonpa/Sources/revalidation-error-with-middleware/node_modules/next/dist/server/app-render/preload-component.js:18:22)
 at /Users/martonpa/Sources/revalidation-error-with-middleware/node_modules/next/dist/server/app-render/index.js:471:85
 at async createComponentTree (/Users/martonpa/Sources/revalidation-error-with-middleware/node_modules/next/dist/server/app-render/index.js:471:29)
 at async /Users/martonpa/Sources/revalidation-error-with-middleware/node_modules/next/dist/server/app-render/index.js:551:52

[patshologram]

Additional note: it seems like this issue should have been tackled with #7476 in Version 7.44.0 but as provided in the reproduction sample, the problem still persists.

[AbhiPrasad]

Hey @patshologram - strange that this is happening. We run this outside of build here, which should avoid nextjs from detecting this, but maybe something else is going on:

sentry-javascript/packages/nextjs/src/config/templates/serverComponentWrapperTemplate.ts

Line 40 in 1418582

if (process.env.NEXT_PHASE !== 'phase-production-build') {

Assigning to @lforst to take a look when he's back on Monday!

[lforst]

Thanks for reporting this! I took a look.

The reason the try catch isn't working on its own is because Next.js is mutating some global state (or state isolated to some async context) and later will throw an error in a place where we can't catch it.

I guess the solution to this would be to do what @baked-dev originally did in this commit even though it might be a bit more fragile since this is not part of the Next.js public API.

I put this into our backlog.