Next API Capture – Melihat 'API yang dipanggil dari server' di App Router lewat DevTools

Saat mengembangkan dengan Next.js App Router, fetch yang terjadi di RSC render, route handler, dan server action
sering tidak terlihat di tab Network browser, sehingga debugging data awal terasa menjengkelkan. Karena dipanggil dari server, ia tidak tertangkap di Network,
dan setelah dideploy situasinya jadi makin gelap. Saya membuat ini untuk melihatnya.

Poin utama

• Menangkap bukan hanya fetch sisi server, tetapi juga Node http/https(axios·got·node-fetch) dengan hooking
• Mengelompokkan hasil tangkapan per navigation (perpindahan halaman) lalu menampilkannya di panel DevTools
  — server(rsc/route-handler/action) dan client(fetch/xhr) dalam satu layar
• Header permintaan/respons + body (gzip·deflate·br didekompresi otomatis) · pencarian/filter · ubah ukuran panel
• Mengamati stream respons tanpa 'mengonsumsi'-nya sehingga tidak merusak permintaan sebenarnya (EventToEmitter multi-listener)
• Nilai aman sebagai default: tidak otomatis ON di production · masking header sensitif · batas ukuran body ·
  hanya berjalan di loopback(127.0.0.1) → data tidak keluar dari lokal
• Integrasi hanya di 3 tempat: instrumentation.ts / middleware.ts / muat ekstensi Chrome

Penggunaan

• Library: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Ekstensi Chrome: saat ini sedang dalam proses peninjauan Web Store — sementara itu gunakan 'load unpacked' dari repo
• Demo/panduan instalasi: https://next-api-capture-playground.vercel.app/

Masalahnya adalah 'hanya hook fetch, dan tidak bisa melihat axios(node:http)'. Karena itu saya mem-patch hingga lapisan http
dan merapikannya menjadi library. Masukan sangat diterima.