Next.JS tunnelPath rewrite does not take `basePath` into account

[IgnusG]

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?

@sentry/nextjs

SDK Version

7.53.1

Framework Version

7.53.1

Link to Sentry event

No response

SDK Setup

let nextConfig = {
  basePath: '/something',
}

nextConfig = withSentryConfig(
  nextConfig,
  {
    silent: true,
    release: env.BUILD_ID,
  },
  {
    widenClientFileUpload: true,
    transpileClientSDK: true,
    tunnelRoute: '/monitoring',
    hideSourceMaps: true,
    disableLogger: true,
  },
);

Steps to Reproduce

Sentry tries to connect to example.com/monitoring instead of example.com/something/monitoring.

Changing tunnelRoute to /something/monitoring doesn't work either as the rewrite doesn't match since Next.JS would be trying to match /something${tunnelRoute} which is /something/something/monitoring.

Expected Result

Either the base path is taken into account automatically by the plugin or the rewrite specifies basePath: false and its left up to the user to provide the base path manually when specifying the tunnel route eg. tunnelRoute: `${MY_BASE_PATH}/monitoring`.

Actual Result

Using basePath along with tunnelRoute from sentry results in 404 errors if the application is actually deployed on that base path and a different application handles routes outside of it.

Reference https://github.com/getsentry/sentry-javascript/blob/develop/packages/nextjs/src/config/withSentryConfig.ts

[lforst]

Thanks for reporting this. I can see this definitely being a problem - a fix shouldn't be too hard - putting this onto the backlog.

This is somewhat urgent because our wizard sets the tunnelRoute option and this will not work if a basePath is set.

[inlet]

I'm currently running into this issue as well, @lforst any updates on this? thanks in advance!

[lforst]

No updates. PRs welcome!

[IgnusG]

@inlet In the meantime you can solve this by specifying the tunnel route together with a base path:

... = withSentryConfig(
    nextConfig,
    { /* ... */},
    {
      tunnelRoute: `${BASE_PATH}/monitoring`, // specify the base path here
    },
  );

and then specifying an additional rewrite (exactly the same as what sentry defines apart from the source) inside of your config which omits the base path:

const nextConfig = {
    rewrites: async () => {
      return {
        beforeFiles: [
          {
            source: `/monitoring`, // omit the base path here
            has: [
              {
                type: 'query',
                key: 'o',
                value: '(?<orgid>.*)',
              },
              {
                type: 'query',
                key: 'p',
                value: '(?<projectid>.*)',
              },
            ],
            destination:
              'https://o:orgid.ingest.sentry.io/api/:projectid/envelope/',
          },
        ],
      };
    },
};

Sentry will still define the incorrect rewrite but it will never match, next will instead use your own rewrite instead.

PS: Sorry, I didn't mean to add the Waiting for: Team label again. This doesn't include anything actionable for sentry's team