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