Next API Capture – ดู 'API ที่เรียกจากฝั่งเซิร์ฟเวอร์' ของ App Router ใน DevTools

เวลาพัฒนาด้วย Next.js App Router ค่อนข้างอึดอัดเวลา debug ข้อมูลเริ่มต้น เพราะ fetch ที่เกิดขึ้นใน RSC render, route handler และ server action
มองไม่เห็นในแท็บ Network ของเบราว์เซอร์ มันถูกเรียกจากฝั่งเซิร์ฟเวอร์จึงไม่แสดงใน Network
และพอ deploy แล้วก็ยิ่งมืดแปดด้าน เลยสร้างสิ่งนี้ขึ้นมาเพื่อให้เห็นมัน

เนื้อหาหลัก

• ดักจับได้ไม่ใช่แค่ fetch ฝั่งเซิร์ฟเวอร์ แต่รวมถึง Node http/https (axios·got·node-fetch) ด้วย
• จัดกลุ่มข้อมูลที่ดักจับได้ตามหน่วย navigation (การย้ายหน้า) แล้วแสดงในแผง DevTools
  — รวม server (rsc/route-handler/action) และ client (fetch/xhr) ไว้ในหน้าจอเดียว
• ส่วนหัวคำขอ/การตอบกลับ + เนื้อหา (ถอด gzip·deflate·br อัตโนมัติ) · ค้นหา/กรอง · ปรับขนาดแผงได้
• 'สังเกต' response stream โดยไม่ 'consume' มัน จึงไม่ทำให้คำขอจริงเสียหาย (EventToEmitter multi-listener)
• ค่าเริ่มต้นด้านความปลอดภัย: ไม่เปิดอัตโนมัติในโปรดักชัน · ปิดบังส่วนหัวที่มีข้อมูลอ่อนไหว · จำกัดขนาด body ·
  ทำงานเฉพาะบน loopback (127.0.0.1) → ข้อมูลไม่ออกจากเครื่อง локัล
• จุดที่ต้องเชื่อมต่อมีเพียง 3 แห่ง: instrumentation.ts / middleware.ts / โหลดส่วนขยาย Chrome

การใช้งาน

• ไลบรารี: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• ส่วนขยาย Chrome: ตอนนี้กำลังรอการตรวจสอบบนเว็บสโตร์ — ระหว่างนี้ใช้งานแบบ 'load unpacked' จาก repo ได้
• เดโม/คู่มือติดตั้ง: https://next-api-capture-playground.vercel.app/

สาเหตุคือเดิมที 'hook ได้แค่ fetch แต่ดู axios (node:http) ไม่ได้' เลย patch ลงไปถึงชั้น http
และจัดทำออกมาเป็นไลบรารี ยินดีรับฟีดแบ็กครับ