apps/web/app/routes/repo/observability.tsx · flagon-io/g1t

about="What the project's running software does: its requests, errors and latency, by deployment. Apps on g1t.page report on their own; anything else sends OpenTelemetry."

48

/>

49

50

51

52

{isFailed(overview) ? (

) : nothing ? (

) : (

)}

</div>

</div>

);

}

function Loaded({

overview,

errors,

base,

path,

view,

}: {

overview: TelemetryOverview;

72

errors: Route.ComponentProps["loaderData"]["errors"];

73

base: string;

74

path: string;

75

view: Route.ComponentProps["loaderData"]["view"];

76

}) {

77

const { totals, points } = overview;

78

// The period before is compared only when it had enough requests to say something.

79

const enough = overview.previous.requests >= Math.max(30, totals.requests * 0.05);

80

const previous = enough

81

? overview.previous

82

: { requests: null, errors: null, error_rate: null, latency: { p50: null, p75: null, p95: null, p99: null }, cpu: { p50: null, p75: null, p95: null, p99: null } };

83

const times = points.map((p) => p.time_us);

84

const anyCpu = totals.cpu.p50 !== null;

return (

<>

<StatTile

label={anyCpu ? "CPU time p50" : "Latency p99"}

94

value={duration(anyCpu ? totals.cpu.p50 : totals.latency.p99)}

95

now={anyCpu ? totals.cpu.p50 : totals.latency.p99}

96

before={anyCpu ? previous.cpu.p50 : previous.latency.p99}

lowerIsBetter

/>

</div>

<TimeChart

title="Requests"

kind="bars"

times={times}

stepS={overview.step_s}

107

format={count}

108

series={[

109

// Whatever did not fail as a 4xx or a 5xx (requests with no status, such as a cron, count here too).

110

{ key: "ok", label: "2xx and 3xx", color: SERIES.ok, values: points.map((p) => Math.max(0, p.requests - p.status_4xx - Math.max(p.status_5xx, p.errors))) },

111

{ key: "4xx", label: "4xx", color: SERIES.client, values: points.map((p) => p.status_4xx) },

112

{ key: "5xx", label: "5xx and failures", color: SERIES.server, values: points.map((p) => Math.max(p.status_5xx, p.errors)) },

]}

action={

Requests <ArrowRight size={12} className="inline" />

</Link>

}

/>

<TimeChart

title="Latency"

kind="lines"

times={times}

stepS={overview.step_s}

125

format={(n) => duration(n)}

126

series={[

127

{ key: "p50", label: "p50", color: SERIES.p50, values: points.map((p) => p.latency.p50) },

128

{ key: "p95", label: "p95", color: SERIES.p95, values: points.map((p) => p.latency.p95) },

129

{ key: "p99", label: "p99", color: SERIES.p99, values: points.map((p) => p.latency.p99) },

]}

/>

</div>

By deployment

</h2>

<span className="hidden text-xs text-faint sm:inline">Newest first: a change in the numbers starts with the deployment that brought it.</span>

142

</div>

143

{overview.deployments.length === 0 ? (

144

<p className="px-4 py-6 text-sm text-muted">No deployment on g1t.page served requests in this period.</p>

) : (

<TableHead>Deployment</TableHead>

150

<TableHead className="hidden sm:table-cell">Environment</TableHead>

151

<TableHead className="text-right">Requests</TableHead>

152

<TableHead className="text-right">Error rate</TableHead>

</TableRow>

</TableHeader>

{overview.deployments.map((d, i) => {

158

const rate = d.requests ? d.errors / d.requests : 0;

159

const before = overview.deployments[i + 1];

160

const worse = before && before.requests > 20 && d.requests > 20 && rate > (before.errors / before.requests) * 1.5 + 0.005;

return (

{d.commit_sha ? shortId(d.commit_sha, 7) : shortId(d.deployment_id, 12)}

</Link>

</span>

</TableCell>

<TableCell className="hidden text-muted sm:table-cell">{d.environment ?? "—"}</TableCell>

172

<TableCell className="text-right tabular-nums">{count(d.requests)}</TableCell>

173

<TableCell className={cn("text-right tabular-nums", worse && "text-danger")}>{percent(rate)}</TableCell>

174

<TableCell className="text-right whitespace-nowrap tabular-nums">{duration(d.latency.p95)}</TableCell>

</TableRow>

);

})}

</TableBody>

</Table>

)}

</section>

</Card>

Open errors

</h2>

All <ArrowRight size={12} className="inline" />

193

</Link>

194

</div>

195

{isFailed(errors) ? (

</div>

) : errors.length === 0 ? (

200

<p className="px-4 py-6 text-sm text-muted">No open errors in this period.</p>

) : (

{errors.map((e) => (

<p className="truncate text-sm text-muted">{e.message}</p>

208

</Link>

209

210

{count(e.count)} times · last <TimeAgo at={e.last_us / 1000} />

</p>

</li>

))}

</ul>

)}

</section>

</Card>

</div>

Routes

</h2>

<span className="hidden text-xs text-faint sm:inline">Paths with their ids taken out, busiest first</span>

227

</div>

228

{overview.routes.length === 0 ? (

229

<p className="px-4 py-6 text-sm text-muted">No requests in this period.</p>

) : (

<TableHead>Route</TableHead>

235

<TableHead className="text-right">Requests</TableHead>

236

<TableHead className="text-right">Error rate</TableHead>

</TableRow>

</TableHeader>

{overview.routes.slice(0, 15).map((r) => (

<Link

to={viewHref(`${path}/requests`, view, { route: r.route })}

248

className="flex min-w-0 items-center gap-2 font-mono text-xs hover:text-accent"

249

>

250

{r.method && <span className="shrink-0 text-faint">{r.method}</span>}

251

<span className="truncate">{r.route || "/"}</span>

252

</Link>

253

</TableCell>

254

<TableCell className="text-right tabular-nums">{count(r.requests)}</TableCell>

255

<TableCell className={cn("text-right tabular-nums", r.errors > 0 && "text-danger")}>{percent(r.requests ? r.errors / r.requests : 0)}</TableCell>

256

<TableCell className="hidden text-right whitespace-nowrap tabular-nums sm:table-cell">{duration(r.latency.p50)}</TableCell>

257

<TableCell className="text-right whitespace-nowrap tabular-nums">{duration(r.latency.p95)}</TableCell>

258

<TableCell className="hidden text-right whitespace-nowrap tabular-nums sm:table-cell">{duration(r.latency.p99)}</TableCell>

</TableRow>

))}

</TableBody>

</Table>

)}

</section>

</Card>

{(overview.services.length > 1 || overview.regions.length > 0) && (

268

269

{overview.services.length > 0 && (

Services

</h2>

{overview.services.map((s) => (

277

278

279

<span className="truncate font-mono text-xs">{s.service || "(unnamed)"}</span>

280

<Badge tone="neutral">{s.source === "cloudflare" ? "g1t.page" : "OTLP"}</Badge>

281

</Link>

282

283

{count(s.requests)} · {percent(s.requests ? s.errors / s.requests : 0)} failed

</span>

</li>

))}

</ul>

</section>

</Card>

)}

{overview.regions.length > 0 && (

Where requests were served

297

</h2>

298

299

{overview.regions.slice(0, 8).map((r) => {

300

const share = r.requests / Math.max(1, overview.regions.reduce((n, x) => n + x.requests, 0));

301

return (

302

303

<span className="font-mono">{r.region}</span>

</span>

<span className="text-right text-muted tabular-nums">{percent(share)}</span>

</li>

);

})}

</ul>

</section>

</Card>

)}

</div>

)}

Numbers are counted each minute; the newest minute fills in as its requests finish. <Link to={`${base}/observability/logs`} className="underline hover:text-fg">Logs</Link> and{" "}

319