Next API Capture – Ver a "API chamada no servidor" do App Router no DevTools

Ao desenvolver com o Next.js App Router, os fetch que acontecem na renderização de RSC, em route handlers e em server actions
não aparecem na aba Network do navegador, então depurar os dados iniciais fica frustrante. Como são chamadas feitas no servidor,
não são capturadas na Network, e depois do deploy fica ainda mais difícil enxergar. Foi para isso que eu criei esta ferramenta.

Principais pontos

• Captura não só fetch do lado do servidor, mas também Node http/https (axios·got·node-fetch) por meio de hook
• Agrupa as capturas por navigation (mudança de página) e as mostra no painel do DevTools
  — server (rsc/route-handler/action) e client (fetch/xhr) em uma única tela
• Headers e body de requisição/resposta (descompactação automática de gzip·deflate·br) · busca/filtro · redimensionamento do painel
• Observa o stream de resposta sem "consumi-lo", então não quebra a requisição real (EventToEmitter multi-listener)
• Padrões seguros: não ativa automaticamente em produção · mascaramento de headers sensíveis · limite de tamanho do body ·
  funciona apenas em loopback (127.0.0.1) → os dados não saem do ambiente local
• A integração envolve só 3 pontos: instrumentation.ts / middleware.ts / carregar a extensão do Chrome

Uso

• Biblioteca: npm i @shinjinseop/next-api-capture (peer: next >= 13.4, MIT)
• Extensão do Chrome: atualmente em análise na Web Store — até lá, use via "load unpacked" a partir do repositório
• Demo/guia de instalação: https://next-api-capture-playground.vercel.app/

A causa era que "só faziam hook em fetch e não conseguiam ver axios (node:http)". Então eu também apliquei patch na camada http
e organizei isso como biblioteca. Feedbacks são bem-vindos.