withSentryConfig breaks Nextjs image optimization with some urls in production starting with @sentry/nextjs 7.22.0

[goguda]

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 package are you using?

@sentry/nextjs

SDK Version

7.22.0

Framework Version

React 18.2.0

Link to Sentry event

No response

Steps to Reproduce

Upgrading to @sentry/nextjs 7.22.0 (and 7.23.0) breaks the Nextjs Image component optimization with some urls in production, with the server returning ""url" parameter is not allowed", even though the domain is specified in next.config.js.

It appears that withSentryConfig may be overwriting/deleting the image portion of next.config.js as if no image settings have been specified in the file. Removing withSentryConfig restores proper Image component functionality.

Tested on @sentry/nextjs 7.23.0 and 7.22.0, resolved by downgrading to 7.21.1.

Expected Result

For image settings in next.config.js to not be touched by withSentryConfig.

Actual Result

[sdornan]

Also having this issue with Next.js hosted through Vercel.

[goguda]

So, it looks like a change was made in f1e59f9 where withSentryConfig always returns a function now, so if you've defined your next.config.js as an Object, the settings aren't being returned properly after running them through withSentryConfig. Looks like it's probably the cause of #6381 as well.

PR #6402

[sdornan]

I'll note that my nextConfig that I'm wrapping withSentryConfig with is an async function.

[goguda]

I'll note that my nextConfig that I'm wrapping withSentryConfig with is an async function.

So that's interesting, looks like async functions have been supported from Nextjs 12.1 but I think withSentryConfig may need to be updated to support async functions as well. Going to take a look at this.

[goguda]

I'll note that my nextConfig that I'm wrapping withSentryConfig with is an async function.

Are you wrapping your async function with withSentryConfig? If so, can you try wrapping the object you're returning with it instead on version 7.21.1 or #6402 like below?

module.exports = async (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }


  return withSentryConfig(nextConfig)
}

[lforst]

Seems like you all have already figured out the culprit. We withSentryConfig will always return a function.

@goguda I think you still need to call the returned value like this in your code snippet:

return withSentryConfig(nextConfig)(phase, defaultConfig)

[sdornan]

I did this with v7.23.0 and things seem to work as expected:

module.exports = async (phase, { defaultConfig }) => {

const nextConfig = {
    /* config options here */
}

return withSentryConfig(nextConfig)(phase, defaultConfig)

Perhaps the installation docs should be updated to cover this use case.