Honeycomb
npmGitHub

ApiTracker

Displays current API connection status with an expandable tooltip showing all endpoint health details.

Health Monitoring

ApiTracker automatically refreshes endpoint health when the tooltip is opened. You can also trigger a manual refresh from inside the tooltip.

Features

  • Compact pill badge showing connection status (green/yellow/red)
  • Click to expand tooltip with all endpoints and health status
  • Auto-refresh on open + manual refresh button
  • Health badges (Healthy/Unhealthy) and last check timestamps
  • Click outside to dismiss tooltip

Usage

<template>
  <div>
    <ApiTracker />
  </div>
</template>

<script setup lang="ts">
import { ApiTracker } from "@hiveio/honeycomb-vue";
</script>

Props

PropTypeDefaultDescription
className / classstring-Additional CSS classes for the container
showUrlbooleanfalseShow current endpoint hostname in the pill badge
side"top" | "bottom""bottom"Popover opens above or below the pill

Examples

Show endpoint URL in pill

<ApiTracker :show-url="true" side="bottom" />
ThemingHealthChecker