Next API Capture – App Router के 'सर्वर से कॉल होने वाले API' को DevTools में देखें

Next.js App Router के साथ डेवलप करते समय RSC render, route handler और server action में होने वाले fetch
ब्राउज़र के Network टैब में दिखाई नहीं देते, इसलिए initial data को debug करना काफी मुश्किल हो जाता है. चूंकि कॉल सर्वर से होता है, यह Network में
दिखाई नहीं देता, और deploy होने के बाद तो यह और भी अस्पष्ट हो जाता है. इसे देखने के लिए ही इसे बनाया गया है.

मुख्य बातें

• सिर्फ server-side fetch ही नहीं, बल्कि Node http/https (axios·got·node-fetch) तक को hook करके capture
• capture को navigation (page move) यूनिट में समूहित करके DevTools panel में दिखाना
  — server (rsc/route-handler/action) और client (fetch/xhr) को एक ही स्क्रीन पर
• request/response header + body (gzip·deflate·br auto-decompress) · search/filter · panel resize
• response stream को 'consume' किए बिना 'observe' करना, इसलिए वास्तविक request नहीं टूटता (EventToEmitter multi-listener)
• safe defaults: production में auto ON नहीं होता · sensitive header masking · body size cap ·
  सिर्फ loopback (127.0.0.1) पर काम करता है → data local मशीन से बाहर नहीं जाता
• integration सिर्फ 3 जगह: instrumentation.ts / middleware.ts / Chrome extension load

उपयोग

• library: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Chrome extension: अभी Web Store review में है — तब तक repo से 'load unpacked' के जरिए इस्तेमाल करें
• demo/install guide: https://next-api-capture-playground.vercel.app/

समस्या यह थी कि 'सिर्फ fetch को hook किया गया था और axios (node:http) को नहीं देखा जा सकता था'. इसलिए http layer तक patch करके
इसे library के रूप में व्यवस्थित किया गया है. feedback का स्वागत है.