Network Dashboard

Универсальный плагин мониторинга сети для Vue 3. Перехватывает весь трафик HTTP (Fetch / XHR), WebSocket и Server-Sent Events (SSE), логирует его в едином формате, автоматически санитизирует чувствительные данные и предоставляет реактивное хранилище с богатой статистикой.

Возможности

• Полное покрытие — перехватывает Fetch API, XMLHttpRequest (XHR), WebSocket и Server-Sent Events
• Единый формат — все сетевые события используют одну согласованную структуру лога независимо от типа транспорта
• Безопасность прежде всего — автоматически редактирует чувствительные заголовки, удаляет чувствительные поля тела, маскирует PII
• Богатые метрики — отслеживает размеры запроса/ответа, длительность, объёмы передачи данных, разбивку по методам и статусам
• Нативно для Vue 3 — использует Vue ref для реактивного хранилища — Pinia или Vuex не требуются
• Нулевая конфигурация — работает сразу после app.use() с разумными настройками по умолчанию
• Гибкая настройка — обширные опции для выбора перехватчиков, фильтрации URL, санитизации, коллбэков и поведения UI
• Незавершённые запросы — запросы в процессе выполнения появляются как живые записи и обновляются на месте по завершении — точно как в DevTools браузера
• Группы моков — организуйте правила моков в именованные группы — включайте/выключайте целую группу разом, сворачивайте/разворачивайте, переименовывайте инлайн, импортируйте/экспортируйте как JSON
• Сравнение сессий — загрузите два HAR-файла бок о бок и увидьте мгновенный дифф — добавленные, удалённые и изменённые запросы с дельтами по полям
• Режим моков — определяйте правила URL/метод для перехвата запросов и возврата кастомных ответов без обращения к бэкенду
• Экспорт HAR — экспортируйте сессию как файл HTTP Archive — открывается напрямую в Chrome DevTools, Postman или Charles Proxy
• Waterfall-таймлайн — визуальная столбчатая диаграмма всех запросов на общей временной оси
• Просмотр диффа — выберите любые два лог-элемента, чтобы увидеть параллельный дифф заголовков и тела
• Группировка — сворачивает повторяющиеся запросы к одной конечной точке в одну строку со счётчиком
• Поиск по телу — фильтрует записи лога по содержимому тела запроса или ответа
• Поиск по regex — добавьте regex: перед любым фильтром URL или тела для поиска по регулярному выражению
• Подсветка URL — совпавший фрагмент URL подсвечивается прямо в списке логов, когда активен фильтр URL
• Дебаунс фильтров — текстовые фильтры (URL, Body, Route) обновляются с дебаунсом 180 мс; метод/статус/переключатели применяются мгновенно
• Сохранение фильтров — активные фильтры сохраняются в sessionStorage и автоматически восстанавливаются при следующей загрузке страницы
• Контекст маршрута — прикрепляет текущий маршрут Vue Router к каждой записи лога; фильтрация по маршруту в UI
• Фильтрованный экспорт — модальное окно экспорта с выбором формата (JSON / CSV / HAR), чекбоксами протокола, чекбоксами статуса и двойным слайдером временного диапазона
• Импорт HAR — загрузите любой файл .har в отладчик для изучения записанной сессии; живой трафик приостанавливается, пока активен файл
• Копирование как cURL — копирование любого HTTP-запроса одним кликом как готовой к запуску команды curl (с заголовками и телом)
• Повтор с редактированием — изменяйте URL, метод, заголовки и тело перед повторной отправкой любого запроса — JSON-тело валидируется инлайн
• Мок из лога — создание мока в один клик из любого захваченного ответа — правило предзаполнено URL, методом, статусом и телом
• Условия мока — добавляйте детальные условия совпадения к правилу мока: query-параметры, заголовки запроса и поля тела (все объединены через AND)
• Трансформация ответа — изменяйте реальные ответы на лету без полного мока — переопределяйте статус, объединяйте/удаляйте поля JSON-тела, добавляйте заголовки
• Троттлинг сети — симулируйте медленные соединения со встроенными пресетами (Fast 3G / Slow 3G / Offline-ish); задержка применяется на запрос через геттер, без перезапуска перехватчика
• Определение GraphQL — автоматически определяет GraphQL-операции в POST-запросах; показывает тип операции, имя и переменные в отдельной секции с цветным бейджем
• Определение N+1 — подсвечивает дублирующиеся запросы к одному URL+методу в 5-секундном окне оранжевым бейджем ×N
• Точки останова — ставит на паузу любой исходящий запрос перед отправкой — позволяет изучить и изменить URL, метод, заголовки и тело — затем отпустить или отменить
• Импорт OpenAPI — загрузите JSON-спецификацию OpenAPI 3.x или Swagger 2.x для автогенерации полного набора моков из всех paths
• Виртуальный скролл — список логов рендерит не более 100 строк; дополнительные строки подгружаются постепенно при прокрутке через IntersectionObserver
• Фильтр сообщений WebSocket — когда активен фильтр типа WS, переключатель скрывает события connection/open/close и показывает только записи message
• Спарклайн трафика — вкладка статистики показывает живой SVG-спарклайн объёма запросов во времени (5-секундные бакеты, последние ~3 мин)
• Полноэкранный режим — разверните панель отладчика на весь вьюпорт одним кликом
• Встроенный UI отладчика — перетаскиваемая, изменяемая по размеру панель с фильтрами, 3-вкладочным детальным видом, статистикой, таймлайном, редактором моков и экспортом
• Модуль Nuxt 3 — первоклассная интеграция с Nuxt с авторегистрацией и авто-импортом useNetworkDashboard()
• Vue DevTools — опциональная вкладка инспектора и слой таймлайна в Vue DevTools (расширение браузера + vite-plugin-vue-devtools)
• Sentry / OpenTelemetry — готовые адаптеры для отслеживания ошибок и распределённой трассировки
• TypeScript — включены полные определения типов

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

Плагин заменяет глобальные API браузера на уровне JavaScript до выполнения любого кода приложения. Когда сетевой вызов делается где-либо в вашем приложении (включая сторонние библиотеки), плагин перехватывает событие, форматирует его в UnifiedLogEntry и сохраняет реактивно.

Ваш код приложения
      │
      ▼
 Патченные глобальные объекты
  ┌────────────────────────────────────┐
  │ window.fetch     (FetchInterceptor)│
  │ XMLHttpRequest   (XHRInterceptor)  │
  │ window.WebSocket (WSInterceptor)   │
  │ window.EventSource (SSEInterceptor)│
  └────────────────────────────────────┘
      │
      ▼
 Форматтер (HTTP / WebSocket / SSE)
      │
      ▼
 LogStore  ──►  Реактивные refs Vue  ──►  Ваши компоненты

Стратегии перехвата:

Транспорт	Стратегия
Fetch	Оборачивает window.fetch глобально; захватывает запрос/ответ включая тело, заголовки, тайминг
XHR	Переопределяет XMLHttpRequest.prototype.open, send, setRequestHeader; использует WeakMap для связи данных с запросом без загрязнения инстансов
WebSocket	Заменяет конструктор window.WebSocket; оборачивает все слушатели событий и метод send для захвата обоих направлений
SSE	Заменяет конструктор window.EventSource; оборачивает слушатели событий для захвата open, message, error и именованных кастомных событий

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