javascript - VSCode kullanarak Nextjs Api uç noktalarını hata ayıklama

Şu anda VSCode'da /api klasöründe hangi dosyaya (API uç noktası) breakpoint koymam gerektiğini manuel olarak bulmam gerekiyor.

Aşağıdaki launch.json dosyasına sahibim:

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

O belirli Nextjs API Yolu'na gelen bir istek olduğunda otomatik olarak durdurmak veya breakpoint ayarlamanın bir yolu var mı?

Örneğin, diyelim ki bir /api/data.tsx dosyam var :

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!'});
}

Ve her gelen istekte console.log üzerinde durmak istiyorum. Bunu nasıl yapabilirim?

Cevap #1

VSCode'da kırmızı noktaları yerleştirmek için kenar çubuğuna tıkladığımda aynı sorunu yaşıyordum.

İyi haber şu ki hala bir yol var. VSCode'da, istediğiniz satıra kırmızı noktayı ayarlamak için tıklamak yerine, o satıra sadece debugger yazın. Neden bir şekilde çalışıp diğer şekilde çalışmadığını bilmiyorum - belki noktaları ayarlamak için tıklamanın gerçekten çalışmasını sağlayacak bir ayar daha vardır? Şimdiye kadar benim için api rotaları ile en iyi bu oluyor:

npm run dev

Şimdi aşağıdaki launch.json ile hata ayıklayıcıyı ekleyin. (Next.js projem, çalışma alanım klasörünün bir alt klasöründeydi, bu yüzden kendi yapılandırmamın bunu yansıtması gerekiyordu. Aşağıdaki yapılandırma, Next.js proje kökünün $workspaceFolder ile aynı olduğunu varsayar.)

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

Şimdi VSCode'da, kesme noktası istediğiniz her yere:

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

  console.log....
});

Bunun gibi bir şeyle sonuçlanmalı

Cevap #2

Ben de aynı sorunu yaşıyorum, ama iki adımda çözdüm:

1. VSCode settings.json dosyasına bir satır ekleyin: "debug.javascript.usePreview": false

2. NODE_OPTIONS="--inspect" kullanmayın

O zaman hâlâ bağlanmamış bir kesme noktası görebilirsiniz, ancak uygulamayı çalıştırın ve kesme noktasını tekrar ayarlayın, kırmızı olacak ve iyi çalışacaktır.

Güncelle

Bazen, API üzerinde kırılma noktası ayarlamakta hâlâ sorun yaşıyorum, bu yüzden gerçek sorunun ne olduğunu anlamak için birkaç saat harcadım. Sonunda sorunu buldum:

Çünkü bir Nextjs uygulaması çalıştırdığınızda, Node önce next komut dosyasını çalıştırır, ardından next komut dosyası kendi kodunuz olan bir alt süreç oluşturur. Nextjs ayrıca geliştirme modunu kullandığınızda otomatik olarak NODE_OPTIONS=--inspect ayarlar, ancak farklı bir port numarası kullanır ve bu numara otomatik olarak değişir. ANA NOKTA şudur: Next komut dosyası ve alt süreç farklı hata ayıklama port numarasına sahip olacaktır. İşte bazen hata noktaları (breakpoint) koyamamanızın nedeni budur.

Bazı senaryolar vardır:

1. Eğer sunucunuzu VSCODE terminalinde manuel olarak 'npm run dev' yazarak başlatırsanız, VSCODE otomatik olarak hata ayıklama portlarını bulacak ve sorun yaşamayacaksınız.
2. Eğer sunucunuzu VSCODE dışında bir terminalden başlatırsanız ve ardından attach kullanırsanız, VSCODE genellikle yalnızca bir porta bağlanır ve genellikle sadece Nextjs betiğine bağlanır. Bu yüzden kendi kodunuzda kesme noktası koyamazsınız.
3. Eğer sunucuyu başlatmak için launch.json dosyasında launch metodunu kullanırsanız, o zaman No.2 gibi aynı problem ortaya çıkacaktır, yani kesme noktanızı ayarlayamazsınız.

Sorunu çözmenin basit bir yolu var: Ya sunucuyu VSCODE iç terminalinden başlatın ya da launch.json dosyasına şunu ekleyin:

  "autoAttachChildProcesses": true,

Sonra F5 tuşuna basarak hata ayıklamaya başlayabilir ve her şey yolunda gidebilir.

   {
      "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,
    }

NODE_OPTION='--inspect' eklemenize gerek yok, ayrıca "debug.javascript.usePreview": false de