Wrong environment configuration when in Vercel preview environment

[IGassmann]

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 package are you using?

@sentry/nextjs

SDK Version

7.34.0

Framework Version

Next.js 13.0.4

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

1. Create a new Next.js app with Sentry
2. Deploy on Vercel
3. Enable Sentry integration
4. Deploy the app in a Vercel preview environment
5. Open the preview deployment URL
6. Simulate an error

If you inspect the event produced by the simulated error, you will see that the environment value is set to production, instead of preview. This can lead developers to try to solve issues that were actually only happening in the preview environments. It also pollutes production performance metrics with values that are coming from the preview environments.

This is happening because, by default, Sentry gets its environment value from NODE_ENV. However, this value will always be set to production when the project is built with next build and to development when the project is built with next dev. This is due to how Webpack works. To work around this issue, Vercel provides the VERCEL_ENV (available on the server only) and NEXT_PUBLIC_VERCEL_ENV (available both on the browser and server) environment variables, which contain the correct environment value.

Expected Result

The environment value should be set to the actual environment value coming from Vercel.

This can be solved in both ways:

1. Have the Vercel integration add another environment variable (NEXT_PUBLIC_SENTRY_ENVIRONMENT) that is equal to the value of NEXT_PUBLIC_VERCEL_ENV, and prioritize it over NODE_ENV.
2. Make Sentry code support the NEXT_PUBLIC_VERCEL_ENV value by default

Until then, one can use the following workaround in all the Sentry configuration files:

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // We need to explicitly set the environment here, otherwise it will be set to "production" even
  // when the app running in a preview environment. This is because the environment configuration
  // defaults to NODE_ENV which is "production" when built with `pnpm build` and "development" when
  // running `pnpm dev`.
  environment: process.env.NEXT_PUBLIC_VERCEL_ENV,
  // ...
});

Actual Result

[AbhiPrasad]

Hey @IGassmann thanks for writing in! Going to mark this as something we can improve with the NextJS SDK (we are already working toward making improvements, see: #6588).

PRs are welcome, but backlogging in the mean time. Thanks!

[IGassmann]

Linking #7014 PR for reference.

[lforst]

I think this is more of a philosophical question of whether we want to utilize the given env vars (adding "magic") or if we want to be predictable.

I guess in this case the magic makes a lot of sense and the change is easy. Let me whip a PR up.