Vercel Integration no longer uploads sourcemap correctly

[octref]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

We've been using Sentry with Next.js. With the recent v8.0 update, the Vercel Integration no longer works and we can't find the source code from the stack trace. Here's the relevant build output:

[13:30:33.644] web:build: 
[13:30:33.644] web:build: > web@0.2.0 build /vercel/path0/apps/web
[13:30:33.644] web:build: > next build
[13:30:33.644] web:build: 
[13:30:34.891] web:build:   ▲ Next.js 14.2.7
[13:30:34.891] web:build:   - Experiments (use with caution):
[13:30:34.891] web:build:     · instrumentationHook
[13:30:34.891] web:build: 
[13:30:34.972] web:build:    Creating an optimized production build ...
[13:30:35.641] web:build: [@sentry/nextjs - Node.js] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:35.642] web:build: [@sentry/nextjs - Node.js] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:35.702] web:build: [@sentry/nextjs - Node.js] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[13:30:51.763] web:build: [@sentry/nextjs - Edge] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:51.763] web:build: [@sentry/nextjs - Edge] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:51.796] web:build: [@sentry/nextjs - Edge] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[13:30:54.074] web:build: [@sentry/nextjs - Client] Warning: No auth token provided. Will not create release. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:54.074] web:build: [@sentry/nextjs - Client] Warning: No auth token provided. Will not upload source maps. Please set the `authToken` option. You can find information on how to generate a Sentry auth token here: https://docs.sentry.io/api/auth/
[13:30:54.083] web:build: [@sentry/nextjs - Client] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[13:30:59.000] web:build:  ✓ Compiled successfully

Locally the build works. With an .env.local that begins with:

SENTRY_AUTH_TOKEN=sntrys_eyJp...

remotely, the SENTRY_AUTH_TOKEN seems to be set in a different format on Vercel, a 64 digit token like a4123...

Expected Result

Stack trace maps to original source code. This used to work with Sentry v7.

Actual Result

Product Area

Issues - Source Maps

Link

No response

DSN

No response

Version

No response

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[chargome]

Hi @octref can you paste your next.config ?

[getsantry[bot]]

Routing to @getsentry/product-owners-issues-source-maps for triage ⏲️

[octref]

const { LANDING_PAGE_URL, BLOG_PAGE_URL } = process.env

/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  experimental: {
    instrumentationHook: true,
  },
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      ...
    ],
  },
  async rewrites() {
    return [
      ...
    ]
  },
}

import { withSentryConfig } from "@sentry/nextjs"

/**
 * @type {Partial<import('@sentry/nextjs').sentryOptions>}
 */
const sentryOptions = {
  // For all available options, see:
  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

  org: "hypermode",
  project: "web",

  // An auth token is required for uploading source maps.
  authToken: process.env.SENTRY_AUTH_TOKEN,

  // Only print logs for uploading source maps in CI
  silent: !process.env.CI,

  // Upload a larger set of source maps for prettier stack traces (increases build time)
  widenClientFileUpload: true,

  // Automatically annotate React components to show their full name in breadcrumbs and session replay
  reactComponentAnnotation: {
    enabled: true,
  },

  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
  // This can increase your server load as well as your hosting bill.
  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
  // side errors will fail.
  tunnelRoute: "/monitoring",

  // Hides source maps from generated client bundles
  hideSourceMaps: true,

  // Automatically tree-shake Sentry logger statements to reduce bundle size
  disableLogger: false,

  // Enables automatic instrumentation of Vercel Cron Monitors.
  // See the following for more information:
  // https://docs.sentry.io/product/crons/
  // https://vercel.com/docs/cron-jobs
  automaticVercelMonitors: true,

  /**
   * Disable Sentry sourcemap upload locally, but enable them for Vercel deployments.
   */
  disableServerWebpackPlugin: !(process.env.VERCEL && process.env.CI),
  disableClientWebpackPlugin: !(process.env.VERCEL && process.env.CI),
}

export default withSentryConfig(nextConfig, sentryOptions)

[Swarzox]

Facing the same issue

[andreiborza]

Hi @octref @Swarzox. Can you check that the process.env.SENTRY_AUTH_TOKEN is correctly set when you're building the app on vercel?

Please provide a reproduction repo so we can narrow this down.

[Johannes-Berggren]

Same issue. All env vars are apparently set correctly after installing the Sentry integration.

[lforst]

The logic for the "Warning: No auth token provided" log message is here:

https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/d9ffb2b867fee969308f29b12c3b7ceee003e910/packages/bundler-plugin-core/src/index.ts#L362-L366

Which is fed from here:

https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/d9ffb2b867fee969308f29b12c3b7ceee003e910/packages/bundler-plugin-core/src/options-mapping.ts#L13

Being called from here:

https://github.com/getsentry/sentry-javascript-bundler-plugins/blob/d9ffb2b867fee969308f29b12c3b7ceee003e910/packages/bundler-plugin-core/src/index.ts#L102

I basically don't see any way that this log message is printed unless:

• you have a .env.sentry-build-plugin with a empty variable like SENTRY_AUTH_TOKEN= (verbatim) or SENTRY_AUTH_TOKEN=""
• you are not setting SENTRY_AUTH_TOKEN at all

Important:

I can vaguely spot from your logs that you are using Turborepo or something similar. Please make absolutely sure that you are letting your monorepo manager forward the environment variable. Turborepo doesn't forward env vars by default from v2 onwards. I ran into this myself ago. Here is a PR where I fixed exactly this: https://github.com/dcramer/peated/pull/214

[vlapo]

Same problem. SENTRY_AUTH_TOKEN is correctly set in vercel project but not available during build.

[andreiborza]

@vlapo do you have any reproduction repo or stackblitz for that? We'd need more info to help investigate.

[vlapo]

I think the problem is not with the repo but with the Vercel integration (or maybe mu setup). For some reason, the SENTRY_AUTH_TOKEN environment variable added by the Sentry Vercel integration is not available during the builds.

Environment variables are available in vercel project:

But in case I log process.env in next.config.js, process.env.SENTRY_AUTH_TOKEN is not available.

I added the auth token directly to next.config.js and everything works now.

[lforst]

For everybody watching this issue, please check that you are forwarding your SENTRY_AUTH_TOKEN environment variable through turborepo: https://turbo.build/repo/docs/crafting-your-repository/using-environment-variables#adding-environment-variables-to-task-hashes

[vlapo]

Thank you @lforst, your suggestion works. Turborepo settings could maybe be mentioned in https://docs.sentry.io/organization/integrations/deployment/vercel/#troubleshooting

[octref]

@lforst Thanks a lot. This fixed the issue for me too:

[lforst]

@vlapo I already thought about mentioning this in the docs but if I continue the thought a bit further than that, it would be ridiculous to point out all the footguns that all the various tools in the JS ecosystem have. I have the soft opinion that people should concern themselves with how the tools that they use work. Imagine all tools point out all the nuances of all other tools. Documentation like this doesn't scale.

[vlapo]

@lfost I understand your perspective regarding documentation of tools in the JS ecosystem. I agree that attempting to document every tool would lead to chaos and be unsustainable.

But, turborepol is a product of Vercel and is widely used by Next.js developers, especially those who host their projects on the Vercel platform. Given this close interconnection, I believe it wouldn't be detrimental to add mentions of Turborepo to the troubleshooting section of the documentation that directly relates to Vercel integration. This approach would provide relevant information to our users without needing to expand the documentation to cover all tools in the ecosystem.