How to debug NextJS during the build phase - node.js

My nextJS app have a path with 50k plus pages.
Running with npm run dev it works fine, but during build it gives me an error TypeError: Cannot read property 'page' of undefined at exportPaths.filter.route
That is weird, because I know how many paths I am trying to do (56,427) and they are fine.
I would really like to see where I messed up, but I can't launch a debugger for build stage ending with 'Starting inspector' multiple messages.
I have tried other ways, but with no success.
Here is my config, which is pretty obsolete, but seems straightforward:
{
"type": "node",
"request": "launch",
"name": "Next: Node",
"runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
"env": {
"NODE_OPTIONS": "--inspect"
},
"args": ["build"],
"port": 9229,
"console": "integratedTerminal"
}
P.S. Debugging npm run dev works fine
P.P.S. trying to 'listen' to the debugger in VS Code and launching debugger from command line, like in here https://nextjs.org/docs/advanced-features/debugging gives me the same problems.

Related

VSCode Debug TypeScript files inside symlink project

I am having a super annoying problem, that started unexpected.
I have two NodeJS projects, and both projects uses TypeScript and they are symlinked. I usually debug by just attaching to the running process.
When debugging with VSCode, if I put a breakpoint in the projectA it work just fine, and the breakpoint is bonded to the actual TS file I want.
But then, I need call projectB from my projectA, and here the debugger goes directly to the projectA/node_modules/projectB/dist/**.js files, and shows that my TS files are breakpoint set but not yet bound.
This is kind of unexpected, since it was working before, and the debugger went directly to the projectA/node_modules/projectB/src/**.ts files.
I am not sure what happened, but I don't recall changing anything, and I also can't make it work again.
If I try debugging with WebStorm (attaching, just like I do with VSCode) it works just fine, this is only happening with VSCode.
I even tried to install VSCode Insiders, but no luck.
Node version: 14.16.1
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Attach",
"port": 9229,
"request": "attach",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"runtimeArgs": ["--preserve-symlinks", "--preserve-symlinks-main"],
},
]
}
PS: Both projects has the sourceMaps: true defined in the tsconfig.json file

VS Code debugger is inconsistent while hitting breakpoints

I want to set up my VS Code debugger to debug my Next.js app. My launch.json contains the below settings:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Launch Program",
"skipFiles": ["<node_internals>/**"],
"port": 9229,
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
}
]
}
I also added the debug script to my packege.json:
"debug": "NODE_OPTIONS='--inspect' next dev"
First, I run npm run debug in my terminal, then I launch the debugger in the VS Code Run and Debug tab. The debugger is attached, but when I start adding breakpoints, some of them work properly (the dot indicating the breakpoint is red and the app stops when the breakpoint is hit), but most of them are ignored despite the red indicator. There're also some unbound breakpoints.
I spent a few days figuring this out with no effect. I really look forward to moving past console-logging for debugging purposes.
VS Code version: 1.57.0

trying to debug electron app, and window not showing up

I am attempting to debug an electron app in vs code (the main process, not the renderer process). The project I am trying to debug is this repo:
https://github.com/hello-efficiency-inc/raven-reader
it works really nice, once you have it cloned, and the right things are installed. Then I can just run:
yarn electron:serve
And boom, it runs nicely.
But I would like to also debug this. So I look around a bit, and find that I should probably use this launch.json file in the .vscode directory:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron: Main",
"protocol": "inspector",
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
"runtimeArgs": ["--remote-debugging-port=9223", "."],
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
}
}
]
}
In my package.json, I have this line for finding the startfile:
"main": "./src/background.js",
So, I try to run by clicking the debug icon, and then green triangle where it says
run and debug | Electron:Main
Which gives me this in the call stack menu:
But nothing actually seems like it's running, I dont see any desktop window which I would like so I can actually debug, and I can't hit my breakpoints either
Best way to sort this is to install code runner extension in vscode

Trying to run "npm run start" in VS Code's Debug on Windows 10

Normally, I run npm run start to run my program. I am trying to use the VS Code debugger to debug my program while running it.
Here's my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "(Windows) Launch electron",
"type": "cppvsdbg",
"request": "launch",
"program": "npm",
"args": ["run", "start"],
//"preLaunchTask": "build:win32",
"stopAtEntry": false,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": true
}
]
}
When I run this using VS Code the error I get is: launch program '' does not exist.
This all works fine if I use node under program for my debug sessions.
Other things:
$ which npm
/c/Program Files/nodejs/npm
I tried changing program to exactly that path but it didn't work.
I think the reason is in your "program" field, which is supposed to locate the executable files. Some common values are like "program": "${workspaceFolder}/app.js"
program - executable or file to run when launching the debugger

Can I run/debug Heroku Node.js app locally with VSCode?

TL; DR
On Microsoft VSCode v1.6.1, how to:
Properly set runtime executable?
Properly pass Heroku arguments?
Run Heroku Node.js app?
Debug Heroku Node.js app?
Details
I have created a Heroku Node.js application, which is launched using the CLI command:
heroku local web
and successfully starts at port 5000.
I am trying to debug it using Microsoft Visual Studio Code, using the following launch.json configuration:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": "/usr/local/bin/heroku",
"runtimeArgs": [
"local web",
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false,
"outFiles": []
}
But VSCode is automagically passing --debug-brk argument to heroku, causing the error:
/usr/local/bin/heroku --debug-brk=23080 'local web' app.js
! `--debug-brk=23080` is not a heroku command.
! See `heroku help` for a list of available commands.
VSCode also does not find heroku command without its full path (seems like it is not loading PATH environment variable).
Any ideas about how to setup the editor?
The following solution works for me:
1) In your procfile add the parameter --debug to the node process
web: node --debug server.js
By default the debugger listens in the port 5858
2) Once you have the node process running, open VSCode and add the following configuration to your launch.json file
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
3) Finally, click the play button in VSCode with the option "Attach to Process" and it should debug your process.
The following solution worked for me.
In my package.json "scripts", I added:
"debug": "node --inspect-brk server.js"
Then, in launch.json I added an envFile entry to the default "Launch via NPM" configuration, which now looks looks like this:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"envFile": "${workspaceFolder}/.env"
}
The above solution enables the VSCode debugger to run my server via an npm script, and my server runs with the env vars set in my .gitignore'd .env file, just like in the "regular" Heroku node.js workflow.
I struggled with this as for some reason the solution propsed didn't work for me. However, an alternate solution did so I thought I would share.
From the default debugging options in VS Code choose
Attach by Process ID
When you start the debugger with this configuration it should list available processes to attach to and one should be simply be server.js. This requires manually attaching each time, and if the other automatic attachment works for you that may be better, but this is still a workable solution.

Resources