nuxt-fetch-inspector

Nuxt модуль який перехоплює всі $fetch запити і виводить їх у DevTools браузера — з повною підтримкою SSR + CSR, кольоровим виводом, таймлайном, заголовками та IP.

Сумісний з Nuxt 3 та Nuxt 4.

Можливості

• SSR запити — видно в термінал Node.js та групуються в DevTools браузера після hydration
• CSR запити — виводяться в реальному часі в DevTools браузера
• Таймлайн кожного запиту: час початку → час завершення (видно паралельні та послідовні запити)
• Кольоровий вивід: колір методу, колір статусу, плашка середовища
• Заголовки запиту, тіло запиту та відповіді
• IP клієнта з X-Forwarded-For / X-Real-IP (корисно за nginx/proxy)
• Реактивна history через composable useFetchInspector()
• Нульовий вплив на бандл при enabled: false
• Працює з useFetch, useAsyncData, $fetch — будь-який виклик через Nuxt $fetch
• Без дублювання запитів — безпечно при паралельних SSR запитах

Встановлення

npm install nuxt-fetch-inspector

Підключення

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-fetch-inspector'],

  fetchInspector: {
    enabled: process.env.NODE_ENV !== 'production',
    logBody: true,
    logHeaders: true,
    maxLogs: 100,
    filterUrls: ['/health', '/_nuxt'],
  },
})

Вигляд у DevTools

SSR запити групуються в один блок після hydration. CSR запити з'являються в реальному часі.

▼ nuxt-fetch-inspector  4 SSR requests (server-side)
  ▼ nuxt-fetch-inspector [SSR] GET /app/glob → 200 | 402ms | 14:22:10.044 | 192.168.1.1
      Timeline:  ⬆ 14:22:10.044  →  ⬇ 14:22:10.446
      Client IP: 192.168.1.1
      Headers:   { Authorization: 'Bearer ...', sHost: 'myapp', sLocale: 'uk' }
      Response body: { ... }

  ▼ nuxt-fetch-inspector [CSR] POST /cart/add → 201 | 88ms | 14:22:11.300
      Timeline:  ⬆ 14:22:11.300  →  ⬇ 14:22:11.388
      Request body:  { variationId: 42, quantity: 1 }
      Response body: { cart_id: "abc123" }

Опції

| Опція | Тип | За замовчуванням | Опис | |---|---|---|---| | enabled | boolean | true | При false — плагін не реєструється, нульовий вплив на бандл | | logBody | boolean | true | Виводити тіло запиту і відповіді | | logHeaders | boolean | true | Виводити заголовки запиту | | maxLogs | number | 100 | Максимальна кількість записів в history | | filterUrls | string[] | [] | Пропускати запити URL яких містить будь-який з цих рядків |

Composable

Доступ до реактивної history запитів з будь-якого компонента або сторінки:

<script setup lang="ts">
const {
  logs,        // Ref<FetchLog[]> — всі логи, найновіші першими
  ssrLogs,     // ComputedRef<FetchLog[]>
  csrLogs,     // ComputedRef<FetchLog[]>
  errorLogs,   // ComputedRef<FetchLog[]>
  totalCount,  // ComputedRef<number>
  ssrCount,    // ComputedRef<number>
  csrCount,    // ComputedRef<number>
  errorCount,  // ComputedRef<number>
  clear,       // () => void — очистити history
  findById,    // (id: string) => FetchLog | undefined
} = useFetchInspector()
</script>

<template>
  <div>
    SSR: {{ ssrCount }} | CSR: {{ csrCount }} | Помилки: {{ errorCount }}
    <button @click="clear">Очистити</button>
    <div v-for="log in logs" :key="log.id">
      [{{ log.environment }}] {{ log.method }} {{ log.url }} → {{ log.status }} ({{ log.duration }}ms)
    </div>
  </div>
</template>

Інтерфейс FetchLog

interface FetchLog {
  id: string                              // Унікальний ідентифікатор запиту
  environment: 'SSR' | 'CSR'             // Середовище виконання
  method: string                          // GET, POST тощо
  url: string                             // Повний URL
  status?: number                         // HTTP статус відповіді
  duration?: number                       // Тривалість в мілісекундах
  timestamp: number                       // Unix timestamp (мс) — момент початку запиту
  ip?: string                             // IP клієнта з X-Forwarded-For / X-Real-IP (лише SSR)
  requestHeaders?: Record<string, string> // Заголовки запиту
  requestBody?: unknown                   // Тіло запиту
  responseBody?: unknown                  // Тіло відповіді
  errorMessage?: string                   // Повідомлення помилки якщо запит провалився
}

Визначення IP

Коли застосунок працює за nginx або іншим reverse proxy, модуль читає IP клієнта з заголовків X-Forwarded-For та X-Real-IP які proxy передає в кожен запит. Жодних додаткових запитів — IP береться безпосередньо з заголовків кожного $fetch виклику.

Приклад nginx конфігу:

location / {
    proxy_pass http://your-nuxt-app:3000;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

Примітки

• SSR логи передаються в браузер через Nuxt payload і виводяться в DevTools після app:mounted
• При SWR кешуванні (getCachedData) мережевий запит не відбувається — interceptor не спрацьовує (нормальна поведінка)
• Модуль використовує Proxy на globalThis.$fetch — не ламає baseURL, кастомні заголовки та інші налаштування Nuxt
• На сервері оригінальний $fetch зберігається один раз на рівні модуля — запобігає накопиченню Proxy при паралельних запитах

Ліцензія

MIT