← knowledge.oriz.in

Status banner on every site

decision statusbannermonitoringoriz-kitcommsux

Status banner on every site

Decision

Every site in the family embeds a thin, dismissible status banner component (1 line, full-width, top of viewport) that consumes Better Stack's public incident feed. The banner is invisible by default (no incident = no DOM, no CLS, no render cost) and renders only when an incident is live, showing severity + a link to status.oriz.in.

User direction 2026-06-20: "+ Status banner on every site" — locked.

Why

Banner contract

State Render Notes
No active incident null (no DOM) Zero CLS, zero render cost
degraded [Degraded] Some features may be slow — details ? Yellow background
partial_outage [Partial outage] Some sites are unreachable — details ? Orange background
major_outage [Major outage] We're working on it — details ? Red background
maintenance [Maintenance] Scheduled work in progress — details ? Blue background

The "details ?" link goes to status.oriz.in (Better Stack primary) with a ?ref=banner-<sitename> UTM tag for attribution. On Better Stack outage, the banner falls back to status-backup.oriz.in (Instatus) automatically.

The banner is dismissible per-incident (sets a cookie keyed on the incident ID; banner re-appears on the next distinct incident).

Implementation

// inside @chirag127/oriz-kit
import { useEffect, useState } from 'react';

const FEED = 'https://status.oriz.in/feed.rss';
const FALLBACK_FEED = 'https://status-backup.oriz.in/feed.rss';

export function StatusBanner({ siteId }: { siteId: string }) {
  const [incident, setIncident] = useState(null);

  useEffect(() => {
    let cancelled = false;
    const fetchFeed = async () => {
      const feed = await tryFetch(FEED).catch(() => tryFetch(FALLBACK_FEED));
      if (!cancelled) setIncident(parseLatestActive(feed));
    };
    fetchFeed();
    const t = setInterval(fetchFeed, 60_000);
    return () => { cancelled = true; clearInterval(t); };
  }, []);

  if (!incident) return null;
  if (isDismissedFor(incident.id)) return null;

  return (
    <div data-oriz-status={incident.severity}>
      [{labelFor(incident.severity)}] {incident.title}
      {' — '}
      <a href={`https://status.oriz.in/?ref=banner-${siteId}`}>details ?</a>
      <button onClick={() => dismiss(incident.id)}>dismiss</button>
    </div>
  );
}

Implications

Cross-refs