Sourcemaps are not being uploaded in `@sentry/nextjs` v7 without adding `sourcemaps` in webpack configuration

saloni-23 commented 1 month ago

Is there an existing issue for this?

[x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[x] I have reviewed the documentation https://docs.sentry.io/
[x] 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.118.0

Framework Version

Next: "12.3.0", @sentry/webpack-plugin: "1.21.0"

Link to Sentry event

No response

SDK Setup/Reproduction Example

import * as Sentry from '@sentry/nextjs';
 import { getWebsiteVersion } from '**/constantsHelper';

Sentry.init({
    environment: getEnvironment(),
    dsn: ENV_PUBLIC_SENTRY_DSN_KEY_DESKTOP,
    release: `${getWebsiteVersion()}-web`,
    integrations: [
      Sentry.browserTracingIntegration()
    ]
.
.
.
.
.
.
}

Steps to Reproduce

Our project has been using this sentry version"@sentry/nextjs" : "7.17.3" and now we are trying to update to the latest version which is as follows -

  "@sentry/nextjs": "7.118.0",
    "@sentry/webpack-plugin": "1.21.0",
    "next": "12.3.0"

We are using webpack to manage the release and upload the sourcemaps. We have tried almost every permutation to upload sourcemaps but somehow the sourcemaps are getting uploaded when I explicitly add sourcemaps as an option in the webpack's configuration like v8 configuration. While going through the docs and code for the "7.118.0" version in @sentry/nextjs, @sentry/webpack-plugin I couldn't find any reference or usecase of sourcemaps key in the v7 version. However, it is being used in v8's SentryBuildOptions. What could be the possible reason for this ?

I somewhere read that @sentry/webpack-plugin uses @sentry/cli to upload sourcemaps. Went through the code @sentry/webpack-plugin for v7 and v8 both and saw that it has @sentry/cli: "^1.77.1" as the dependency. Do you think "^" could be the reason that "@sentry/cli" might be getting updated to latest version in v7's @sentry/webpack-plugin also and thus expecting sourcemaps in the webpack config.

next.config.ts

const { withSentryConfig } = require('@sentry/nextjs');
const WEBSITE_VERSION = require('**/constants/webVersion');

const sentryWebpackPluginOptions = {
  sourcemaps: {
    assets: [ '.', '.next/static/chunks/' ],
    ignore: [ 'node_modules', 'build/' ]
  },
  // include: {
  //   paths: [ '.', '.next/static/chunks/' ],
  //   urlPrefix: `~/web-assets/***some_long_path*/_next/static/chunks/`
  // },
  urlPrefix: '~/web-assets/***some_long_path*/_next/static/chunks/',
  ext: [ 'map', 'js' ],
  ignore: [ 'node_modules', 'build/' ],
  org: 'web-sentry',
  project: 'web-prod',
  authToken: PRIVATE_SENTRY_AUTH_TOKEN,
  release: `${WEBSITE_VERSION}-web,
  silent: true
}
const DEFAULT_CONFIG = {
.
 .
.
.
  swcMinify: true,
  assetPrefix: isProd ? publicPath : undefined,
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true
  },
  compiler: {
    reactRemoveProperties: process.env.PWA_ENV === 'prod' ? { properties: [ 'data-test-id', 'dataTestId', 'inputDataTestId', 'errorDataTestId' ] } : {
      properties: [ '~^' ]
    }
  },
   //  Sentry SDK options
  sentry: {
    disableServerWebpackPlugin: true,    //By setting it to true the source map uploading for server build process will be disabled
    hideSourceMaps: true,                //This will make the source map invisible to the browser
    transpileClientSDK: true,           // support old browsers
    widenClientFileUpload: true,          // By setting it to "true", it uploads all of the files in static/chunks/ i.e. for even 3rd party libraries
    autoInstrumentServerFunctions: false //By setting it to false sentry does not auto wrap our data fetching functions such as getInitialProps (Automatic Static Optimization is preserved)
  },
  crossOrigin: 'anonymous',
  productionBrowserSourceMaps: true      //Enables browser source map generation during the production build
};

const NEXT_CONFIG = (isProdEnv || isNextEnv) ? withSentryConfig(DEFAULT_CONFIG, sentryWebpackPluginOptions) : DEFAULT_CONFIG;

module.exports = NEXT_CONFIG;

sentry.client.config.ts

import * as Sentry from '@sentry/nextjs';
const WEBSITE_VERSION = require('**/constants/webVersion');

 Sentry.init({
    environment: getEnvironment(),
    dsn: ENV_PUBLIC_SENTRY_DSN_KEY_DESKTOP,
    release: `${getWebsiteVersion()}-web`,
    integrations: [
      Sentry.browserTracingIntegration()
    ],
.
.
.
.
})

Expected Result

Sourcemaps are not being uploaded.

Actual Result

Sourcemaps are not being uploaded only when provided sourcemaps option in webpack config.

mydea commented 1 month ago

Hello,

the versions all appear correct to me, @sentry/cli can/should be the latest v1 version, while @sentry/webpack-plugin should also be the latest v1 version.

Can you try to run this to verify that only one (and the correct) version of this is installed:

npm why @sentry/cli
npm why @sentry/webpack-plugin

And paste the output here? The v1 version of this should not have a sourcemaps option, so I can't see how this could have any impact on this 🤔

saloni-23 commented 1 month ago

npm why @sentry/cli           
@sentry/cli@1.77.3
../../../node_modules/.pnpm/@sentry+webpack-plugin@1.21.0/node_modules/@sentry/cli
  @sentry/cli@"^1.77.1" from @sentry/webpack-plugin@1.21.0
  ../../../node_modules/.pnpm/@sentry+webpack-plugin@1.21.0/node_modules/@sentry/webpack-plugin
    @sentry/webpack-plugin@1.21.0
    node_modules/@sentry/webpack-plugin
      @sentry/webpack-plugin@"1.21.0" from the root project
    @sentry/webpack-plugin@1.21.0
    ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/webpack-plugin
      @sentry/webpack-plugin@"1.21.0" from @sentry/nextjs@7.118.0
      ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/nextjs
        @sentry/nextjs@7.118.0
        node_modules/@sentry/nextjs
          @sentry/nextjs@"7.118.0" from the root project

@sentry/cli@1.77.3
../../../node_modules/.pnpm/@sentry+cli@1.77.3/node_modules/@sentry/cli
  @sentry/cli@1.77.3
  ../../../node_modules/.pnpm/@sentry+webpack-plugin@1.21.0/node_modules/@sentry/cli
    @sentry/cli@"^1.77.1" from @sentry/webpack-plugin@1.21.0
    ../../../node_modules/.pnpm/@sentry+webpack-plugin@1.21.0/node_modules/@sentry/webpack-plugin
      @sentry/webpack-plugin@1.21.0
      node_modules/@sentry/webpack-plugin
        @sentry/webpack-plugin@"1.21.0" from the root project
      @sentry/webpack-plugin@1.21.0
      ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/webpack-plugin
        @sentry/webpack-plugin@"1.21.0" from @sentry/nextjs@7.118.0
        ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/nextjs
          @sentry/nextjs@7.118.0
          node_modules/@sentry/nextjs
            @sentry/nextjs@"7.118.0" from the root project

npm why @sentry/webpack-plugin
@sentry/webpack-plugin@1.21.0
node_modules/@sentry/webpack-plugin
  @sentry/webpack-plugin@"1.21.0" from the root project

@sentry/webpack-plugin@1.21.0
../../../node_modules/.pnpm/@sentry+webpack-plugin@1.21.0/node_modules/@sentry/webpack-plugin
  @sentry/webpack-plugin@1.21.0
  node_modules/@sentry/webpack-plugin
    @sentry/webpack-plugin@"1.21.0" from the root project
  @sentry/webpack-plugin@1.21.0
  ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/webpack-plugin
    @sentry/webpack-plugin@"1.21.0" from @sentry/nextjs@7.118.0
    ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/nextjs
      @sentry/nextjs@7.118.0
      node_modules/@sentry/nextjs
        @sentry/nextjs@"7.118.0" from the root project

@sentry/webpack-plugin@1.21.0
../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/webpack-plugin
  @sentry/webpack-plugin@"1.21.0" from @sentry/nextjs@7.118.0
  ../../../node_modules/.pnpm/@sentry+nextjs@7.118.0_next@12.3.0_react@17.0.2_webpack@5.93.0/node_modules/@sentry/nextjs
    @sentry/nextjs@7.118.0
    node_modules/@sentry/nextjs
      @sentry/nextjs@"7.118.0" from the root project

saloni-23 commented 1 month ago

@mydea Also I am attaching 2 screenshots to show the stack Trace diff when sourcemaps was added in sentryWebpackPluginOptions then the stackTrace was available and when I used the basic configuration the stackTrace wasn't available.

 const sentryWebpackPluginOptions = {
   include: {
     paths: [ '.', '.next/static/chunks/' ],
     urlPrefix: `~/web-assets/***some_long_path*/_next/static/chunks/`
  },
  ext: [ 'map', 'js' ],
  ignore: [ 'node_modules', 'build/' ],
  org: 'web-sentry',
  project: 'web-prod',
  authToken: PRIVATE_SENTRY_AUTH_TOKEN,
  release: `${WEBSITE_VERSION}-web,
  silent: true

Also the above is the configuration which was working perfectly with sentry's previous version ie "@sentry/nextjs" : "7.17.3". But not working with the recent one "@sentry/nextjs" : "7.118.0"

chargome commented 1 month ago

Hey @saloni-23 ,

just to clarify what you are trying to achieve: you do not want to upload any sourcemaps? With your current setup you should not be using the sourcemaps option as it was not used in v7 yet.

Maybe what you want to do is also disable the upload for client sourcemaps: disableClientWebpackPlugin: true.

Let me know if that works for you!

saloni-23 commented 1 month ago

@chargome I want to upload the sourcemaps without that how would I able to generate stack traces ?

saloni-23 commented 1 month ago

I did undo the sourcemaps option and sentryWebpackPluginOptions looks like this but now Sentry is unable to configure stackframe properly -

const sentryWebpackPluginOptions = {
   include: {
     paths: [ '.', '.next/static/chunks/' ],
     urlPrefix: `~/web-assets/***some_long_path*/_next/static/chunks/`
  },
  ext: [ 'map', 'js' ],
  ignore: [ 'node_modules', 'build/' ],
  org: 'web-sentry',
  project: 'web-prod',
  authToken: PRIVATE_SENTRY_AUTH_TOKEN,
  release: `${WEBSITE_VERSION}-web,
  silent: true
}

sentry.client.config.ts

import * as Sentry from '@sentry/nextjs';
const WEBSITE_VERSION = require('**/constants/webVersion');

 Sentry.init({
    environment: getEnvironment(),
    dsn: ENV_PUBLIC_SENTRY_DSN_KEY_DESKTOP,
    release: `${getWebsiteVersion()}-web`,
    integrations: [
      Sentry.browserTracingIntegration(),
      Sentry.rewriteFramesIntegration({ prefix: `https://assets-netstorage.***.in/web-assets/**some_long_path*/` })
    ],
.
.
.
.
})

lforst commented 1 month ago

@saloni-23 what does the button tell us?

saloni-23 commented 1 month ago

I have faced this issue earlier also. was able to solve it by adding sourcemaps option.

lforst commented 1 month ago

Do you have one of these files in the uploaded artifacts for the release? If not, what do they look like?

(Currently, my best guess is that you should just remove the urlPrefix option or rather the entire include option in next.config.js. It likely does more harm than good. The general recommendation is to leave the webpack plugin options as untouched as possible. The default we provide should work for 99% of the people. If I were you, I would even remove the ext and ignore options AND also the rewrite frames integration.)

getsentry / sentry-javascript