VueCraft NPM

Справочник конфигурации ​

Все опции ниже применяются к app.use(NetworkDashboard, options), ключу конфигурации networkDashboard модуля Nuxt и createNetworkDashboard(options).

Опции верхнего уровня ​

enabled ​

boolean · по умолчанию: true

Главный переключатель вкл/выкл.

maxLogs ​

number · по умолчанию: 1000

Максимум записей, хранимых в памяти. Самые старые вытесняются при достижении лимита.

devOnly ​

boolean · по умолчанию: false

Когда true, плагин бездействует в продакшене (import.meta.env.PROD).

persistToStorage ​

boolean · по умолчанию: false

Сохранять логи в localStorage и восстанавливать их при перезагрузке страницы.

router ​

RouterInstance · по умолчанию: —

Инстанс Vue Router (или любой объект, удовлетворяющий минимальной форме currentRoute + afterEach). Требуется для обогащения контекстом маршрута — см. Интеграция с Vue Router.

enrichWithRoute ​

boolean · по умолчанию: false

Прикреплять router.currentRoute.value.fullPath к каждой записи лога как entry.route. Требует router.

Перехватчики ​

interceptors.fetch ​

boolean · по умолчанию: true

Перехватывать window.fetch.

interceptors.xhr ​

boolean · по умолчанию: true

Перехватывать XMLHttpRequest.

interceptors.websocket ​

boolean · по умолчанию: true

Перехватывать WebSocket.

interceptors.sse ​

boolean · по умолчанию: true

Перехватывать EventSource (SSE).

Фильтры ​

Предварительно фильтрует события перед сохранением. Несовпадающие записи отбрасываются.

filters.urlPattern ​

RegExp · по умолчанию: —

Сохранять только записи, чей URL совпадает.

filters.excludeUrlPattern ​

RegExp · по умолчанию: —

Отбрасывать записи, чей URL совпадает.

filters.methods ​

string[] · по умолчанию: —

Сохранять только записи с этими HTTP-методами (например, ['GET', 'POST']).

filters.statusCodes ​

number[] · по умолчанию: —

Сохранять только записи с этими точными кодами статуса.

filters.bodySizeThreshold ​

number · по умолчанию: —

Сохранять только записи, чьё тело не менее указанного числа байт.

Санитизация ​

Встроенные списки по умолчанию — см. Безопасность и санитизация. Все три опции ниже объединяются с этими значениями по умолчанию, а не заменяют их.

sanitization.sensitiveHeaders ​

string[] · по умолчанию: —

Имена заголовков для полного редактирования ([REDACTED]).

sanitization.sensitiveFields ​

string[] · по умолчанию: —

Имена полей тела для полного удаления.

sanitization.maskFields ​

string[] · по умолчанию: —

Имена полей тела для частичного маскирования (например, us***@example.com).

Метрики ​

metrics.calculateTTFB ​

boolean · по умолчанию: true

Отслеживать Time To First Byte для HTTP-запросов — время между стартом запроса и получением заголовков ответа (до чтения тела). Записывается в entry.metadata.ttfb в миллисекундах; остаётся null для записей WebSocket/SSE и для запросов, которые ещё выполняются.

metrics.trackRetries ​

boolean · по умолчанию: true

Увеличивать entry.metadata.retryCount, когда запрос завершается неудачей (status >= 400 или сетевая ошибка), а затем следует ещё один запрос к тому же METHOD url; сбрасывается в 0, как только эта конечная точка отвечает успешно. См. Определение повторов.

Коллбэки ​

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

callbacks.onLog ​

(entry: UnifiedLogEntry) => void · по умолчанию: —

Вызывается после сохранения каждой записи лога.

callbacks.onError ​

(error: Error) => void · по умолчанию: —

Вызывается при возникновении внутренней ошибки плагина.

callbacks.onFlush ​

(logs: UnifiedLogEntry[]) => void · по умолчанию: —

Вызывается после clear() с удалёнными записями.

Пример:

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`)
    },
  },
})

Готовые наборы коллбэков — см. Интеграция с Sentry и Интеграция с OpenTelemetry.

UI ​

Управляет встроенной панелью <NetworkDebugger>. Эти значения действуют как значения по умолчанию и могут быть переопределены пропами компонента.

ui.hotkey ​

string · по умолчанию: 'd'

Символ клавиши для шортката переключения.

ui.hotkeyModifiers ​

{ ctrl?: boolean; alt?: boolean; shift?: boolean; meta?: boolean } · по умолчанию: { ctrl: true, shift: true }

Модификаторы, требуемые вместе с hotkey.

ui.theme ​

'dark' | 'light' | 'auto' · по умолчанию: 'dark'

Цветовая схема панели. 'auto' следует системному prefers-color-scheme.