SystemStatus

The SystemStatus component monitors application connectivity by polling the server at configurable intervals. Unlike an always-visible status indicator, SystemStatus only renders when the server is offline — showing a warning icon and text to alert users of connectivity issues. When the application is online, the component renders nothing, keeping the UI uncluttered.

Features

• Automatic Health Checks: Configurable polling to verify server connectivity
• Offline-Only Display: Renders only when the server is unreachable, keeping the UI clean when everything is working
• Visual Alert: Warning icon (i-lucide-triangle-alert) with red text for offline state
• Tooltip Information: Detailed status information on hover
• i18n Integration: Multilingual support for status messages
• Memory Safe: Polling interval is properly cleaned up on component unmount
• Customizable Polling: Adjust check frequency to your needs
• Custom Health Check: Provide your own function to determine online status

Props

Prop	Type	Required	Default	Description
pollInterval	number	No	30000	The interval in milliseconds for checking online status
isOnlineCheckFunction	() => Promise<boolean>	No	checkIsOnline()	Custom function to check online status. By default, uses the built-in checkIsOnline utility

Usage

Basic Implementation

<template>
  <SystemStatus />
</template>

Custom Poll Interval

Check connectivity at a different frequency:

<template>
  <!-- Check every 60 seconds -->
  <SystemStatus :poll-interval="60000" />
</template>

Custom Online Check Function

Provide your own function to determine online status:

<script setup lang="ts">
async function customOnlineCheck() {
  try {
    const response = await fetch('/api/custom-health');
    return response.ok;
  } catch {
    return false;
  }
}
</script>

<template>
  <SystemStatus 
    :is-online-check-function="customOnlineCheck"
  /> 
</template>

Status Behavior

• Online: No indicator is shown — the application is functioning normally
• Offline (Red): Warning icon with text is displayed, along with a tooltip describing the issue

i18n Configuration

The component requires the following translation keys:

{
    "common-ui": {
        "health_status": {
            "offline_title": "System disruption",
            "offline_description": "Some services are unavailable, features may be limited"
        }
    }
}

Health Check Endpoint

The component checks connectivity by sending requests to your application's health endpoint. Ensure your server has a health check endpoint configured.

Example Server Setup (Nuxt)

// server/api/health.get.ts
export default defineEventHandler(() => {
  return {
    status: 'ok',
    timestamp: new Date().toISOString(),
  };
});