`ERR_INVALID_URL` for next config rewrite option

[Naddiseo]

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

Framework Version

13.0.6-canary.3

Link to Sentry event

No response

Steps to Reproduce

1. a next config

// next.config.js
import { withSentryConfig } from "@sentry/nextjs";

const rewrites = async () => {
 const apiUrl = process.env.API_URL.trim();
 if (!(process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN)) {
 throw new Error("process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN must be defined");
 }
 const sentryUrl = new URL(process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN);
 const sentryProjectId = sentryUrl.pathname.replace("/", "");
 sentryUrl.pathname = `/api/${sentryProjectId}/envelope/`;
 const sentryProxyURL = sentryUrl.toString();
 return [
 {
 source: "/:path*",
 destination: "/:path*",
 },
 {
 source: "/sentry",
 destination: sentryProxyURL,
 basePath: false,
 },
 ];
};

const moduleExports = {
 rewrites,
 reactStrictMode: true,
};

const SentryWebpackPluginOptions = {
 silent: true,
};
export default withSentryConfig(moduleExports, SentryWebpackPluginOptions);

2. run next build

Expected Result

It should build correctly.

Actual Result

next build
info - Loaded env from .env.local
info - Skipping validation of types
info - Linting 
info - Creating an optimized production build 
info - Compiled successfully
info - Collecting page data ..TypeError [ERR_INVALID_URL]: Invalid URL
 at new NodeError (node:internal/errors:387:5)
 at URL.onParseError (node:internal/url:565:9)
 at new URL (node:internal/url:641:5)
 at Object.makeNodeTransport [as transport] (/node_modules/@sentry/node/cjs/transports/http.js:34:23)
 at new BaseClient (/node_modules/@sentry/core/cjs/baseclient.js:70:33)
 at new NodeClient (/node_modules/@sentry/node/cjs/client.js:44:5)
 at Object.initAndBind (/node_modules/@sentry/core/cjs/sdk.js:34:18)
 at Object.init (/node_modules/@sentry/node/cjs/sdk.js:159:8)
 at Object.init (/node_modules/@sentry/nextjs/cjs/index.server.js:69:8)
 at Object.9673 (/.next/server/chunks/290.js:19:45) {
 input: '/sentry',
 code: 'ERR_INVALID_URL'
}

> Build error occurred
Error: Failed to collect page data for /homepage
 at /node_modules/next/dist/build/utils.js:959:15
 at processTicksAndRejections (node:internal/process/task_queues:96:5) {
 type: 'Error'
}

[lforst]

Hi, you're not mapping the DSN to a URL correctly. You still have the part with xxx@ in there.

You need to map it from https://publicKey@o111111.ingest.sentry.io/22222 to https://o111111.ingest.sentry.io/api/22222/envelope/?sentry_key=publicKey. You currently have https://publicKey@o111111.ingest.sentry.io/api/22222/envelope/.

[lforst]

Also, have you set a proper dsn in your init calls?

[Naddiseo]

Sorry, my report yesterday wasn't well structured, I hadn't slept well.

The back story of this report, is that it was working early last year, then a combination of moving to production (on Vercel) and upgrading next broke my code. I had a long standing bug report on next that I've now been asked to reproduce the issue with canary. I have since worked around the original issue using tunneling

Also, have you set a proper dsn in your init calls?

Yes:

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

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
Sentry.init({
 dsn: SENTRY_DSN || "https://publickey@o111111.ingest.sentry.io/yyyyy",
 tunnel: "/sentry"

})

Hi, you're not mapping the DSN to a URL correctly. You still have the part with xxx@ in there.

You need to map it from https://publicKey@o111111.ingest.sentry.io/22222 to https://o111111.ingest.sentry.io/api/22222/envelope/?sentry_key=publicKey. You currently have https://publicKey@o111111.ingest.sentry.io/api/22222/envelope/.

That doesn't appear the be the issue, if I make the following change, it still has the ERR_INVALID_URL.

const sentryProxyURLwithUser = sentryUrl.toString();
const sentryProxyURL = 'https://' + sentryProxyURLwithUser.split(/@/)[1];
console.log(sentryProxyURL); /// https://o111111.ingest.sentry.io/api/yyyy/envelope/

The issue is that @sentry/next seems to calling new URL(rewrite.source) somewhere. If I open up a node console I get the same thing:

$ node 
Welcome to Node.js v16.18.1.
Type ".help" for more information.
> const url = await import("url");
undefined
> new URL("/sentry")
Uncaught TypeError [ERR_INVALID_URL]: Invalid URL
 at __node_internal_captureLargerStackTrace (node:internal/errors:478:5)
 at new NodeError (node:internal/errors:387:5)
 at URL.onParseError (node:internal/url:565:9)
 at new URL (node:internal/url:641:5) {
 input: '/sentry',
 code: 'ERR_INVALID_URL'
}

I have just noticed that in my comment on the tunnelling example I did mention solving the ERR_INVALID_URL issue by not having a tunnel:"/sentry" in sentry.server.config.ts. So I guess, this bug report is more to do with rewrite + tunnel on the server side build?

Regardless of what is causing it, it's not easy to track down what the cause of the error is, and it might be something @sentry/nextjs checks for?

[lforst]

in which init call are you setting tunnel? In sentry.client.config.js or in sentry.server.config.js?

[Naddiseo]

in which init call are you setting tunnel? In sentry.client.config.js or in sentry.server.config.js?

Having "tunnel": "/sentry" in sentry.server.config.js is what causes the ERR_INVALID_URL issue.

[lforst]

in which init call are you setting tunnel? In sentry.client.config.js or in sentry.server.config.js?

Having "tunnel": "/sentry" in sentry.server.config.js is what causes the ERR_INVALID_URL issue.

Right. Unless you actually want to tunnel server events that originate from the server (can't think of a use case here), you should set the tunnel option only in sentry.client.config.js. If you really want to tunnel server events you must provide an absolute URL if I am not mistaken.

[Naddiseo]

Right. Unless you actually want to tunnel server events that originate from the server (can't think of a use case here), you should set the tunnel option only in sentry.client.config.js. If you really want to tunnel server events you must provide an absolute URL if I am not mistaken.

Yes, of course. However, the error message doesn't tell me this, and it took quite a bit of debugging to come to that conclusion; it would have saved me some debugging cycles if sentry had verified my config was correct.