@sentry/nextjs + runtime = "edge" causes .next/app-build-manifest.json not to be populated and builds to break

[nrgnrg]

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?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

7.51.0

Framework Version

13.4.1

Link to Sentry event

No response

SDK Setup

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

Sentry.init({
  dsn: process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN,
  tracesSampleRate: 0.2,
  debug: false,
  replaysOnErrorSampleRate: 1,
  replaysSessionSampleRate: 0.1,
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay({
      maskAllText: true,
      blockAllMedia: true,
    }),
  ],
});

Steps to Reproduce

1. Setup a default template next project using the automatic setup and the app directory https://nextjs.org/docs/getting-started/installation
2. Used the wizard and set up "@sentry/nextjs" with the defaults for the next.config, client.config, edge.config, server.config

everything looks good at this point, next start works etc...

3. add export const runtime = "edge"; to the root layout

next start breaks because .next/app-build-manifest.json is now empty.

Removing withSentryConfig and returning the next config to the original default config or removing export const runtime = "edge"; gets the build working again and the manifest correctly populated.

Expected Result

Nothing should change by adding export const runtime = "edge";

Actual Result

// .next/app-build-manifest.json

{
  "pages": {}
}

[lforst]

Thanks for reporting this. I can reproduce. We will look at this with urgency.

[lforst]

Just to give a very small update here. We're currently talking to Vercel to maybe find a better solution to doing auto wrapping of server components. Currently it is very deeply nested in the SDK so we don't have a quick fix.

I do have a workaround for you however: You should be able to use the excludeServerRouts option to opt out of auto instrumentation for the routes relevant routes and then manually wrap them using wrapServerComponentWithSentry.

[nrgnrg]

ok cool, thanks for the update @lforst 🙂

[isaacseymour]

I'm struggling to get that workaround to work: the docs on excludeServerRoutes aren't clear on what I should put in there.

E.g. if my server component is at app/thing/[param]/other/page.tsx, what should go in excludeServerRoutes? I _think /thing/[param]/other based on the docs, but that doesn't seem to fix the issue 😬

[lforst]

@isaacseymour I think that should work. One question: Are you on windows?

[isaacseymour]

Nope! macOS

I've got this working by setting the excludeServerRoutes to [/.*/]`, but that does mean I have to manually wrap every server component and route handler 🙈