Регистрация плагина Vue, модуль Nuxt и использование

Регистрация плагина Vue

Передайте объект опций вторым аргументом в app.use():

app.use(NetworkDashboard, {
  enabled: true,
  maxLogs: 1000,
  devOnly: false,
  persistToStorage: false,

  interceptors: {
    fetch: true,
    xhr: true,
    websocket: true,
    sse: true,
  },

  filters: {
    excludeUrlPattern: /\/(health|metrics|favicon)/,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
  },

  sanitization: {
    sensitiveHeaders: ['authorization', 'x-api-key'],
    sensitiveFields: ['password', 'token', 'secret'],
    maskFields: ['email', 'phone'],
  },

  callbacks: {
    onLog: (entry) => console.log('[net]', entry.url),
    onError: (err) => console.error('[net error]', err),
  },

  // Настройте хоткей для показа/скрытия панели отладчика
  ui: {
    hotkey: 'd',
    hotkeyModifiers: { ctrl: true, shift: true }, // Ctrl+Shift+D
  },
})

Модуль Nuxt 3

Установите и добавьте в modules:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-network-dashboard/nuxt'],
  networkDashboard: {
    devOnly: true,
    maxLogs: 500,
    ui: { hotkey: 'd', hotkeyModifiers: { ctrl: true, shift: true } },
  },
})

<NetworkDebugger> и useNetworkDashboard() авто-импортированы — ручной import не требуется. Плагин работает только на клиенте, так что SSR не затрагивается.

Использование

Composition API

<script setup lang="ts">
import { useNetworkDashboard } from 'vue-network-dashboard'

const {
  logs, // Ref<UnifiedLogEntry[]> — реактивный массив логов
  totalRequests, // Ref<number>
  totalErrors, // Ref<number>
  averageDuration, // Ref<number> — миллисекунды
  totalDataSent, // Ref<number> — байты
  totalDataReceived, // Ref<number> — байты

  clear, // () => void
  enable, // () => void
  disable, // () => void
  isEnabled, // () => boolean

  getStats, // () => NetworkStats
  getStatsSummary, // () => string (человекочитаемая)

  getLogsByType, // (type: 'http'|'websocket'|'sse') => UnifiedLogEntry[]
  getLogsByUrl, // (pattern: string | RegExp) => UnifiedLogEntry[]
  getLogsByStatus, // ([min, max]: [number, number]) => UnifiedLogEntry[]
  getLogsByMethod, // (method: string) => UnifiedLogEntry[]
  getErrorLogs, // () => UnifiedLogEntry[]
  queryLogs, // (filters: QueryFilters) => UnifiedLogEntry[]

  subscribe, // (cb: (entry) => void) => () => void  (возвращает функцию отписки)
  export: exportLogs, // (format?: 'json' | 'csv') => string
} = useNetworkDashboard()
</script>

<template>
  <div>
    <p>Requests: {{ totalRequests }} | Errors: {{ totalErrors }} | Avg: {{ averageDuration }}ms</p>
    <button @click="clear()">Clear</button>
    <ul>
      <li v-for="log in logs" :key="log.id">
        {{ log.method }} {{ log.url }} — {{ log.http?.status }} ({{ log.duration }}ms)
      </li>
    </ul>
  </div>
</template>

Options API

<template>
  <div>
    <p>Total Requests: {{ $networkDashboard.totalRequests }}</p>
    <p>Errors: {{ $networkDashboard.totalErrors }}</p>
    <button @click="$networkDashboard.clear()">Clear Logs</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$networkDashboard.getStatsSummary())

    this._unsubscribe = this.$networkDashboard.subscribe((entry) => {
      if (entry.error.occurred) {
        console.warn('Request failed:', entry.url)
      }
    })
  },
  beforeUnmount() {
    this._unsubscribe?.()
  },
}
</script>

Без Vue (автономно)

Основной логгер можно использовать независимо от Vue, например в тестовом окружении или не-Vue веб-приложении:

import { createNetworkDashboard } from 'vue-network-dashboard'

const logger = createNetworkDashboard({
  maxLogs: 200,
  interceptors: { fetch: true, xhr: false, websocket: false, sse: false },
})

logger.enable()

const stats = logger.getStats()
console.log(stats.totalRequests)

logger.disable()