Next.JS tunnelPath rewrite does not take basePath into account

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

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.

@lforst

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

No updates. PRs welcome!

@inlet

@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

@lforst

@lforst Sorry I don't have time to contribute to the project atm.

@IgnusG Unfortunately your solution didn't really work for me as my app is only being served at the given base path (apex root is serving another site via reverse proxy).

Here's a temporary fix that worked for me:

next.config.js

const nextConfig  = { 
  basePath: '/something',
};

const sentryPluginOptions = {
   ...
};

const sentryOptions = {
  tunnelRoute: '/monitoring',
  ...
};

module.exports = withSentryConfig(nextConfig, sentryPluginOptions, sentryOptions);

sentry.client.config.ts

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

// @ts-ignore
window.__sentryRewritesTunnelPath__ = '/something/monitoring';

Sentry.init({
 ...
});

sentry.server.config.ts

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

// @ts-ignore
global.__sentryRewritesTunnelPath__ = '/something/monitoring';

Sentry.init({
 ...
});

sentry.edge.config.ts

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

// @ts-ignore
global.__sentryRewritesTunnelPath__ = '/something/monitoring';

Sentry.init({
 ...
});

Note that I've manually need to prepend the base path in the __sentryRewritesTunnelPath__

@lforst I think the actual rewrite is correct as this already takes the base path into account, but we need to make sure the __sentryRewritesTunnelPath__ is also taking the base path into account.

Thanks!

@IgnusG

@IgnusG Unfortunately your solution didn't really work for me as my app is only being served at the given base path (apex root is serving another site via reverse proxy).

Weird that it didn't work for you 😞 Our app has the same (the root is served by a different app altogether) but the above configuration works for us. The way the rewrites should work is that if a base path is configured for nextjs, rewrites will automatically add it so when you specify /monitoring as the source in the rewrites, what nextjs actually matches is /${basePath}/monitoring.

The problem with the sentry config is that it already includes the base path in the source so it actually tries matching /${basePath}/${basePath}/monitoring (first one added by next js since the rewrite doesn't specify basePath: false and the second one as part of the tunnel option).

@IgnusG

@IgnusG your solution looks a lot cleaner as this doesn't involve altering on the __sentryRewritesTunnelPath__. However the client errors are not correctly propagated on my end? Not sure it might has to do something with my project config.

Anyways, thanks for helping out! 🙏 appreciated

@IgnusG

Ah I fixed it, thanks your solution works @IgnusG 👌

@inlet

I think the actual rewrite is correct as this already takes the base path into account, but we need to make sure the sentryRewritesTunnelPath is also taking the base path into account.

@inlet Thanks for trying this out. This makes the fix trivial. Pushed a PR.

fix(web): address security/perf/code review pass on sandbox routing

feat(identity): reliable create-user flow — service-side Clerk auth +…

Navigation Menu

Repository navigation

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

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Next.JS tunnelPath rewrite does not take basePath into account #8293

Description

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

SDK Setup

Steps to Reproduce

Expected Result

Actual Result

Activity

lforst commented on Jun 6, 2023

inlet commented on Jul 5, 2023

lforst commented on Jul 5, 2023

IgnusG commented on Jul 5, 2023

inlet commented on Jul 5, 2023

IgnusG commented on Jul 5, 2023

inlet commented on Jul 5, 2023

inlet commented on Jul 5, 2023

lforst commented on Jul 5, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions

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