Next API Capture – „Vom Server aufgerufene APIs“ des App Router in DevTools sehen

Wenn man mit dem Next.js App Router entwickelt, ist das Debuggen initialer Daten mühsam, weil fetch-Aufrufe aus RSC-Rendering, Route-Handlern und Server Actions
im Browser-Tab „Network“ nicht sichtbar sind. Da sie vom Server aus aufgerufen werden, tauchen sie im Network-Tab
nicht auf – und nach dem Deployment ist es noch undurchsichtiger. Genau dafür habe ich das gebaut.

Wichtige Punkte

• Erfasst nicht nur serverseitiges fetch, sondern durch Hooking bis hin zu Node-http/https auch axios, got und node-fetch
• Bündelt Captures nach Navigationen (Seitenwechseln) und zeigt sie im DevTools-Panel an
  — serverseitig (rsc/route-handler/action) und clientseitig (fetch/xhr) auf einem Bildschirm
• Request-/Response-Header + Body (automatisches Entpacken von gzip, deflate und br) · Suche/Filter · Größenanpassung des Panels
• Beobachtet Response-Streams, ohne sie zu „verbrauchen“, und beeinträchtigt so echte Requests nicht (EventToEmitter Multi-Listener)
• Sichere Standardwerte: in Produktion nicht automatisch ON · Maskierung sensibler Header · Body-Größenlimit ·
  funktioniert nur auf Loopback (127.0.0.1) → Daten verlassen den lokalen Rechner nicht
• Die Integration betrifft nur 3 Stellen: instrumentation.ts / middleware.ts / Laden der Chrome-Erweiterung

Verwendung

• Bibliothek: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Chrome-Erweiterung: derzeit in Prüfung im Web Store — bis dahin per „Load unpacked“ aus dem Repo nutzbar
• Demo/Installationsanleitung: https://next-api-capture-playground.vercel.app/

Die Ursache war, dass nur fetch gehookt wurde und axios (node:http) nicht sichtbar war. Deshalb habe ich auch die HTTP-Ebene gepatcht und als Bibliothek aufbereitet. Feedback willkommen.