aov-network-monitor

Vue 3 network monitoring plugin with offline detection, connection banner, and auto-recovery.

Features

• Offline detection — Monitors fetch/axios requests and detects network failures with configurable thresholds
• Connection banner — Displays a dismissible banner when the service is unreachable
• Auto health-check — Automatically polls a health endpoint and recovers when the network returns
• UI adapter pattern — Pluggable UI layer; ships with an Element Plus adapter, or bring your own
• Vue plugin — provide/inject integration with a global <ConnectionBanner> component

Installation

npm install aov-network-monitor

Peer dependencies (optional): vue >= 3.2, axios >= 1.0, element-plus >= 2.0

Quick Start

1. Create the monitor with Element Plus UI

import { NetworkMonitor, createElementPlusAdapter } from 'aov-network-monitor'

const monitor = new NetworkMonitor({
  uiAdapter: createElementPlusAdapter(),
  healthCheckUrl: '/api/v1/health',    // default: /api/v1/dashboard/stats
  healthCheckInterval: 5000,           // default: 5000ms
  failureThreshold: 2,                 // default: 2 consecutive failures
})

2. Register as a Vue plugin

import { createApp } from 'vue'
import { createNetworkMonitorPlugin } from 'aov-network-monitor/vue'
import App from './App.vue'

const app = createApp(App)
app.use(createNetworkMonitorPlugin(monitor))
app.mount('#app')

3. Patch your HTTP client

Axios:

import { attachAxiosMonitor } from 'aov-network-monitor/axios'
import axios from 'axios'

attachAxiosMonitor(axios, { monitor })

Fetch:

import { patchFetch } from 'aov-network-monitor/fetch'

const unpatch = patchFetch({ monitor })
// call unpatch() to restore original window.fetch

4. Use the banner component

<template>
  <ConnectionBanner />
</template>

5. Custom UI adapter

If you don't use Element Plus, implement your own:

import { NetworkMonitor } from 'aov-network-monitor'

const monitor = new NetworkMonitor({
  uiAdapter: {
    showWarning(message: string) {
      // show toast/notification, return { close() }
      return { close: () => {} }
    },
    showRecovery(title: string, message: string) {
      // show success notification
    },
  },
})

API Reference

NetworkMonitor

| Property / Method | Description | |---|---| | state | Reactive { isOffline, consecutiveFailures, bannerMessage } | | reportError() | Call on request failure | | reportSuccess() | Call on request success | | dismiss() | Manually dismiss offline state | | updateOptions(partial) | Hot-update configuration |

createElementPlusAdapter()

Returns a UIAdapter using ElMessage (warning) and ElNotification (recovery).

attachAxiosMonitor(instance, options)

Registers interceptors on an Axios instance.

patchFetch(options)

Patches window.fetch. Returns an unpatch() function to restore the original.

License

MIT