Network Dashboard

npm install vue-network-dashboard@latest

01 — Purpose

When you'd reach for this

Opening the Network tab, finding the right request among a hundred similar ones, copying the body into a separate tool by hand — and doing it all over again after every code change: vue-network-dashboard turns that routine into one built-in screen.

A request works in Postman but not in the app

The difference might be in headers the browser adds on its own, the order requests fire in, or state built up over the session. It's easier to test directly against the app's real traffic than to rebuild the request by hand in a separate tool.

The response you need doesn't exist yet

The backend isn't built yet, or it returns something completely different from what a specific scenario needs to test — the response can be swapped on the fly instead of waiting for the server to catch up.

An access token shouldn't end up in a log

Copying request history for a teammate or attaching it to a bug report shouldn't mean leaking someone's password or auth token along with it. Fields like these can be hidden automatically, instead of scrubbed by hand before every share.

A bug only shows up on a slow connection

A race condition, requests firing in the wrong order, or a forgotten loading spinner only become visible when the network is slow and unstable — conditions like that can be simulated right on a fast development machine, no trip to a bad-signal location required.

02 — Features

At a glance

Interception of all network request types

A single plugin intercepts Fetch, XMLHttpRequest, WebSocket, and Server-Sent Events (SSE), normalizing them into a unified log format. All events are stored reactively in a Vue store with full details on requests, responses, headers, bodies, timing, and errors.

Security and data sanitisation

Automatic redaction of sensitive headers (Authorization, Cookie, X-API-Key), removal of confidential fields from bodies (password, token, secret), and partial masking of PII (email, phone, address). Sanitisation settings are extendable, and logs are always stored securely.

Built‑in UI toolkit with virtual scroll

A ready‑to‑use debug dashboard with filtering by type, URL, method, status, duration, body, and route. Live statistics, a timeline, grouping, body search with regex, inline highlighting, copy as cURL, HAR/JSON/CSV export, and a fullscreen mode.

Mocks, response transforms, and breakpoints

Create mock rules with conditions (URL, method, query, headers, body) and organise them into groups. Transform real responses on the fly (status override, field merge/delete). Set breakpoints to pause, edit, and release requests before they are sent.

Deep integration and advanced analytics

Automatic GraphQL detection (type, name, variables), N+1 request detection, HAR/OpenAPI import, session comparison, diff view, and network throttling. Ready‑to‑use adapters for Sentry and OpenTelemetry, Vue DevTools integration, and a Nuxt module.

Live requests, replay, and route context

Watch requests still in flight update in real time. Replay any request from history with one click, optionally editing its body or headers first. Every logged request is automatically tied to the Vue Router route it was fired from.

03 — Quick example

See how it works

Every request is already logged — you just query it

fetch, XHR, WebSocket, and SSE are intercepted automatically, no manual instrumentation — getLogsByStatus and subscribe give you a ready filter and a live feed of new entries.

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.

Tokens and passwords never end up in the log

Authorization, Cookie, password, and a dozen similar fields are redacted automatically before anything is written — your own field list only extends the built-in protection, never replaces it.

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.

Fake an API response without touching the backend

addMock intercepts a request by URL pattern and returns your own response — with artificial latency if you want it. Mocked entries in the log get a "mock" badge, and it works for both fetch and 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.

Get started →