Nodeable logoNodeable
~6 minute read

Live Observability Overlay

Overlay live service health and traffic flow on the canvas, configure providers, and inspect node-level runtime metrics.

Live Observability Overlay

Live Observability Overlay brings runtime telemetry into the canvas so service health and traffic are visible where architecture decisions happen.

What you get

  • Live Mode toggle in branch header (Unified + Planning Graph)
  • Node health status from error-rate thresholds
  • Animated traffic-flow edges scaled by throughput
  • Live Health section in the Property Panel for selected nodes

Turn on Live Mode

  1. Open a branch in Unified view.
  2. Click Live Mode Off in the header.
  3. Once enabled, Nodeable opens a realtime websocket stream at /ws/observability.

If no provider is configured for the workspace, the canvas stays unchanged and no live metrics are shown.

Configure a provider

Use workspace observability settings API endpoints:

  • GET /api/workspaces/:workspaceId/observability/providers
  • PUT /api/workspaces/:workspaceId/observability/providers/:provider

Supported providers:

  • PROMETHEUS
  • DATADOG
  • CLOUDWATCH

Each provider can define:

  • API key
  • Optional endpoint override
  • Optional default service namespace
  • Enabled/disabled state

Health thresholds

Node status is derived from error rate:

  • critical when errorRate > 5%
  • degraded when errorRate > 2%
  • healthy otherwise

In Live Mode:

  • critical nodes pulse and get stronger warning emphasis
  • degraded nodes are highlighted
  • healthy nodes remain normal

Property panel: Live Health

When a node is selected and Live Mode is on, the Property Panel shows:

  • status
  • error rate
  • P95 latency
  • throughput
  • updated time

Playback timeline endpoint

For incident playback and historical scrubbing, use:

  • GET /api/branches/:branchId/observability/timeline

Query options:

  • fromMs
  • toMs
  • intervalSeconds

The response includes a sequence of point-in-time node metric snapshots for timeline visualization.

Realtime transport

Live Mode uses a dedicated API websocket path that is separate from Y.js collaboration sockets:

  • Path: /ws/observability
  • Query params: branchId, optional windowSeconds, and auth token
  • Event types:
    • observability.snapshot
    • observability.error

This path-based split allows future non-document websocket features to be added without coupling to Y.js document channels.