Unable to setup vscode debugger with app router for specific server actions files

[shaunwarman]

Current nextjs version

commit b3ad907 (grafted, HEAD -> canary, tag: v14.0.5-canary.23, origin/canary, origin/HEAD)

Node version: v18.18.0

TLDR; unable to debug some of the nextjs core server action code. Other code is debuggable, but I'm unable to inspect and set breakpoints on some next.js core code.

Overview

I've followed some of the contributing guides on how to pull down the next.js codebase and add a specific next.js application into this same folder for debugging based on this document:
https://github.com/vercel/next.js/blob/canary/contributing/core/developing-using-local-app.md
https://github.com/vercel/next.js/blob/canary/contributing/core/vscode-debugger.md

Vscode debugger configuration
https://github.com/vercel/next.js/blob/canary/.vscode/launch.json

What I'm most interested in debugging is the server actions handleAction function located here
https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/action-handler.ts#L252C30-L252C30

Example setup

1. Follow this core contributors guide on getting next.js setup locally.
2. Change the default .vscode/launch.json so that the example points to the server-action-upload example.
3. Debug the application - you'll notice you are unable to add breakpoints to code in packages/next/dist/server/app-render/action-handler.js. Even with launch.json configuraiton additions like "autoAttachChildProcesses": true or using cmd + shift + p -> Debug: Attach to Node Process.

Additional / related questions

When running the debugger, all code except some items within this server action handling code is unbound. Is this because:

• The code is running in a worker thread?
• The code is compiled and referenced elsewhere that I'm missing without source maps? (e.g. .next/server/)

Do note that the final goal is to see if we can leverage our custom server multipart parser and csrf handling and avoid the current nextjs multipart parser code. This would allow us to add csrf protection to server action based forms while still getting the benefits of both (server actions and security).

[shaunwarman]

cc @shuding @ztanner @feedthejim I'd like to contribute to the server action code and/or at least documentation, but unable to properly get the debug setup as a first step.

[andrewmartin]

I think I am seeing a very similar issue here where my breakpoints are only bounding to the Client side code with the default debugger setup. I am unable to get API endpoints or Server Actions breakpoints to land. Any ideas?

[tomatac]

I have a similar issue. I all the breakpoints show as unbound and the application is not stopped for debugging.

[SimonHFrost]

Does debugging even work for app router projects? I also discovered this stackoverflow with a similar issue which has been un-answered for over a year 🤷‍♀️ https://stackoverflow.com/questions/76023370/next-js-debugging-server-side-code-with-chrome-devtools-breakpoints-are-ignore/78704934#78704934