Интеграция с Vue Router и продвинутое использование

Интеграция с Vue Router

Включите контекст маршрута, чтобы автоматически помечать каждую запись лога маршрутом Vue Router, активным в момент выполнения запроса. Это упрощает отслеживание, какая страница вызвала медленный запрос или ошибку, без ручного сопоставления по времени.

Vue 3 SPA

typescript

// main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import NetworkDashboard from 'vue-network-dashboard'
import App from './App.vue'

const router = createRouter({ history: createWebHistory(), routes })
const app = createApp(App)

app.use(router)
app.use(NetworkDashboard, {
  router,
  enrichWithRoute: true,
})

app.mount('#app')

Nuxt 3

typescript

// plugins/network-dashboard.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(NetworkDashboardPlugin, {
    router: nuxtApp.$router,
    enrichWithRoute: true,
  })
})

Что это добавляет

Когда настроено enrichWithRoute: true, каждый UnifiedLogEntry получает поле route:

typescript

entry.route // например "/dashboard/users/42"

В UI отладчика:

В панели фильтров появляется поле фильтра Route (только когда хотя бы один лог несёт маршрут). Поддерживает префикс regex:.
Вкладка Meta каждой развёрнутой записи лога показывает подсвеченный чип Route.
Счётчики модального окна Export учитывают маршрут — фильтрация по маршруту уменьшает экспортируемый набор.

Функция не имеет runtime-зависимости от vue-router — плагин принимает любой объект, удовлетворяющий минимальному интерфейсу RouterInstance (currentRoute + afterEach).

Продвинутое использование

Фильтрация логов

Используйте queryLogs для сложной многокритериальной фильтрации:

typescript

const { queryLogs } = useNetworkDashboard()

const slowPosts = queryLogs({
  type: 'http',
  method: 'POST',
  url: /\/api\//,
  minDuration: 1000,
})

Для реактивной фильтрации внутри компонента используйте встроенный composable useLogFilter:

typescript

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

const { filters, filteredLogs, resetFilters } = useLogFilter()

filters.value.url = 'api/users'
filters.value.type = 'http'
filters.value.hasError = true

// filteredLogs — computed ref, реагирующий как на фильтры, так и на живое хранилище логов

Подписка на новые логи

typescript

const { subscribe } = useNetworkDashboard()

const stop = subscribe((entry) => {
  if (entry.error.occurred || (entry.http?.status ?? 0) >= 500) {
    myMonitoring.capture(entry)
  }
})

onUnmounted(stop)

Экспорт логов

typescript

const dashboard = useNetworkDashboard()

function downloadJson() {
  const json = dashboard.export('json')
  const blob = new Blob([json], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  Object.assign(document.createElement('a'), { href: url, download: 'network-logs.json' }).click()
}

function downloadCsv() {
  const csv = dashboard.export('csv')
  const blob = new Blob([csv], { type: 'text/csv' })
  // ...
}

Логи также можно экспортировать напрямую из UI панели через кнопку Export в заголовке.

Интеграция с Sentry

import * as Sentry from '@sentry/vue'
import { createSentryAdapter } from 'vue-network-dashboard'

app.use(NetworkDashboardPlugin, {
  callbacks: createSentryAdapter(Sentry, {
    errorStatusThreshold: 500, // отправлять событие Sentry для 5xx (по умолчанию)
    includeBodies: false, // не включать тела в breadcrumbs (по умолчанию)
  }),
})

Каждый запрос становится breadcrumb-ом Sentry. HTTP 5xx и сетевые ошибки также отправляются как события Sentry через captureMessage.

Интеграция с OpenTelemetry

import { trace } from '@opentelemetry/api'
import { createOpenTelemetryAdapter } from 'vue-network-dashboard'

const tracer = trace.getTracer('my-app')

app.use(NetworkDashboardPlugin, {
  callbacks: createOpenTelemetryAdapter(tracer, {
    httpOnly: true, // пропускать WebSocket/SSE (по умолчанию)
    includeBodySize: true, // добавлять атрибуты размера тела (по умолчанию)
  }),
})

Создаёт один OTel-спан на каждый HTTP-запрос с семантическими HTTP-атрибутами (http.request.method, http.response.status_code, url.full и т. д.) по semconv 1.23.

Интеграция с Vue DevTools

Добавляет вкладку инспектора Network и слой таймлайна в Vue DevTools (расширение браузера ≥ 6.5 и vite-plugin-vue-devtools ≥ 7.x). Требует @vue/devtools-api как peer-зависимость.

import { setupDevtools } from 'vue-network-dashboard'
import { useNetworkDashboard } from 'vue-network-dashboard'

if (import.meta.env.DEV) {
  app.use(NetworkDashboardPlugin)
  const dashboard = useNetworkDashboard()
  setupDevtools(app, dashboard)
}

Инспектор показывает каждую запись лога как узел дерева с полным состоянием запроса/ответа. Слой таймлайна записывает маркер для каждого завершённого HTTP-запроса.

Коллбэки

Реагируйте на логи вне компонентов Vue — полезно для интеграции с отслеживанием ошибок или аналитикой:

typescript

app.use(NetworkDashboard, {
  callbacks: {
    onLog(entry) {
      analytics.trackEvent('network_request', {
        url: entry.url,
        method: entry.method,
        status: entry.http?.status,
        duration: entry.duration,
      })
    },

    onError(err) {
      Sentry.captureException(err)
    },

    onFlush(cleared) {
      console.log(`Flushed ${cleared.length} log entries`)
    },
  },
})

Интеграция с Vue Router и продвинутое использование ​