Network Dashboard

Universal network monitoring plugin for Vue 3. Intercepts all HTTP (Fetch / XHR), WebSocket, and Server-Sent Events (SSE) traffic, logs them in a unified format, automatically sanitizes sensitive data, and exposes reactive storage with rich statistics.

Features

• Full Coverage — intercepts Fetch API, XMLHttpRequest (XHR), WebSocket, and Server-Sent Events
• Unified Format — all network events share one consistent log structure regardless of transport type
• Security First — auto-redacts sensitive headers, removes sensitive body fields, masks PII
• Rich Metrics — tracks request/response sizes, duration, data transfer volumes, per-method and per-status breakdowns
• Vue 3 Native — uses Vue ref for reactive storage — no Pinia or Vuex required
• Zero Configuration — works immediately after app.use() with sensible defaults
• Highly Configurable — extensive options for interceptor selection, URL filtering, sanitization, callbacks, and UI behaviour
• Pending Requests — in-flight requests appear as live entries and update in place on completion — just like browser DevTools
• Mock Groups — organise mock rules into named groups — enable/disable a whole group at once, collapse/expand, rename inline, import/export as JSON
• Session Compare — load two HAR files side by side and see an instant diff — added, removed, and changed requests with per-field deltas
• Mock Mode — define URL/method rules to intercept requests and return custom responses without touching the backend
• HAR Export — export session as an HTTP Archive file — open directly in Chrome DevTools, Postman, or Charles Proxy
• Waterfall Timeline — visual bar chart of all requests on a shared time axis
• Diff View — select any two log entries to see a side-by-side diff of headers and body
• Grouping — collapse repeated requests to the same endpoint into a single row with a count badge
• Body Search — filter log entries by content of request or response body
• Regex Search — prefix any URL or body filter with regex: to match by regular expression
• URL Highlight — matched URL fragment is highlighted inline in the log list when an active URL filter is set
• Debounced Filters — text filters (URL, Body, Route) update with a 180 ms debounce; method/status/toggles apply instantly
• Filter Persistence — active filters are saved to sessionStorage and restored automatically on next page load
• Route Context — attach the current Vue Router route to every log entry; filter by route in the UI
• Filtered Export — export modal with format selector (JSON / CSV / HAR), protocol checkboxes, status checkboxes, and dual time-range slider
• HAR Import — load any .har file into the debugger to inspect a recorded session; live traffic is paused while a file is active
• Copy as cURL — one-click copy of any HTTP request as a ready-to-run curl command (with headers and body)
• Replay with Editing — edit URL, method, headers, and body before re-sending any request — JSON body is validated inline
• Mock from Log — one-click mock creation from any captured response — rule is pre-filled with URL, method, status, and body
• Mock Conditions — add fine-grained match conditions to a mock rule: query params, request headers, and body fields (all AND-combined)
• Response Transform — modify real responses on the fly without a full mock — override status, merge/delete JSON body fields, add headers
• Network Throttling — simulate slow connections with built-in presets (Fast 3G / Slow 3G / Offline-ish); delay applied per request via a getter, no interceptor restart needed
• GraphQL Detection — automatically detects GraphQL operations in POST requests; shows operation type, name, and variables in a dedicated section with a colour badge
• N+1 Detection — highlights duplicate requests to the same URL+method within a 5-second window with an orange ×N badge
• Breakpoints — pause any outgoing request before it is sent — inspect and edit URL, method, headers, and body — then release or cancel
• OpenAPI Import — load an OpenAPI 3.x or Swagger 2.x JSON spec to auto-generate a full set of mock rules from all paths
• Virtual Scroll — log list renders at most 100 rows; additional rows load incrementally on scroll via IntersectionObserver
• WebSocket Message Filter — when the WS type filter is active, a toggle hides connection/open/close events and shows only message entries
• Traffic Sparkline — statistics tab shows a live SVG sparkline of request volume over time (5-second buckets, last ~3 min)
• Fullscreen Mode — expand the debugger panel to fill the entire viewport with a single click
• Built-in Debugger UI — draggable, resizable panel with filters, 3-tab detail view, stats, timeline, mock editor, and export
• Nuxt 3 Module — first-class Nuxt integration with auto-registration and useNetworkDashboard() auto-import
• Vue DevTools — optional inspector tab and timeline layer in Vue DevTools (browser extension + vite-plugin-vue-devtools)
• Sentry / OpenTelemetry — ready-made adapters for error tracking and distributed tracing
• TypeScript — full type definitions included

How It Works

The plugin replaces global browser APIs at the JavaScript layer before any application code runs. When a network call is made anywhere in your app (including third-party libraries), the plugin captures the event, formats it into a UnifiedLogEntry, and stores it reactively.

Your App Code
      │
      ▼
 Patched Globals
  ┌────────────────────────────────────┐
  │ window.fetch     (FetchInterceptor)│
  │ XMLHttpRequest   (XHRInterceptor)  │
  │ window.WebSocket (WSInterceptor)   │
  │ window.EventSource (SSEInterceptor)│
  └────────────────────────────────────┘
      │
      ▼
 Formatter (HTTP / WebSocket / SSE)
      │
      ▼
 LogStore  ──►  Vue Reactive Refs  ──►  Your Components

Interception strategies:

Transport	Strategy
Fetch	Wraps window.fetch globally; captures request/response including body, headers, timing
XHR	Overrides XMLHttpRequest.prototype.open, send, setRequestHeader; uses a WeakMap to associate per-request data without polluting instances
WebSocket	Replaces window.WebSocket constructor; wraps all event listeners and the send method to capture both directions
SSE	Replaces window.EventSource constructor; wraps event listeners to capture open, message, error, and named custom events

The original native implementations are preserved internally and called through normally, so interception is completely transparent to the rest of the application.