[NEXT] withSentryConfig is throwing error with custom webpack for version 7.13 during build

[ruchidh]

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.13.0

Framework Version

No response

Link to Sentry event

No response

Steps to Reproduce

Suddenly Build is failing for sentry config with next js having custom webpack , for the below code from the last 3 days . Please help on this

const configWithPwa = withPWA({
	assetPrefix: '/ega',
	extends: ['plugin:@next/next/recommended'],
	experimental: {
		nextScriptWorkers: true,
	},
	sentry: {
		hideSourceMaps: true,
		// for all available options visit https://github.com/getsentry/sentry-webpack-plugin#options
	},
	async redirects() {
		return [
			{
				source: '/tools/tracking/:id',
				destination: '/tools/tracking/details/:id',
				statusCode: 301,
			},
		];
	},
	webpack(config, { webpack }) {
		/*
		 * enabling Tree Shaking for sentry debug and sentry tracing
		 * because we are not using them in prod
		 * Reference: https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
		 */
		config.plugins.push(
			new webpack.DefinePlugin({
				__SENTRY_DEBUG__: false,
				__SENTRY_TRACING__: false,
			}),
		);
	
		return config;
	},
	pwa: {
		disable: process.env.NODE_ENV === 'development',
		dest: 'public',
		sw: 'ega-sw.js',
		register: false,
		// For caching we need to prefix urls with "/ega"
		manifestTransforms: [
			async manifestEntries => {
				const manifest = manifestEntries.map(m => {
					// This method is looping over all manifest entries and
					// prefixing /ega to it as service worker is running inside /ega repo
					if (!/^(?:[a-z]+:)?\/\//.test(m.url)) {
						m.url = `${m.url}`;
					}
					return m;
				});
				return { manifest, warnings: [] };
			},
		],
		// url for manifest.json is not handled in above function,
		// so added additional config to add url manually
		additionalManifestEntries: [{ url: '/ega/manifest.json', revision: null }],
	},
});

const sentryEnabledEnvs = ['production', 'staging',];
module.exports = sentryEnabledEnvs.includes(process.env.SYSTEM_ENV)
	? withSentryConfig(configWithPwa, { silent: true })
	: configWithPwa;
	

In the above code withSentryConfig(configWithPwa, { silent: true }) the build is failing and getting errors on production and staging server .

Expected Result

Build shoudl be passed

Actual Result

please ignore the variable TRACKING_API IS THE constant defined that I tried to get from next config, bcoz build is failing to it is throwing error.

If I remove the webpack code it works fine

[lforst]

Hi, thanks for reporting this!

Two things:

• Can you maybe share more of your logs and provide a small reproduction example? It's hard to debug from the information you provided.
• Version 7.13.0 was one of the first versions that included changes to the next build process. We had a lot of bug fixes since then. Can you try upgrading to a newer version and see if the issue persists?

[ruchidh]

Hi, thanks for reporting this!

Two things:

• Can you maybe share more of your logs and provide a small reproduction example? It's hard to debug from the information you provided.
• Version 7.13.0 was one of the first versions that included changes to the next build process. We had a lot of bug fixes since then. Can you try upgrading to a newer version and see if the issue persists?

Thanks for replying.

Everything was working fine until 2 days back, when our build on the production suddenly failed. We debug at our end and figured out that withSentryConfig is throwing an error on build.
next build is not working

Also, we tried latest version 7.22, it's not working for that also.

here is a small snippet of our configuration,
next.config.js file
`

const configWithPwa = withPWA({
	assetPrefix: '/ega',
	extends: ['plugin:@next/next/recommended'],
	experimental: {
		nextScriptWorkers: true,
	},
	eslint: {
		ignoreDuringBuilds: true,
	},
	images: {
		path: '/ega/_next/image',
		domains: ['s3.ap-south-1.amazonaws.com', 'www.gocomet.com', 'i0.wp.com'],
	},
	sentry: {
		hideSourceMaps: true,
		// for all available options visit https://github.com/getsentry/sentry-webpack-plugin#options
	},
	webpack(config, { webpack }) {
		/*
		 * enabling Tree Shaking for sentry debug and sentry tracing
		 * because we are not using them in prod
		 * Reference: https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
		 */
		config.plugins.push(
			new webpack.DefinePlugin({
				__SENTRY_DEBUG__: false,
				__SENTRY_TRACING__: false,
			}),
		);
		return config;
	},
	pwa: {},
});

module.exports =  withSentryConfig(configWithPwa, { silent: true })
module.exports.publicRuntimeConfig = {
	urls: {
		TRACKING_API: String(process.env.SETTINGS__HOST__TRACKING || getRootUrl('tracking'))
			.replace(/\/$/, '')
			.concat('/api/'),
    }
};

`

