sentry-javascript: CLIENT_FETCH_ERROR expected end of JSON input (next-auth + SST)

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? If you use the CDN bundles, please specify the exact bundle (e.g. `bundle.tracing.min.js`) in your SDK setup.

@sentry/nextjs

SDK Version

7.47.0

Framework Version

Next 13.3.0

Link to Sentry event

No response

SDK Setup

No response

Steps to Reproduce

https://github.com/hect1c/nextjs-sentry-nextauth-lambda-error

I’m getting the CLIENT_FETCH_ERROR unexpected end of JSON input when loading the site. It’s a bit odd as I was able to isolate the issue to my next.config.js. It appears it’s related to my @sentry/nextjs configuration. When I have the withSentryConfig set I get this error from next auth, but when I remove it no error and next-auth is happy. I’ve tried to debug next-auth to try and determine why it’s giving me this error but to no avail. I definitely have everything set it up it should be for next-auth and my withSentryConfig is directly from the docs.

I’ve tried different versions across next, next-auth and sentry but going back too far with my @sentry/nextjs config is just not an option.

Though the error is coming from next-auth I’ve decided to post here as I was hoping you would be able to point me in the right direction as to what may be causing this as I have not been able to figure it out aside from just removing withSentryConfig and setting module.exports = nextConfig in the repro. I’m just not sure why a sentry config would affect next-auth in any way. I’ve also posted an issue at next-auth here: https://github.com/nextauthjs/next-auth/issues/7200

Expected Result

What should of happened is no error is displayed since I have the required environment variables and nextauth path setup correctly even with my @sentry/nextjs configuration

Actual Result

Site loads with this error from next-auth

About this issue

Original URL
State: closed
Created a year ago
Comments: 16 (7 by maintainers)

Most upvoted comments

So after further debugging I was able to see that the issue came specifically from here https://github.com/getsentry/sentry-javascript/blob/develop/packages/nextjs/src/config/webpack.ts#L166-L183. I think this was done in order to wrap api routes with some sentry magic and re-export to ensure this would provide the necessary debugging information in sentry but for some reason this was breaking my next-auth which uses the /api/auth/[...nextauth].ts path (https://next-auth.js.org/getting-started/example#add-api-route).

Luckily I found in the code that you guys have an option excludeServerRoutes which is also exposed and can be configured in next.config.js. I don’t need auto-instrumentation on this particular route so disabling it is fine but maybe this is something that may need to be looked into and handled appropriately.

This caused me a long week of headache trying to figure out why my next-auth wasn’t working. I found a lot of issue reports around CLIENT_FETCH_ERROR with next-auth and one in particular that mentioned @sentry/nextjs but their solutions didn’t work. I also thought my issue was with next-compose-plugin.

To reference a few for linking:

For those that do happen to come here my solution was to disable it on this specific route so my next.config.js looks like this:

next.config.js

...
const sentryWebpackPluginOptions = {
  debug: false,

  // enable if too noisy in console
  silent: true,

  // 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, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options
}

module.exports = (phase, { defaultConfig }) => {
  const nextPlugins = [
    withBundleAnalyzer,
    (nConfig) =>
      withSentryConfig(
        {
          ...nConfig,
          sentry: {
            // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#opt-out-of-auto-instrumentation-on-specific-routes
            excludeServerRoutes: ['/api/auth/[...nextauth]'],
          },
        },
        sentryWebpackPluginOptions,
      ),
  ]

  const config = nextPlugins.reduce(
    (prev, plugin) => {
      const update = plugin(prev)
      return typeof update === 'function'
        ? update(phase, defaultConfig)
        : update
    },
    { ...nextConfig },
  )

  return config
}

I will leave this open for now to see what Sentry team will say about this but happy to close it as I don’t think again auto instrumentation is required on this path. NextAuthJs also provides a logger option https://next-auth.js.org/configuration/options#logger that may be used to log errors / warnings that I think can be used to log outputs to Sentry, haven’t tried or confirmed this yet.

hect1c on Apr 9, 2023