Title

Admin Diagnostics (dev-only): /__qa/diag + health + telemetry

Goals

Add a Diagnostics page (dev-only) showing:

Server health + config presence (OpenSRS, CORS origins, NODE_ENV)

Recent 404 events (from our spa-404 monitor)

Recent redirects (legacy pricing, etc.)

Add minimal server endpoints:

/api/health → booleans & meta

/api/telemetry (POST) → accept events

/api/telemetry/recent (GET) → last N events

A) Server: health + telemetry ring buffer

File: server/index.ts (or your main Express file)

--- a/server/index.ts
+++ b/server/index.ts
@@ -1,6 +1,8 @@
 import express from "express";
+import os from "os";

 const app = express();
 app.use(express.json());

+// --- Telemetry (in-memory ring buffer) ---
+type Telemetry = { t: string; path?: string; from?: string; ts: number; meta?: any };
+const TELEMETRY: Telemetry[] = [];
+const pushEvent = (e: Telemetry) => { TELEMETRY.push(e); if (TELEMETRY.length > 200) TELEMETRY.shift(); };

 // ... your existing CORS + routes

+// --- Health endpoint ---
+app.get("/api/health", (req, res) => {
+  const corsOrigins = (process.env.CORS_ORIGINS || "").split(",").map(s => s.trim()).filter(Boolean);
+  const opensrsConfigured = !!process.env.OPENSRS_USER && !!process.env.OPENSRS_KEY;
+  res.json({
+    ok: true,
+    env: process.env.NODE_ENV || "development",
+    hostname: os.hostname(),
+    uptimeSec: Math.floor(process.uptime()),
+    corsOrigins,
+    opensrsConfigured,
+    opensrsMode: process.env.OPENSRS_MODE || null,
+    domainUrl: process.env.DOMAIN_URL || process.env.FRONTEND_URL || null,
+    time: new Date().toISOString(),
+  });
+});
+
+// --- Telemetry ingest (from client) ---
+app.post("/api/telemetry", (req, res) => {
+  const body = req.body || {};
+  // expected: { t: "spa-404"|"redirect", path, from?, meta? }
+  pushEvent({ t: String(body.t || "unknown"), path: body.path, from: body.from, meta: body.meta, ts: Date.now() });
+  res.json({ ok: true });
+});
+
+// --- Recent telemetry ---
+app.get("/api/telemetry/recent", (req, res) => {
+  res.json({ items: TELEMETRY.slice(-200).reverse() });
+});


If you already added telemetry earlier, just unify on these endpoints.

B) Client: diagnostics page (dev-only route)

File: client/src/pages/dev/DiagnosticsPage.tsx

import React from "react";

type Health = {
  ok: boolean; env: string; hostname: string; uptimeSec: number;
  corsOrigins: string[]; opensrsConfigured: boolean; opensrsMode?: string|null;
  domainUrl?: string|null; time: string;
};
type Telemetry = { t: string; path?: string; from?: string; ts: number; meta?: any };

