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.

[lforst]

We should probably clarify the docs that the common use case for tunnel is only in the client. If you want to improve the error message, PRs welcome!

Could you resolve your issue?

[github-actions]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[Naddiseo]

I added a PR to throw a better error message

[lforst]

@Naddiseo thanks for opening a PR. Just out of curiosity, how are you using tunneling serverside? Normally it is just something you would do on the browser because of ad blockers.

[Naddiseo]

Adding tunneling server side was by accident because I didn't read the docs close enough and I had copy/pasted the client config into the server one. Then I got very confused by this error message.