Debugging fix #47083

[jarethtan]

What?

This fix closes #47083 issue.

Why?

Debugger crashes when --inspect=0.0.0.0:9229 was passed.
In order to expose a debugger from inside a Docker container, it has to listen on 0.0.0.0 instead of the default 127.0.0.1 IP address. To do that, we have to specify an inspect flag format of --inspect=0.0.0.0:9229. In the code:

next.js/packages/next/src/cli/next-dev.ts

Lines 506 to 519 in aca83d2

	const debugPort = (() => {
	const debugPortStr =
	process.execArgv
	.find(
	(localArg) =>
	localArg.startsWith('--inspect') ||
	localArg.startsWith('--inspect-brk')
	)
	?.split('=')[1] ??
	process.env.NODE_OPTIONS?.match?.(
	/--inspect(-brk)?(=(\S+))?( |$)/
	)?.[3]
	return debugPortStr ? parseInt(debugPortStr, 10) : 9229
	})()

Passing NODE_OPTIONS=--inspect=0.0.0.0:9229 next dev into the debugPort function, It expects debugPortStr to be shaped like an integer. But if you use --inspect:0.0.0.0:9229, debugPortStr is now 0.0.0.0:9229, thus the parse fails and returns 0.

Then not long after, it tries using this 0 port and does +1 on it.

next.js/packages/next/src/cli/next-dev.ts

Line 541 in aca83d2

`--inspect${isDebuggingWithBrk ? '-brk' : ''}=${debugPort + 1}`

Causing this warning warn - the --inspect option was detected, the Next.js server should be inspected at port 1.

Then a subsequent error /usr/bin/node: must be 0 or in range 1024 to 65535.

How?

The recommendation is to create a function transformInspectFlagForNextAvailablePort() that returns an entire string input. Four different types of inspect flag inputs are accepted for this function and the actions are as follows:

1. Input format --inspect=0.0.0.0:9229. function shall accept inspect flag with the port number modified to +1 on the user specified port number (In this case it is 9229). Resulting port will be 9230. Function will return --inspect=0.0.0.0:9230.
2. Input format --inspect=0.0.0.0. function shall accept inspect flag with IP address specified. Since port is not specified, a default port number of 9229 is allocated and +1 to it. Resulting port will be 9230. Function will return --inspect=0.0.0.0:9230.
3. Input format --inspect=9229. function shall accept inspect flag with port specified. Since IP is not specified, a default IP address of 127.0.0.1 is allocated and +1 to it. Function will return --inspect=127.0.0.1:9230.
4. Input format --inspect. function shall accept inspect flag with port specified. Since IP and Port are not specified, a default IP address of 127.0.0.1 and a default port number of 9229 are allocated. Default port (9229) is modified to +1 and resulting port will be 9230. Function will return --inspect=127.0.0.1:9230.

Try out the function in the following Link

Fixes

Returns the correct inspect flag string format to process.execArgv when docker IP address 0.0.0.0 is included in the inspect flag.

Note: I have tried running pnpm lint however it fails with an error as follows

Lint console output

@jarethtan ➜ /workspaces/next.js (debugging_fix) $ pnpm lint

> nextjs-project@0.0.0 lint /workspaces/next.js
> run-p test-types lint-typescript prettier-check lint-eslint lint-language


> nextjs-project@0.0.0 lint-typescript /workspaces/next.js
> turbo run typescript


> nextjs-project@0.0.0 lint-eslint /workspaces/next.js
> eslint . --ext js,jsx,ts,tsx --max-warnings=0 --config .eslintrc.json --no-eslintrc


> nextjs-project@0.0.0 test-types /workspaces/next.js
> tsc


> nextjs-project@0.0.0 prettier-check /workspaces/next.js
> prettier --check .


> nextjs-project@0.0.0 lint-language /workspaces/next.js
> alex .

Checking formatting...
.github/actions/issue-on-comment/index.js• Packages in scope: @next/bundle-analyzer, @next/codemod, @next/env, @next/eslint-plugin-next, @next/font, @next/mdx, @next/plugin-storybook, @next/polyfill-module, @next/polyfill-nomodule, @next/react-dev-overlay, @next/react-refresh-utils, @next/swc, @turbo/pack-test-harness, @vercel/turbopack-next, bench-production, create-next-app, eslint-config-next, next, next-dev-tests
• Running typescript in 19 packages
• Remote caching disabled
@next/font:typescript: Skipping cache check for @next/font#typescript, outputs have not changed since previous run.
@next/font:typescript: cache hit, replaying output e6e2216ad4f2c0a5
@next/react-dev-overlay:typescript: Skipping cache check for @next/react-dev-overlay#typescript, outputs have not changed since previous run.
@next/react-dev-overlay:typescript: cache hit, replaying output 8f093f92c8f287c2
next:typescript: cache miss, executing 319ed840e88377bb
@next/font:typescript: 
@next/font:typescript: > @next/font@13.2.5-canary.12 typescript /workspaces/next.js/packages/font
@next/font:typescript: > tsec --noEmit -p tsconfig.json
@next/font:typescript: 
@next/react-dev-overlay:typescript: 
@next/react-dev-overlay:typescript: > @next/react-dev-overlay@13.2.5-canary.12 typescript /workspaces/next.js/packages/react-dev-overlay
@next/react-dev-overlay:typescript: > tsec --noEmit -p tsconfig.json
@next/react-dev-overlay:typescript: 
next:typescript: 
next:typescript: > next@13.2.5-canary.12 typescript /workspaces/next.js/packages/next
next:typescript: > tsec --noEmit
next:typescript: 
examples/amp-first/public/manifest.jsonKilled
 ELIFECYCLE  Command failed with exit code 137.
examples/api-routes-apollo-server-and-client-auth/apollo/client.tsx ELIFECYCLE  Command failed.
 ELIFECYCLE  Command failed.
 ELIFECYCLE  Command failed.
 ELIFECYCLE  Command failed.
ERROR: "lint-eslint" exited with 1.
 ELIFECYCLE  Command failed with exit code 1.
next:typescript:  ELIFECYCLE  Command failed.

However I am unable to trace the bug and find out what is the linting error. I tried pnpm lint--fix and ran pnpm lint but the problem is still there

[ijjk]

Closing in favor of #48019 thanks for the PR though!