Source maps are renamed after deploy

[alex-crudu]

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/browser

SDK Version

8.7.0

Framework Version

Next 14.1.0

Link to Sentry event

https://datadirects.sentry.io/issues/5423182343/?project=4506767086190592&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=30d&stream_index=1

SDK Setup

import * as Sentry from '@sentry/nextjs'

Sentry.init({
dsn: '.....',
debug: false,
tracesSampleRate: 0,
replaysOnErrorSampleRate: 0,
replaysSessionSampleRate: 0,
environment: process.env.NEXT_PUBLIC_SENTRY_ENV,
})

Steps to Reproduce

After updating Sentry to v8.2.1 I am deploying the project and my sourcemaps started to have names that are different than my build artefacts names and i get this error:

Example of a build prior to update

Example of build after update:

here's my next.config.js

const withNextIntl = require('next-intl/plugin')()
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

const buildId = Date.now().toString()
console.log('BUILD ID:', buildId)

const config = {
  generateBuildId: () => buildId,
  output: 'standalone',
  reactStrictMode: true,
  productionBrowserSourceMaps: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**',
      },
    ],
  },
  webpack(config) {
    const fileLoaderRule = config.module.rules.find((rule) =>
      rule.test?.test?.('.svg')
    )

    config.module.rules.push(
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: ['@svgr/webpack'],
      }
    )

    fileLoaderRule.exclude = /\.svg$/i

    // // Ignore opentelemetry warnings
    // if (isServer) {
    //   config.ignoreWarnings = [{ module: /opentelemetry/ }]
    // }

    return config
  },
}

module.exports = withBundleAnalyzer(withNextIntl(config))

const { withSentryConfig } = require('@sentry/nextjs')

if (process.env.NEXT_PUBLIC_SENTRY_ENV === 'prod') {
  module.exports = withSentryConfig(
    module.exports,
    {
      silent: true,
      org: '***',
      project: '***',
    },
    {
      widenClientFileUpload: true,
      transpileClientSDK: true,
      hideSourceMaps: true,
      disableLogger: true,
      automaticVercelMonitors: true,
    }
  )
}

Note, that i added buildId after i updated Sentry, so i am not sure if it might have caused the issue

Expected Result

To have the names matching

Actual Result

Artefact names are renamed and artefacts are not linked.

[Lms24]

Hey @alex-crudu thanks for writing in and apologies for the late reply!

After updating Sentry to v8.2.1

Did you update from version 7 or a previous 8.x version?

Looking at your withSentryConfig call in next.config.js I can see that you're still passing three instead of two arguments. This was changed in version 8, as pointed out in the migration guide. Please update to the new options and let us know if the problem persists.

(With version 8, we bumped the underlying Sentry webpack plugin from 0.x to 2.x which does include some significant sourcemap uploading changes. Perhaps you're running into a problem related to this)

[alex-crudu]

@Lms24 , Thank you very much. Now i'm sorry for the late reply. This wrong config definitely was the problem. Now i've updated it and source maps work as intended 🙌