Network Dashboard

npm install vue-network-dashboard@latest

01 — Назначение

Когда это пригодится

Открыть вкладку Network в браузере, найти нужный запрос среди сотни похожих, вручную скопировать тело в отдельный инструмент — и повторять это при каждой правке кода: vue-network-dashboard превращает эту рутину в один встроенный экран.

Запрос в Postman работает, а в приложении — нет

Дело может быть в заголовках, которые браузер подставляет сам, в порядке запросов или в состоянии, накопленном за сессию. Тестировать проще прямо на реальном трафике приложения, а не пересобирать запрос вручную в отдельном инструменте.

Нужного ответа от сервера ещё не существует

Серверная часть ещё не написана или отдаёт совсем не то, что нужно для проверки конкретного сценария — ответ можно подменить на лету и продолжить работу, не дожидаясь, пока сервер догонит.

Токен доступа не должен попасть в лог

Скопировать историю запросов для коллеги или приложить к багрепорту не должно означать, что вместе с ней утечёт чужой пароль или токен авторизации. Такие поля можно скрывать автоматически, а не вычищать вручную перед каждой отправкой.

Баг проявляется только на медленном интернете

Гонка состояний, неправильный порядок запросов или забытый индикатор загрузки видны только тогда, когда сеть работает медленно и нестабильно — такие условия можно смоделировать прямо на рабочей машине, а не искать место с плохим сигналом.

02 — Фичи

Коротко о главном

Перехват всех типов сетевых запросов

Единый плагин перехватывает Fetch, XMLHttpRequest, WebSocket и Server-Sent Events (SSE), приводя их к унифицированному формату логов. Все события сохраняются реактивно в Vue-хранилище с полной информацией о запросах, ответах, заголовках, телах, времени выполнения и ошибках.

Безопасность и санитизация данных

Автоматическая маскировка чувствительных заголовков (Authorization, Cookie, X-API-Key), удаление конфиденциальных полей из тела (password, token, secret) и частичное маскирование PII (email, phone, address). Настройки санитизации расширяются, а логи всегда хранятся безопасно.

Встроенный UI-инструментарий с виртуальным скроллом

Готовый отладочный дашборд с фильтрацией по типу, URL, методу, статусу, длительности, телу и роуту. Живая статистика, таймлайн, группировка, поиск по телу с regex, подсветка вхождений, копирование как cURL, экспорт в HAR/JSON/CSV и полноэкранный режим.

Моки, трансформация ответов и брейкпоинты

Создавайте мок-правила с условиями (URL, метод, query, headers, тело) и организуйте их в группы. Трансформируйте реальные ответы на лету (изменение статуса, слияние/удаление полей). Устанавливайте брейкпоинты для паузы, редактирования и отпускания запросов.

Глубокая интеграция и расширенная аналитика

Автоматическое определение GraphQL (тип, имя, переменные), обнаружение N+1 запросов, импорт HAR/OpenAPI, сравнение сессий, дифф-вью и сетевая симуляция (Throttling). Готовые адаптеры для Sentry и OpenTelemetry, Vue DevTools и Nuxt-модуль.

Живые запросы, повтор и контекст маршрута

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

03 — Быстрый пример

Как это работает

Каждый запрос уже залогирован — остаётся спросить

fetch, XHR, WebSocket и SSE перехватываются автоматически, без ручной инструментации — getLogsByStatus и subscribe дают готовую выборку и живую подписку на новые записи.

query-logs.ts
import { useNetworkDashboard } from 'vue-network-dashboard'

const { getLogsByStatus, subscribe } = useNetworkDashboard()

const failedRequests = getLogsByStatus([500, 599])

const unsubscribe = subscribe((entry) => {
  if (entry.error.occurred) {
    console.warn('Request failed:', entry.url)
  }
})

// Every fetch/XHR/WebSocket/SSE call is logged automatically, no manual
// instrumentation — just query what already happened or subscribe to new
// entries as they come in.

Токены и пароли не попадут в лог по умолчанию

Authorization, Cookie, password и десяток похожих полей маскируются автоматически ещё до записи — свой список полей только дополняет базовую защиту, а не заменяет её.

sanitization.ts
import NetworkDashboard from 'vue-network-dashboard'

app.use(NetworkDashboard, {
  sanitization: {
    sensitiveHeaders: ['x-custom-token'],
    sensitiveFields: ['pin', 'securityAnswer'],
    maskFields: ['nationalId'],
  },
})

// Authorization, Cookie, password, token, and a dozen similar fields are
// redacted automatically before anything is written — even without this
// option, these lists only extend the built-in protection, never replace it.

Подделать ответ API без единой строчки в бэкенде

addMock перехватывает запрос по паттерну URL и возвращает свой ответ — с искусственной задержкой, если нужно. Подменённые записи в логе помечаются бейджем «mock», работает и для fetch, и для XHR.

mock.ts
import { useNetworkDashboard } from 'vue-network-dashboard'

const { addMock, removeMock } = useNetworkDashboard()

const rule = addMock({
  name: 'Mock /api/users',
  urlPattern: '/api/users',
  method: 'GET',
  response: {
    status: 200,
    body: [{ id: 1, name: 'Alice' }],
    delay: 200, // optional artificial latency in ms
  },
})

removeMock(rule.id)

// Mocked responses are logged normally, tagged with metadata.mocked = true
// and a "mock" badge — no real network call is made.

Начать знакомство →