Quickstart: Gate features on live API status

Cache status, gate features

let apiHealthy = true;
setInterval(async () => {
  try {
    const { status } = await (await fetch(`${BASE}/status`)).json();
    apiHealthy = status === 'operational';
  } catch { apiHealthy = false; }
}, 60_000);

function renderQuoteWidget() {
  return apiHealthy ? liveQuoteWidget() : cachedProductLinks();
}

Fail soft, not loud

When the API is impaired, show cached products and a link to business loans instead of a broken widget. The reader may never notice.

Choose what to gate

Not every feature needs gating. Static reference data you have already cached keeps working through an outage, so leave it alone. Reserve the gate for anything that makes a live call at the moment the user acts — a real-time quote or an enquiry submission — because those are what actually break when a component is impaired.

A good pattern is three states rather than two: fully operational (show everything), degraded (show cached data and hide live widgets), and unknown (the status call itself failed — treat as degraded and fail soft). Never let a failure to read status take your own page down with it.