Next API Capture – Xem 'API được gọi từ server' của App Router trong DevTools

Khi phát triển với Next.js App Router, các lệnh fetch xảy ra trong quá trình render RSC, route handler và server action
thường không hiện trong tab Network của trình duyệt, nên việc debug dữ liệu khởi tạo khá bức bối. Vì chúng được gọi từ server nên Network không bắt được, và khi deploy thì lại càng mù mờ hơn. Tôi đã tạo công cụ này để giải quyết điều đó.

Nội dung chính

• Không chỉ capture fetch phía server mà còn hook cả Node http/https (axios·got·node-fetch)
• Gom các bản capture theo từng navigation (chuyển trang) để hiển thị trong panel DevTools
  — server (rsc/route-handler/action) và client (fetch/xhr) trên cùng một màn hình
• Header + body của request/response (tự động giải nén gzip·deflate·br) · tìm kiếm/bộ lọc · thay đổi kích thước panel
• 'Quan sát' response stream mà không 'tiêu thụ' nó, nên không làm hỏng request thực tế (EventToEmitter multi-listener)
• Mặc định an toàn: không tự động bật trên production · che các header nhạy cảm · giới hạn kích thước body ·
  chỉ hoạt động trên loopback (127.0.0.1) → dữ liệu không rời khỏi máy local
• Tích hợp chỉ ở 3 chỗ: instrumentation.ts / middleware.ts / load extension Chrome

Cách dùng

• Thư viện: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Extension Chrome: hiện đang chờ duyệt trên Web Store — trong thời gian này có thể dùng bằng cách load unpacked từ repo
• Demo/hướng dẫn cài đặt: https://next-api-capture-playground.vercel.app/

Nguyên nhân là vì 'chỉ hook fetch nhưng không thấy được axios (node:http)'. Vì vậy tôi đã patch xuống cả tầng http và đóng gói thành thư viện. Rất mong nhận được phản hồi.