Next API Capture – App Router'ın 'sunucudan çağrılan API'lerini DevTools'ta görmek

Next.js App Router ile geliştirirken RSC render'ı, route handler ve server action içinde gerçekleşen fetch çağrıları
tarayıcının Network sekmesinde görünmediği için ilk veri yüklemeyi debug etmek zor oluyor. Sunucudan çağrıldığı için Network'te
yakalanmıyor ve deploy edildikten sonra durum daha da karanlık hale geliyor. Bunu görmek için bunu yaptım.

Ana içerik

• Yalnızca sunucu tarafı fetch değil, Node http/https'i de (axios·got·node-fetch) hook'layarak yakalar
• Yakalamaları navigation (sayfa geçişi) bazında gruplayıp DevTools panelinde gösterir
  — server (rsc/route-handler/action) ve client (fetch/xhr) tek ekranda
• İstek/yanıt header'ları + body (gzip·deflate·br otomatik açılır) · arama/filtre · panel yeniden boyutlandırma
• Yanıt stream'ini 'tüketmeden' 'gözlemleyerek' gerçek isteği bozmaz (EventToEmitter çoklu listener)
• Güvenli varsayılanlar: production'da otomatik ON olmaz · hassas header'lar maskelenir · body boyutu sınırı vardır ·
  yalnızca loopback (127.0.0.1) üzerinde çalışır → veriler yerel ortamın dışına çıkmaz
• Entegrasyon yalnızca 3 yerde: instrumentation.ts / middleware.ts / Chrome uzantısını yükleme

Kullanım

• Kütüphane: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Chrome uzantısı: şu anda Web Store incelemesinde — bu sırada repodan 'load unpacked' ile kullanılabilir
• Demo/kurulum rehberi: https://next-api-capture-playground.vercel.app/

Sorunun nedeni, 'yalnızca fetch hook'lanıyor ve axios(node:http) görülemiyor' olmasıydı. Bu yüzden http katmanına kadar patch uygulayıp
bunu bir kütüphane olarak düzenledim. Geri bildirimlere açığım.