Debug Nexjs app in monorepo with "NODE_OPTIONS='inspect'"

[andresgutgon]

What?

Hi, nice to meet you. I've been looking for a solution for this hours and I don't find anything. So first of all sorry for creating an issue in this repo 🙏. But I think this can be really helpful for a lot of people. Debugging Node is not always easy

The problem. Debug node server NextJS app

I'm following their oficial docs: https://nextjs.org/docs/pages/building-your-application/configuring/debugging#server-side-code

But these docs are for a flat next app not for an app living in a monorepo like this so maybe someone already did this.

In my case this is my setup

• pnpm
• turbo
• nextjs 13.x.x

I'm trying this

turbo run dev:debug

And i have a nextjs app called apps/web/package.json

"scripts": {
  "dev:debug": "NODE_OPTIONS='--inspect' next dev"

I see the debugger session:

web:dev:debug: > NODE_OPTIONS='--inspect' next dev
web:dev:debug:
web:dev:debug: Debugger listening on ws://127.0.0.1:9229/63260d0c-65a0-4fa7-8285-e42487920401
web:dev:debug: For help, see: https://nodejs.org/en/docs/inspector
web:dev:debug: - ready started server on 0.0.0.0:3000, url: http://localhost:3000

And going to the app on http://localhost:3000 I see Node debugger session

But if I open it any file of my app is there. Only react

I'm out of idea 😓

[belgattitude]

I'll have a look next week. It's totally new for me but nice you've shared it. Don't get too frustrated though, perfectly normal sometimes 😀

[belgattitude]

BTW really feel free to make a small pr with the dev:debug script on this repo. I'll merge and try.

[andresgutgon]

Thanks! I'm trying to take a scientific aproach here 🤓 starting by standalone nextjs with javascript and go up to full monorepo pnpm typescript

https://github.com/andresgutgon/nextjs-debugging

So far I'm in the most simple case following their docs and I'm not understanding how debugging works in node. I did manage to debug a simple express one file server tho. So much be something related with nextjs and sourcemaps.

[belgattitude]

Nice. Have you tried it with a getserversideprops route ?

[andresgutgon]

With default pages/api/hello which is ultra simple. The problem is that Chrome Dev Tools don't even see that code so I can't put a debugger

[belgattitude]

mmm. I saw that you use turbo to run the command, might be that too ? (ie https://github.com/vercel/turbo/blob/main/packages/turbo/install.js#L190)

[andresgutgon]

Yes, I use turbo in my app but in the playground i use plain nextjs app with npm. I want to start as simple as possible and understand what's happening

[belgattitude]

Let me know when you find out... super interested as well. And thanks for your work

[andresgutgon]

Ok I think I found the right issue I'm having
I'm able to stop the debugger 🎉

The fix is in this PR which is still pending
vercel/next.js#51467

I wanted to try so I forked NextJS repo and copied these changes and looks it working

[belgattitude]

Thanks for the tip.