export default function DiagnosticsPage() {
  const [health, setHealth] = React.useState<Health | null>(null);
  const [events, setEvents] = React.useState<Telemetry[]>([]);
  const [loading, setLoading] = React.useState(false);

  const load = async () => {
    setLoading(true);
    try {
      const h = await fetch("/api/health").then(r => r.json());
      const e = await fetch("/api/telemetry/recent").then(r => r.json());
      setHealth(h);
      setEvents(e?.items || []);
    } finally {
      setLoading(false);
    }
  };

  React.useEffect(() => { load(); }, []);

  const broken = events.filter(e => e.t === "spa-404");
  const redirects = events.filter(e => e.t === "redirect");

  return (
    <div className="mx-auto max-w-5xl p-6">
      <div className="mb-4">
        <h1 className="text-xl font-semibold">Diagnostics (Dev Only)</h1>
        <p className="text-sm text-gray-600">Runtime health & recent telemetry.</p>
      </div>

      <div className="grid md:grid-cols-2 gap-4">
        <div className="rounded-xl border p-4">
          <h2 className="font-semibold mb-2">Server Health</h2>
          {!health ? <div>Loading…</div> : (
            <ul className="text-sm space-y-1">
              <li><b>Status:</b> {health.ok ? "OK" : "Down"}</li>
              <li><b>Env:</b> {health.env}</li>
              <li><b>Host:</b> {health.hostname}</li>
              <li><b>Uptime:</b> {health.uptimeSec}s</li>
              <li><b>OpenSRS:</b> {health.opensrsConfigured ? `configured (${health.opensrsMode || "?"})` : "missing"}</li>
              <li><b>CORS Origins:</b> {health.corsOrigins?.length ? health.corsOrigins.join(", ") : "none"}</li>
              <li><b>Domain URL:</b> {health.domainUrl || "not set"}</li>
              <li><b>Time:</b> {new Date(health.time).toLocaleString()}</li>
            </ul>
          )}
        </div>

        <div className="rounded-xl border p-4">
          <div className="flex items-center justify-between">
            <h2 className="font-semibold">Recent 404s</h2>
            <span className="text-xs text-gray-500">{broken.length} events</span>
          </div>
          <div className="mt-2 max-h-64 overflow-auto text-sm">
            {!broken.length && <div className="text-gray-500">None</div>}
            {broken.map((e, i) => (
              <div key={i} className="py-1 border-b last:border-0">
                <div>❌ <b>{e.path}</b></div>
                <div className="text-xs text-gray-500">{new Date(e.ts).toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="rounded-xl border p-4 md:col-span-2">
          <div className="flex items-center justify-between">
            <h2 className="font-semibold">Recent Redirects</h2>
            <button className="btn btn-outline btn-sm" onClick={load} disabled={loading}>{loading ? "Refreshing..." : "Refresh"}</button>
          </div>
          <div className="mt-2 max-h-64 overflow-auto text-sm">
            {!redirects.length && <div className="text-gray-500">None</div>}
            {redirects.map((e, i) => (
              <div key={i} className="py-1 border-b last:border-0">
                <div>↪ <b>{e.from}</b> → <b>{e.path}</b></div>
                <div className="text-xs text-gray-500">{new Date(e.ts).toLocaleString()}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-4">
        <button className="btn btn-primary" onClick={load} disabled={loading}>
          {loading ? "Refreshing…" : "Reload Data"}
        </button>
      </div>
    </div>
  );
}


Route (dev-only): client/src/App.tsx

+import DiagnosticsPage from "@/pages/dev/DiagnosticsPage";

 <Switch>
   {/* …existing routes… */}
-  {/* 404 catch-all */}
+  {/* Dev-only diagnostics */}
+  {process.env.NODE_ENV !== "production" && (
+    <Route path="/__qa/diag" component={DiagnosticsPage} />
+  )}
+  {/* 404 catch-all */}
   <Route><NotFoundPage /></Route>
 </Switch>

C) Wire telemetry sources (client)

You already send spa-404 from NotFoundPage + listener. Add one tiny helper for redirects, then call it where you do legacy pricing redirects:

File: client/src/utils/telemetry.ts

export const tlog = (event: { t: string; path?: string; from?: string; meta?: any }) =>
  fetch("/api/telemetry", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ ...event, ts: Date.now() }),
  }).catch(() => {});


Use it when redirecting legacy routes (example in App.tsx or Redirect component):

-import Redirect from "@/components/Redirect";
+import Redirect from "@/components/Redirect";
+import { tlog } from "@/utils/telemetry";

 // inside the legacy route component
 <Route path="/pricing/business-assets">
-  <Redirect to="/pricing" />
+  {tlog({ t: "redirect", from: "/pricing/business-assets", path: "/pricing" })}
+  <Redirect to="/pricing" />
 </Route>

D) Lock down in production

Keep /__qa/diag behind NODE_ENV !== 'production'.

Add to robots.txt: Disallow: /__qa/

If you serve robots via Express:

app.get("/robots.txt", (req, res) => {
  res.type("text/plain").send(`User-agent: *\nDisallow: /__qa/\n`);
});

Acceptance

Visiting /__qa/diag (dev only) shows:

Health (env, opensrsConfigured, corsOrigins, uptime)

Recent 404s (from NotFoundPage telemetry)

Recent redirects (from legacy route redirects)

/api/health returns JSON with config presence

/api/telemetry accepts events; /api/telemetry/recent lists the last 200

No exposure in production; not listed in nav