railwatch 0.6.1 → 0.7.0

data/app/frontend/pages/queries/show.tsx

@@ -0,0 +1,276 @@
+import { Link, usePage } from "@inertiajs/react"
+import { Database } from "lucide-react"
+import { useMemo } from "react"
+
+import { DurationPanel, VolumePanel } from "@/components/railwatch/chart-panel"
+import { Mono } from "@/components/railwatch/code"
+import { CopyId } from "@/components/railwatch/copy-id"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import EnvLayout from "@/layouts/env-layout"
+import { explainWarnings } from "@/lib/explain"
+import { count, ms, when } from "@/lib/format"
+import { cn } from "@/lib/utils"
+import * as R from "@/routes"
+import type { SeriesPoint, SharedProps, Summary } from "@/types"
+
+interface Sample {
+  id: number
+  sql: string
+  duration: number
+  occurred_at: string
+  execution_id: string | null
+  execution_preview: string | null
+  source: string | null
+  connection: string | null
+  row_count: number | null
+}
+// The newest sample in the group the gem captured a plan for. Only slow
+// queries get one, so it's usually not the newest sample overall.
+interface Explain {
+  plan: string
+  occurred_at: string
+  duration: number
+  execution_id: string | null
+}
+interface Props {
+  group_hash: string
+  sql: string | null
+  summary: Summary
+  series: SeriesPoint[]
+  sources: [string, number][]
+  callers: [string, number][]
+  roles: [string, number][]
+  explain: Explain | null
+  samples: Sample[]
+}
+
+export default function QueryShow(p: Props) {
+  const { environment, window } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const s = p.summary
+  const plan = p.explain?.plan ?? ""
+  const warnings = useMemo(() => explainWarnings(plan), [plan])
+  return (
+    <EnvLayout
+      title="Query"
+      crumbs={[
+        {
+          title: "Queries",
+          href: R.applicationEnvironmentQueriesPath(a, e, { window }),
+        },
+        { title: "Query", href: "#" },
+      ]}
+    >
+      <PageHeader
+        title="Query"
+        actions={p.sql ? <CopyId value={p.sql} label="Copy SQL" /> : undefined}
+      />
+      <pre className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs whitespace-pre-wrap">
+        {p.sql ?? "No samples in this window."}
+      </pre>
+      {p.roles.length > 0 && (
+        <div className="text-muted-foreground font-mono text-[11px]">
+          {p.roles.map(([role, n]) => `${role} ${count(n)}`).join(" · ")}
+        </div>
+      )}
+      <StatStrip>
+        <Stat label="Executions" value={count(s.count)} />
+        <Stat label="Avg" value={ms(s.avg / 1000, 2)} />
+        <Stat
+          label="p95"
+          value={ms(s.p95 / 1000, 2)}
+          hint={`p99 ${ms(s.p99 / 1000, 2)}`}
+        />
+        <Stat label="Max" value={ms(s.max / 1000, 2)} />
+      </StatStrip>
+      <Card>
+        <CardHeader>
+          <CardTitle>Query plan</CardTitle>
+        </CardHeader>
+        <CardContent>
+          {p.explain ? (
+            <>
+              <div className="text-muted-foreground mb-2 font-mono text-[11px]">
+                {when(p.explain.occurred_at)} · {ms(p.explain.duration, 2)}
+                {p.explain.execution_id && (
+                  <>
+                    {" · "}
+                    <Link
+                      className="hover:underline"
+                      href={R.applicationEnvironmentRequestPath(
+                        a,
+                        e,
+                        p.explain.execution_id,
+                      )}
+                    >
+                      {p.explain.execution_id}
+                    </Link>
+                  </>
+                )}
+              </div>
+              <div className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs">
+                {plan.split("\n").map((row, i) => {
+                  const hits = warnings.filter((w) => w.line === i + 1)
+                  return (
+                    <div
+                      key={i}
+                      className={cn(
+                        "py-0.5",
+                        hits.length > 0 && "border-warning border-l-2 pl-2",
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          "whitespace-pre",
+                          hits.length > 0 && "text-warning",
+                        )}
+                      >
+                        {row}
+                      </div>
+                      {hits.map((w) => (
+                        <div
+                          key={w.message}
+                          className="text-warning/80 mt-0.5 text-[11px] whitespace-normal"
+                        >
+                          {w.message}
+                        </div>
+                      ))}
+                    </div>
+                  )
+                })}
+              </div>
+            </>
+          ) : (
+            <p className="text-muted-foreground text-xs">
+              Enable plans for slow queries with{" "}
+              <Mono>RAILWATCH_CAPTURE_QUERY_EXPLAIN=true</Mono> (threshold{" "}
+              <Mono>RAILWATCH_EXPLAIN_THRESHOLD_MS</Mono>, default 100ms)
+            </p>
+          )}
+        </CardContent>
+      </Card>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <VolumePanel
+          legend="outcome"
+          label="Executions"
+          seriesLabel="Executions"
+          data={p.series}
+        />
+        <DurationPanel label="Duration" data={p.series} />
+      </div>
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Called from</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.sources}
+              rowKey={([src]) => src}
+              empty={
+                <EmptyState
+                  icon={Database}
+                  title="No source captured"
+                  description="A backtrace location wasn't available for this query."
+                />
+              }
+              columns={[
+                {
+                  key: "s",
+                  header: "Source",
+                  cell: ([src]) => (
+                    <span className="font-mono text-xs">{src}</span>
+                  ),
+                },
+                {
+                  key: "n",
+                  header: "Count",
+                  align: "right",
+                  cell: ([, n]) => n,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Executions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <DataTable
+              rows={p.callers}
+              rowKey={([c]) => c}
+              columns={[
+                {
+                  key: "c",
+                  header: "Execution",
+                  cell: ([c]) => <span className="font-mono text-xs">{c}</span>,
+                },
+                {
+                  key: "n",
+                  header: "Count",
+                  align: "right",
+                  cell: ([, n]) => n,
+                },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </div>
+      <DataTable
+        rows={p.samples}
+        rowKey={(x) => x.id}
+        columns={[
+          {
+            key: "when",
+            header: "When",
+            cell: (x) => <span className="text-xs">{when(x.occurred_at)}</span>,
+          },
+          {
+            key: "in",
+            header: "In",
+            cell: (x) =>
+              x.execution_id ? (
+                <Link
+                  className="font-mono text-xs hover:underline"
+                  href={R.applicationEnvironmentRequestPath(
+                    a,
+                    e,
+                    x.execution_id,
+                  )}
+                >
+                  {x.execution_preview}
+                </Link>
+              ) : (
+                <span className="text-muted-foreground text-xs">–</span>
+              ),
+          },
+          {
+            key: "rows",
+            hideOnMobile: true,
+            header: "Rows",
+            align: "right",
+            cell: (x) => x.row_count ?? "–",
+          },
+          {
+            key: "conn",
+            hideOnMobile: true,
+            header: "DB",
+            cell: (x) => x.connection,
+          },
+          {
+            key: "d",
+            header: "Duration",
+            align: "right",
+            cell: (x) => ms(x.duration, 2),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/releases/index.tsx

@@ -0,0 +1,190 @@
+import { Link, router, usePage } from "@inertiajs/react"
+import { Package } from "lucide-react"
+
+import { ChartPanel } from "@/components/railwatch/chart-panel"
+import { DataTable } from "@/components/railwatch/data-table"
+import { EmptyState } from "@/components/railwatch/empty-state"
+import { PageHeader } from "@/components/railwatch/page-header"
+import { SessionStatusChart } from "@/components/railwatch/series-chart"
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import EnvLayout from "@/layouts/env-layout"
+import { count, ms, when } from "@/lib/format"
+import { crashFreeTone, rate } from "@/pages/releases/release-health"
+import { releasePath } from "@/pages/releases/release-path"
+import type {
+  ReleaseHealthSummary,
+  SessionStatusPoint,
+  SharedProps,
+} from "@/types"
+
+interface ReleaseRow extends ReleaseHealthSummary {
+  deploy: string
+  ref: string
+  name: string | null
+  deployed_at: string
+  adoption: number
+  new_issues: number
+}
+
+interface Props {
+  releases: ReleaseRow[]
+  series: SessionStatusPoint[]
+  summary: ReleaseHealthSummary & { releases: number }
+}
+
+export default function Releases(p: Props) {
+  const { environment, window: w } = usePage<SharedProps>().props
+  const a = environment!.application_id
+  const e = environment!.id
+  const href = (r: ReleaseRow) => releasePath(a, e, r.deploy, { window: w })
+  const totals = p.series.reduce(
+    (sum, point) => ({
+      ok: sum.ok + point.ok,
+      errored: sum.errored + point.errored,
+      crashed: sum.crashed + point.crashed,
+    }),
+    { ok: 0, errored: 0, crashed: 0 },
+  )
+  return (
+    <EnvLayout title="Releases">
+      <PageHeader
+        title="Releases"
+        description="Sessions per deploy, and how many of them ended without a crash. A release is the deploy stamped on every record the gem ships."
+      />
+      <StatStrip>
+        <Stat
+          label="Crash-free sessions"
+          value={rate(p.summary.crash_free_sessions)}
+          tone={crashFreeTone(p.summary.crash_free_sessions)}
+        />
+        <Stat
+          label="Crash-free users"
+          value={rate(p.summary.crash_free_users)}
+          tone={crashFreeTone(p.summary.crash_free_users)}
+        />
+        <Stat
+          label="Sessions"
+          value={count(p.summary.sessions)}
+          hint={`${count(p.summary.users)} users`}
+        />
+        <Stat label="Active releases" value={count(p.summary.releases)} />
+      </StatStrip>
+      <ChartPanel
+        label="Sessions by status"
+        value={count(p.summary.sessions)}
+        legend={[
+          {
+            key: "ok",
+            label: "ok",
+            value: count(totals.ok),
+            color: "var(--ok)",
+          },
+          {
+            key: "errored",
+            label: "errored",
+            value: count(totals.errored),
+            color: "var(--warning)",
+          },
+          {
+            key: "crashed",
+            label: "crashed",
+            value: count(totals.crashed),
+            color: "var(--danger)",
+          },
+        ]}
+      >
+        <SessionStatusChart data={p.series} />
+      </ChartPanel>
+      <DataTable
+        rows={p.releases}
+        rowKey={(r) => r.deploy}
+        empty={
+          <EmptyState
+            icon={Package}
+            title="No releases in this window"
+            description="A release appears once a deploy is recorded and the app reports sessions for it."
+          />
+        }
+        onRowClick={(r) => router.visit(href(r))}
+        keyboardNav={{
+          onOpen: (r, opts) =>
+            opts?.newTab
+              ? globalThis.window.open(href(r), "_blank")
+              : router.visit(href(r)),
+        }}
+        columns={[
+          {
+            key: "ref",
+            header: "Release",
+            cell: (r) => (
+              <Link
+                className="font-mono text-xs hover:underline"
+                href={href(r)}
+              >
+                {r.ref}
+              </Link>
+            ),
+          },
+          {
+            key: "at",
+            header: "Deployed",
+            cell: (r) => <span className="text-xs">{when(r.deployed_at)}</span>,
+          },
+          {
+            key: "adoption",
+            header: "Adoption",
+            align: "right",
+            cell: (r) => `${r.adoption}%`,
+          },
+          {
+            key: "sessions",
+            header: "Sessions",
+            align: "right",
+            cell: (r) => count(r.sessions),
+          },
+          {
+            key: "cfs",
+            header: "Crash-free sessions",
+            align: "right",
+            cell: (r) => (
+              <span
+                className={
+                  crashFreeTone(r.crash_free_sessions) === "destructive"
+                    ? "text-destructive font-semibold"
+                    : "font-semibold"
+                }
+              >
+                {rate(r.crash_free_sessions)}
+              </span>
+            ),
+          },
+          {
+            key: "cfu",
+            hideOnMobile: true,
+            header: "Crash-free users",
+            align: "right",
+            cell: (r) => rate(r.crash_free_users),
+          },
+          {
+            key: "issues",
+            hideOnMobile: true,
+            header: "New issues",
+            align: "right",
+            cell: (r) => (
+              <span className={r.new_issues ? "text-destructive" : ""}>
+                {count(r.new_issues)}
+              </span>
+            ),
+          },
+          {
+            key: "duration",
+            hideOnMobile: true,
+            header: "Duration",
+            align: "right",
+            cell: (r) => ms(r.avg_duration_ms),
+          },
+        ]}
+      />
+    </EnvLayout>
+  )
+}

data/app/frontend/pages/releases/release-health.tsx

@@ -0,0 +1,68 @@
+import { Stat, StatStrip } from "@/components/railwatch/stat"
+import { count, ms } from "@/lib/format"
+import type { ReleaseHealthSummary } from "@/types"
+
+// Sentry's own bands: anything under 98% crash-free is a release you roll
+// back, 98–99.5% is one you watch.
+export function crashFreeTone(rate: number | null) {
+  if (rate === null) return "default"
+  if (rate >= 99.5) return "success"
+  return rate >= 98 ? "warning" : "destructive"
+}
+
+// A rate is null, not zero, when there were no sessions to divide by.
+export function rate(value: number | null) {
+  return value === null ? "–" : `${value.toFixed(2)}%`
+}
+
+function delta(current: number | null, previous: number | null | undefined) {
+  if (current === null || previous === null || previous === undefined)
+    return undefined
+  return { current, previous, goodDirection: "up" as const }
+}
+
+// The four release-health numbers, shared by the releases index, a release,
+// and a deploy. `previous` turns the crash-free stats into deltas.
+export function ReleaseHealthStrip({
+  health,
+  previous,
+  deltaCaption,
+}: {
+  health: ReleaseHealthSummary
+  previous?: ReleaseHealthSummary | null
+  deltaCaption?: string
+}) {
+  return (
+    <StatStrip>
+      <Stat
+        label="Crash-free sessions"
+        value={rate(health.crash_free_sessions)}
+        tone={crashFreeTone(health.crash_free_sessions)}
+        delta={delta(health.crash_free_sessions, previous?.crash_free_sessions)}
+        deltaCaption={deltaCaption}
+        hint={
+          health.errored === null
+            ? undefined
+            : `${health.errored.toFixed(2)}% errored`
+        }
+      />
+      <Stat
+        label="Crash-free users"
+        value={rate(health.crash_free_users)}
+        tone={crashFreeTone(health.crash_free_users)}
+        delta={delta(health.crash_free_users, previous?.crash_free_users)}
+        deltaCaption={deltaCaption}
+      />
+      <Stat
+        label="Sessions"
+        value={count(health.sessions)}
+        hint={`${count(health.users)} users`}
+      />
+      <Stat
+        label="Session duration"
+        value={ms(health.avg_duration_ms)}
+        hint="average"
+      />
+    </StatStrip>
+  )
+}

data/app/frontend/pages/releases/release-path.ts

@@ -0,0 +1,25 @@
+import * as R from "@/routes"
+
+// A release is identified by its deploy string, and Rails reads a dot in a
+// path segment as a format separator, so /releases/v1.2.3 would arrive as id
+// "v1" with format "2.3". js-routes escapes everything else in a segment but
+// leaves dots alone, so percent-encode them here; the query string (which
+// never holds the deploy) is left as it was generated. String() because
+// eslint does not type-check the generated app/frontend/routes module.
+export function releasePath(
+  applicationId: number,
+  environmentId: number,
+  deploy: string,
+  options?: { window?: string },
+) {
+  const url = String(
+    R.applicationEnvironmentReleasePath(
+      applicationId,
+      environmentId,
+      deploy,
+      options,
+    ),
+  )
+  const [path, query] = url.split("?")
+  return `${path.replace(/\./g, "%2E")}${query ? `?${query}` : ""}`
+}