Client-side sourceMappingURL is being erased despite of settings

[aacheblukov]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/nextjs

SDK Version

8.4.0

Framework Version

Next 14.1.1

Link to Sentry event

https://sentry.testgrigorev-aks.arkadiumhosted.com/organizations/arkadium-test-sentry/issues/302/?query=is%3Aunresolved&referrer=issue-stream&stream_index=0

SDK Setup

sentry.client.config.ts

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

const isProd = process.env.BUILD_ENV === 'production';
Sentry.init({
    dsn: process.env.SENTRY_DSN,
    environment: process.env.BUILD_ENV,
    tracesSampleRate: isProd ? 0.1 : 1,
    debug: false,
    replaysOnErrorSampleRate: isProd ? 0.1 : 1.0,
    replaysSessionSampleRate: isProd ? 0.1 : 1.0,

    integrations: [
        Sentry.replayIntegration({
            maskAllText: false,
            blockAllMedia: false,
        }),
        Sentry.browserTracingIntegration(),
        
    ],
});

instrumentation.ts

import * as Sentry from '@sentry/nextjs';
export async function register() {
    const isProd = process.env.BUILD_ENV === 'production';
    Sentry.init({
        dsn: process.env.SENTRY_DSN,
        environment: process.env.BUILD_ENV,
        release: process.env.SENTRY_RELEASE,
        tracesSampleRate: isProd ? 0.1 : 1,
        debug: false,
    });
}

nextjs.config.js

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

/** @type {import('next').NextConfig} */
const nextConfig = {
    env: {
        SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
        SENTRY_RELEASE: process.env.SENTRY_RELEASE,
        SENTRY_DSN: process.env.SENTRY_DSN,
        BUILD_ENV: process.env.BUILD_ENV,
    },
    output: 'standalone',
    reactStrictMode: false,
    productionBrowserSourceMaps: true,
    experimental: {
        instrumentationHook: true,
    },
    images: {
        remotePatterns: [
            {
                protocol: 'https',
                hostname: 'cdn.com',
                port: '',
                pathname: '/**',
            },
        ],
    },
    async rewrites() {
        return [
            {
                source: '/',
                destination: '/home',
            },
        ];
    },
};
const sentryWebpackPluginOptions = {
    // Additional config options for the Sentry webpack plugin. Keep in mind that
    // the following options are set automatically, and overriding them is not
    // recommended:
    //   release, url, configFile, stripPrefix, urlPrefix, include, ignore
    release: process.env.SENTRY_RELEASE,
    environment: process.env.BUILD_ENV,
    org: process.env.SENTRY_ORG,
    project: process.env.SENTRY_PROJECT,
    url: process.env.SENTRY_URL,
    authToken: process.env.SENTRY_AUTH_TOKEN,

    widenClientFileUpload: true,

    transpileClientSDK: true,
    tunnelRoute: '/monitoring',
    disableLogger: true,
    debug: true,
    telemetry: false,


    automaticVercelMonitors: true,

};

// Make sure adding Sentry options is the last code to run before exporting
module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

Steps to Reproduce

1. yarn build
2. check /.next/server/app/[...slug]/page.js
3. There is //# sourceMappingURL=page.js.map string
4. check /.next/static/chunks/app/[...slug]/page-${hash}.js
5. There is no //# sourceMappingURL=page-${hash}.js.map string

Expected Result

//# sourceMappingURL=page-${hash}.js.map should be in the static files.

Actual Result

server:

client:

[lforst]

Hi, we currently set the devtool option for webpack to hidden-source-map on the client which will remove that comment. I don't see any option in your configuration though that would indicate that you are generating sourcemaps yourself. Are we stomping your options somehow?

[aacheblukov]

Hey @lforst! Thank you for the response! Sourcemaps are generated by nextjs by default for the development and it allows you to extend this behavior for the produciton build with productionBrowserSourceMaps flag. As you can see, I have this flag for next.config.js that is set up to true:
productionBrowserSourceMaps: true

https://nextjs.org/docs/app/api-reference/next-config-js/productionBrowserSourceMaps
I tested the prod build without withSentryConfig wrapper exporting the pure nextConfig and sourcemaps are present there.

[lforst]

I think I get what you're saying. I opened a PR to fix!

[AbhiPrasad]

Fix released with https://github.com/getsentry/sentry-javascript/releases/tag/8.7.0 - please give it a try!