yarn build

throwing error attached in the above comment, ( can not ready property TRACKING_API of undefined)

const { urls } = NextConfig().publicRuntimeConfig ;
const rootUrl = urls.TRACKING_API;

if i remove withSentryConfig it works fine.

[lforst]

This error is probably due to an incompatibility with the withPwa wrapper. If you provide a reproduction example we can debug this further.

[ruchidh]

This error is probably due to an incompatibility with the withPwa wrapper. If you provide a reproduction example we can debug this further.

one new finding here -
We move back to older version 6.4.0^ it works fine there, we have recently upgraded to 7.13.0 to a month ago, it has been working fine, only in last 2 days the config withSentryConfig start throwing error on build .

can you tell me precisely what are details you need to reproduce?]

versions details -
"next": "12.1.6",
"next-pwa": "5.4.4",
"@sentry/nextjs": "^7.13.0",

[lforst]

can you tell me precisely what are details you need to reproduce?]

Just a small app that we can clone to reproduce this locally. Sadly "it's crashing" isn't enough for us to effectively tell what's going on. Next.js, Webpck, and our SDK are all very complex and a lot can go wrong in a lot of places so we need as much information as possible.

[lforst]

We move back to older version 6.4.0^ it works fine there, we have recently upgraded to 7.13.0 to a month ago, it has been working fine, only in last 2 days the config withSentryConfig start throwing error on build .

What did you update that it suddenly started throwing? Usually stuff doesn't break out of the blue. Can you maybe remove the silent flag in the config?

[ruchidh]

Understood your requirements !! I will send the app.

We have not made any changes to the config or any updates in the packages. We have 2 apps one running on 6.4 and other we updated a month ago to 7.13.0 , the newest update app crashed suddenly without we making any changes to it.

Thank you again

[kylemh]

Might be relevant to you @ruchidh : #6447

[lforst]

@ruchidh Ok, I think I see what is happening here. You can't set publicRuntimeConfig after passing the config to withSentryConfig since the return value of withSentryConfig is a function. You should just define publicRuntimeConfig in the config you pass to withPWA. Like this:

const configWithPwa = withPWA({
	assetPrefix: '/ega',
	extends: ['plugin:@next/next/recommended'],
	experimental: {
		nextScriptWorkers: true,
	},
	eslint: {
		ignoreDuringBuilds: true,
	},
	images: {
		path: '/ega/_next/image',
		domains: ['s3.ap-south-1.amazonaws.com', 'www.gocomet.com', 'i0.wp.com'],
	},
	publicRuntimeConfig: {
		urls: {
			TRACKING_API: String(process.env.SETTINGS__HOST__TRACKING || getRootUrl('tracking'))
				.replace(/\/$/, '')
				.concat('/api/'),
		}
	},
	sentry: {
		hideSourceMaps: true,
		// for all available options visit https://github.com/getsentry/sentry-webpack-plugin#options
	},
	webpack(config, { webpack }) {
		/*
		 * enabling Tree Shaking for sentry debug and sentry tracing
		 * because we are not using them in prod
		 * Reference: https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/
		 */
		config.plugins.push(
			new webpack.DefinePlugin({
				__SENTRY_DEBUG__: false,
				__SENTRY_TRACING__: false,
			}),
		);
		return config;
	},
	pwa: {},
});

module.exports =  withSentryConfig(configWithPwa, { silent: true })

Although I admittedly don't understand what publicRuntimeConfig.urls is doing for you since it isn't documented anywhere...

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