javascript - Depuração de endpoints de API Nextjs usando VSCode

Atualmente, eu tenho que encontrar manualmente qual arquivo (endpoint da API) devo definir um ponto de interrupção na pasta /api no VSCode.

Eu tenho o seguinte launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to application",
      "skipFiles": ["<node_internals>/**"],
      "port": 9229
    }
  ]
}

Existe uma maneira de parar automaticamente ou definir um ponto de interrupção sempre que houver uma solicitação para aquela rota específica da API do Nextjs?

Por exemplo, digamos que eu tenha um /api/data.tsx :

import { NextApiRequest, NextApiResponse } from 'next';
import { StatusCodes } from 'http-status-codes';
import getConfig from 'next/config';

export default async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
   console.log('do some logging');
   res.status(StatusCodes.OK).json({message: 'Good job buddy!'});
}

E quero parar no console.log em cada requisição recebida. Como posso fazer isso?

Resposta #1

Eu estava tendo o mesmo problema ao clicar na barra lateral no VSCode para colocar os pontos vermelhos.

A boa notícia é que ainda há uma maneira. No VSCode, em vez de clicar para colocar o ponto vermelho na linha desejada, basta escrever debugger nessa linha. Não sei por que funcionaria de um jeito e não de outro - talvez haja mais um ajuste que poderia fazer com que clicar para definir os pontos realmente funcionasse? Até agora, isso é o melhor que consegui com as rotas da API:

npm run dev

Agora anexe o depurador com o seguinte launch.json. (Meu projeto Next.js estava em uma subpasta da minha pasta de workspace, então minha própria configuração precisava refletir isso. A configuração abaixo pressupõe que a raiz do projeto Next.js seja a mesma que a $workspaceFolder.)

{
    "name": "Attach",
    "port": 9229,
    "request": "attach",
    "webRoot": "${workspaceFolder}", // mine had another subfolder here
    "cwd": "${workspaceFolder}",     // and here
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "pwa-node"
},

Agora no VSCode, onde você quiser o ponto de interrupção:

handler.get(async (req, res) => {
  debugger;

  console.log....
});

Deve acabar com algo assim

Resposta #2

Eu tenho o mesmo problema, mas resolvi em dois passos:

1. Adicione uma linha no settings.json do VSCode: "debug.javascript.usePreview": false

2. Não use NODE_OPTIONS="--inspect"

Então você ainda pode ver um ponto de interrupção não vinculado, mas execute o aplicativo e defina o ponto de interrupção novamente, ele ficará vermelho e funcionará bem.

Atualizar

Às vezes, ainda tenho problemas para definir breakpoints na API, então reservei algumas horas para descobrir qual é o verdadeiro problema. Finalmente encontrei o problema:

Porque quando você executa um aplicativo Nextjs, o Node primeiro executará o script next, depois o script next irá gerar um processo filho que é seu próprio código. O Nextjs também define automaticamente NODE_OPTIONS=--inspect quando você usa o modo de desenvolvimento, mas ele usa um número de porta diferente e o número muda automaticamente. O PONTO CHAVE é: O script Next e o processo filho terão números de porta de depuração diferentes. Essa é a razão pela qual às vezes você não consegue definir breakpoints.

Existem alguns cenários:

1. Se você iniciar seu servidor manualmente no terminal do VSCODE digitando "npm run dev", o VSCODE encontrará automaticamente as portas de depuração e você estará bem.
2. Se você iniciar seu servidor fora do VSCODE a partir de um terminal e depois usar attach, o VSCODE anexará apenas uma porta, geralmente apenas vinculada ao script do Nextjs. É por isso que você não consegue definir pontos de interrupção no seu próprio código.
3. Se você usar o método launch para iniciar o servidor em launch.json, então o mesmo problema ocorrerá como no item nº 2, você não poderá definir seu ponto de interrupção.

Há uma maneira simples de resolver o problema: Ou inicie o servidor a partir do terminal interno do VSCODE ou no launch.json, adicione:

  "autoAttachChildProcesses": true,

então você pode começar a depurar pressionando F5 e tudo indo bem.

   {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      },
      "autoAttachChildProcesses": true,
    }

Você não precisa adicionar NODE_OPTION='--inspect', nem "debug.javascript.usePreview": false