Next API Capture – ver las “API llamadas desde el servidor” del App Router en DevTools

Cuando desarrollas con Next.js App Router, los fetch que ocurren durante el renderizado de RSC, los route handlers y las server actions no aparecen en la pestaña Network del navegador, así que depurar los datos iniciales se vuelve frustrante. Como se llaman desde el servidor, no se capturan en Network, y una vez desplegado es todavía más difícil verlo. Lo hice para poder ver eso.

Contenido principal

• Captura no solo fetch del lado del servidor, sino también Node http/https (axios·got·node-fetch) mediante hooking
• Agrupa las capturas por navigation (cambio de página) y las muestra en un panel de DevTools
  — server (rsc/route-handler/action) y client (fetch/xhr) en una sola pantalla
• Headers de solicitud/respuesta + body (descompresión automática de gzip·deflate·br) · búsqueda/filtro · redimensionado del panel
• “Observa” el stream de respuesta sin “consumirlo”, así que no rompe la solicitud real (EventToEmitter multi-listener)
• Valores seguros por defecto: no se activa automáticamente en producción · enmascarado de headers sensibles · límite de tamaño del body ·
  solo funciona en loopback (127.0.0.1) → los datos no salen de tu entorno local
• La integración solo requiere 3 puntos: instrumentation.ts / middleware.ts / cargar la extensión de Chrome

Uso

• Librería: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Extensión de Chrome: actualmente en revisión en la Web Store — mientras tanto, se puede usar desde el repo con “load unpacked”
• Demo/guía de instalación: https://next-api-capture-playground.vercel.app/

La causa era que “solo se hacía hooking de fetch y no se podía ver axios (node:http)”. Por eso también parcheé la capa http y lo organicé como librería. Se agradece el feedback.