railwatch 0.6.0 → 0.7.0

data/app/frontend/components/railwatch/flamegraph.tsx

@@ -0,0 +1,324 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import { DataTable } from "@/components/railwatch/data-table"
+import { Segmented, SegmentedItem } from "@/components/railwatch/segmented"
+import { Input } from "@/components/ui/input"
+import {
+  type FlameNode,
+  type FlameRect,
+  hottestSelf,
+  hottestTotal,
+  layout,
+  parseCollapsed,
+  search,
+} from "@/lib/flamegraph"
+import { count, pct } from "@/lib/format"
+import { cn } from "@/lib/utils"
+
+const ROW = 18
+const HOTTEST = 15
+
+interface View {
+  tree: FlameNode
+  zoom: FlameNode[]
+  hovered: { rect: FlameRect; x: number; y: number } | null
+}
+
+// Frames read "Class#method (path:line)". The gem strips the Rails root
+// from app paths, so an app frame's path starts with app/, lib/ or config/;
+// a gem frame's path starts with the gem's name (activerecord/...), Ruby's
+// own with ruby/ or <internal:, and a C function has no file at all. Only
+// the app's own frames get the warm end of the palette.
+function isAppFrame(name: string): boolean {
+  const open = name.lastIndexOf(" (")
+  const path = open >= 0 ? name.slice(open + 2) : ""
+  return /^(app|lib|config|db|engines)\//.test(path)
+}
+
+function hashOf(value: string): number {
+  let h = 0
+  for (let i = 0; i < value.length; i++) h = (h * 31 + value.charCodeAt(i)) | 0
+  return Math.abs(h)
+}
+
+// Colour is a stable hash of the frame name so the same frame keeps the same
+// shade between renders and between profiles — warm oranges/ambers for app
+// frames, desaturated slate for everything else.
+function frameColor(name: string): string {
+  const h = hashOf(name)
+  return isAppFrame(name)
+    ? `hsl(${[24, 34, 14, 44, 4][h % 5]} 78% ${52 + (h % 3) * 6}%)`
+    : `hsl(${[215, 220, 210][h % 3]} 14% ${58 + (h % 3) * 7}%)`
+}
+
+function truncate(name: string, width: number): string {
+  const chars = Math.floor((width - 8) / 5.6)
+  if (chars < 4) return ""
+  return name.length <= chars ? name : name.slice(0, chars - 1) + "…"
+}
+
+function Tooltip({
+  rect,
+  total,
+  x,
+  y,
+}: {
+  rect: FlameRect
+  total: number
+  x: number
+  y: number
+}) {
+  return (
+    <div
+      className="bg-popover text-popover-foreground pointer-events-none absolute z-10 max-w-[min(22rem,90vw)] rounded-md border p-2 shadow-md"
+      style={{ left: Math.max(0, x - 8), top: y + 14 }}
+    >
+      <div className="font-mono text-[11px] break-all">{rect.node.name}</div>
+      <div className="text-muted-foreground mt-1 flex flex-wrap gap-x-3 font-mono text-[10px] tabular-nums">
+        <span>{count(rect.node.value)} samples</span>
+        <span>{pct(rect.node.value, total)} of total</span>
+        <span>{pct(rect.node.value, rect.parentValue)} of parent</span>
+        {rect.node.self > 0 && <span>{count(rect.node.self)} self</span>}
+      </div>
+    </div>
+  )
+}
+
+// An icicle chart (root on top, callees below) over collapsed stacks. Click
+// a frame to zoom into it; the breadcrumb walks back out.
+export function Flamegraph({
+  collapsed,
+  className,
+}: {
+  collapsed: string
+  className?: string
+}) {
+  const tree = useMemo(() => parseCollapsed(collapsed), [collapsed])
+  const [query, setQuery] = useState("")
+  const [mode, setMode] = useState<"self" | "total">("self")
+  // Zoom path and hover both point at nodes of one particular tree, so they
+  // are stored with it: a new profile makes the whole view stale at once,
+  // without an effect that resets them a render late.
+  const [state, setState] = useState<View>({ tree, zoom: [], hovered: null })
+  const view = state.tree === tree ? state : { tree, zoom: [], hovered: null }
+  const zoom = view.zoom
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(0)
+
+  useEffect(() => {
+    const el = containerRef.current
+    if (!el) return
+    setWidth(el.clientWidth)
+    const observer = new ResizeObserver(([entry]) =>
+      setWidth(entry.contentRect.width),
+    )
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  const root = zoom[zoom.length - 1] ?? tree
+  const rects = useMemo(() => layout(root, width), [root, width])
+  const matches = useMemo(() => search(tree, query), [tree, query])
+  const hottest = useMemo(
+    () =>
+      mode === "self"
+        ? hottestSelf(root, HOTTEST)
+        : hottestTotal(root, HOTTEST),
+    [root, mode],
+  )
+
+  const depth = rects.reduce((max, r) => Math.max(max, r.depth), 0)
+  const searching = matches.size > 0
+
+  if (tree.value === 0) {
+    return (
+      <p className="text-muted-foreground py-6 text-center text-sm">
+        This profile recorded no samples.
+      </p>
+    )
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="flex flex-wrap items-center gap-2">
+        <Input
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder="Search frames"
+          className="h-8 max-w-56 font-mono text-xs"
+          aria-label="Search frames"
+        />
+        {query !== "" && (
+          <span className="text-muted-foreground font-mono text-[11px]">
+            {matches.size} match{matches.size === 1 ? "" : "es"}
+          </span>
+        )}
+        <div className="ml-auto flex flex-wrap items-center gap-1 font-mono text-[11px]">
+          {[tree, ...zoom].map((node, i) => (
+            <span key={node.id} className="flex items-center gap-1">
+              {i > 0 && <span className="text-muted-foreground">/</span>}
+              <button
+                type="button"
+                onClick={() => setState({ ...view, zoom: zoom.slice(0, i) })}
+                disabled={i === zoom.length}
+                className={cn(
+                  "max-w-40 truncate",
+                  i === zoom.length
+                    ? "text-foreground font-semibold"
+                    : "text-muted-foreground hover:underline",
+                )}
+              >
+                {node.name}
+              </button>
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div
+        ref={containerRef}
+        className="bg-muted/20 relative overflow-hidden rounded-lg border"
+        onMouseLeave={() => setState({ ...view, hovered: null })}
+      >
+        <svg
+          width={width}
+          height={(depth + 1) * ROW}
+          role="img"
+          aria-label={`Flamegraph of ${tree.value} samples`}
+        >
+          {rects.map((r) => {
+            const label = truncate(r.node.name, r.width)
+            return (
+              <g
+                key={r.id}
+                onClick={() =>
+                  setState({
+                    ...view,
+                    zoom: [...zoom, ...pathTo(root, r.node)],
+                  })
+                }
+                onMouseMove={(e) => {
+                  const box = containerRef.current?.getBoundingClientRect()
+                  setState({
+                    ...view,
+                    hovered: {
+                      rect: r,
+                      x: e.clientX - (box?.left ?? 0),
+                      y: e.clientY - (box?.top ?? 0),
+                    },
+                  })
+                }}
+                className="cursor-pointer"
+              >
+                <rect
+                  x={r.x}
+                  y={r.depth * ROW}
+                  width={Math.max(0, r.width - 1)}
+                  height={ROW - 1}
+                  rx={2}
+                  fill={frameColor(r.node.name)}
+                  opacity={
+                    searching
+                      ? matches.has(r.id)
+                        ? 1
+                        : 0.18
+                      : view.hovered?.rect.id === r.id
+                        ? 1
+                        : 0.88
+                  }
+                  stroke={matches.has(r.id) ? "currentColor" : "none"}
+                  strokeWidth={1}
+                />
+                {label !== "" && (
+                  <text
+                    x={r.x + 4}
+                    y={r.depth * ROW + ROW / 2}
+                    dominantBaseline="central"
+                    className="pointer-events-none fill-black/85 font-mono text-[10px]"
+                  >
+                    {label}
+                  </text>
+                )}
+              </g>
+            )
+          })}
+        </svg>
+        {view.hovered && (
+          <Tooltip
+            rect={view.hovered.rect}
+            total={tree.value}
+            x={view.hovered.x}
+            y={view.hovered.y}
+          />
+        )}
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h3 className="label-caps">Hottest frames</h3>
+        <Segmented>
+          <SegmentedItem
+            active={mode === "self"}
+            onClick={() => setMode("self")}
+          >
+            Self
+          </SegmentedItem>
+          <SegmentedItem
+            active={mode === "total"}
+            onClick={() => setMode("total")}
+          >
+            Total
+          </SegmentedItem>
+        </Segmented>
+      </div>
+      <DataTable
+        rows={hottest}
+        rowKey={(f) => f.name}
+        empty="No frames in this view."
+        columns={[
+          {
+            key: "name",
+            header: "Frame",
+            className: "max-w-0",
+            cell: (f) => (
+              <span className="block truncate font-mono text-xs" title={f.name}>
+                {f.name}
+              </span>
+            ),
+          },
+          {
+            key: "self",
+            header: "Self",
+            align: "right",
+            cell: (f) => (
+              <span className={mode === "self" ? "font-semibold" : ""}>
+                {count(f.self)}
+              </span>
+            ),
+          },
+          {
+            key: "total",
+            header: "Total",
+            align: "right",
+            cell: (f) => (
+              <span className={mode === "total" ? "font-semibold" : ""}>
+                {count(f.total)}
+              </span>
+            ),
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+// The chain of nodes from the current root down to `target`, so clicking a
+// frame deep in the graph pushes every step onto the breadcrumb.
+function pathTo(from: FlameNode, target: FlameNode): FlameNode[] {
+  if (from === target) return []
+  for (const child of from.children) {
+    const rest = pathTo(child, target)
+    if (rest.length > 0 || child === target) return [child, ...rest]
+  }
+  return []
+}

data/app/frontend/components/railwatch/frames.tsx

@@ -0,0 +1,295 @@
+import { Fragment, useState } from "react"
+
+import { SourceLink } from "@/components/railwatch/source-link"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import type { ExceptionDetail, Frame, TimelineEntry } from "@/types"
+
+// A hashed build asset -- "assets/index-Bq1x9K2v.js", what a browser frame
+// points at in production. It is the app's own code, but not at any path
+// that exists in the repository, so there is nothing to link it to until
+// Railwatch can resolve it through a source map (docs/roadmap.md); until then
+// it is shown exactly as the browser named it.
+const HASHED_ASSET = /-[A-Za-z0-9_-]{8,}\.(?:js|mjs|cjs|css)$/
+
+function FrameRow({
+  frame,
+  deploy,
+  open,
+  onToggle,
+}: {
+  frame: Frame
+  deploy?: string | null
+  open: boolean
+  onToggle: () => void
+}) {
+  const lines = frame.code ? Object.entries(frame.code) : []
+  const linkable = frame.in_app && !HASHED_ASSET.test(frame.file)
+  return (
+    <div
+      className={cn(
+        "border-b last:border-b-0",
+        frame.in_app ? "bg-background" : "bg-muted/40",
+      )}
+    >
+      <div className="hover:bg-muted/60 flex w-full items-center gap-2 px-3 py-1.5 font-mono text-xs">
+        {linkable && (
+          <SourceLink
+            location={`${frame.file}:${frame.line}`}
+            deploy={deploy}
+          />
+        )}
+        <button
+          type="button"
+          onClick={onToggle}
+          className="flex min-w-0 flex-1 items-center gap-2 text-left"
+        >
+          {!linkable && (
+            <span className="text-muted-foreground truncate">
+              {frame.file}:{frame.line}
+            </span>
+          )}
+          <span className="text-muted-foreground ml-auto truncate">
+            in {frame.function}
+          </span>
+          {frame.in_app && (
+            <Badge variant="outline" className="shrink-0 text-[10px]">
+              app
+            </Badge>
+          )}
+        </button>
+      </div>
+      {open && lines.length > 0 && (
+        <pre className="bg-muted/60 overflow-x-auto px-3 py-2 font-mono text-xs leading-5">
+          {lines.map(([n, src]) => (
+            <div
+              key={n}
+              className={cn(
+                "flex gap-3 border-l-2 border-transparent pl-2",
+                Number(n) === frame.line &&
+                  "border-destructive bg-destructive/10 font-semibold",
+              )}
+            >
+              <span className="text-muted-foreground w-10 shrink-0 text-right select-none">
+                {n}
+              </span>
+              <span className="whitespace-pre">{src}</span>
+            </div>
+          ))}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+export function Frames({
+  frames,
+  deploy,
+}: {
+  frames: Frame[]
+  deploy?: string | null
+}) {
+  const appIndexes = frames.flatMap((f, i) => (f.in_app ? [i] : []))
+  const [open, setOpen] = useState<Set<number>>(
+    new Set(appIndexes.length > 0 ? appIndexes : [0]),
+  )
+  const [showAll, setShowAll] = useState(false)
+  const visible = showAll ? frames : frames.filter((f, i) => f.in_app || i < 3)
+
+  function toggle(idx: number) {
+    setOpen((prev) => {
+      const next = new Set(prev)
+      if (next.has(idx)) next.delete(idx)
+      else next.add(idx)
+      return next
+    })
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      {visible.map((f) => {
+        const idx = frames.indexOf(f)
+        return (
+          <FrameRow
+            key={idx}
+            frame={f}
+            deploy={deploy}
+            open={open.has(idx)}
+            onToggle={() => toggle(idx)}
+          />
+        )
+      })}
+      {visible.length < frames.length && (
+        <button
+          type="button"
+          className="text-muted-foreground w-full px-3 py-1.5 text-left text-xs hover:underline"
+          onClick={() => setShowAll(true)}
+        >
+          Show {frames.length - visible.length} framework frames
+        </button>
+      )}
+    </div>
+  )
+}
+
+export function ExceptionCard({
+  exception,
+  deploy,
+}: {
+  exception: ExceptionDetail
+  deploy?: string | null
+}) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="font-mono text-sm font-semibold">
+            {exception.class_name}
+          </span>
+          <Badge variant={exception.handled ? "secondary" : "destructive"}>
+            {exception.handled ? "handled" : "unhandled"}
+          </Badge>
+          {exception.severity && (
+            <Badge variant="outline">{exception.severity}</Badge>
+          )}
+          {exception.source && (
+            <span className="text-muted-foreground font-mono text-xs">
+              {exception.source}
+            </span>
+          )}
+        </div>
+        <p className="mt-1 font-mono text-sm break-words">
+          {exception.message}
+        </p>
+        {exception.cause && (
+          <p className="text-muted-foreground mt-1 font-mono text-xs">
+            caused by {exception.cause.class}: {exception.cause.message}
+          </p>
+        )}
+      </div>
+      <Frames frames={exception.frames} deploy={deploy} />
+      {exception.locals && Object.keys(exception.locals).length > 0 && (
+        <div className="overflow-hidden rounded-lg border">
+          <div className="label-caps border-b px-3 py-1.5">
+            Local variables at the raise site
+          </div>
+          <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 px-3 py-2 font-mono text-xs">
+            {Object.entries(exception.locals).map(([name, value]) => (
+              <Fragment key={name}>
+                <dt className="text-muted-foreground">{name}</dt>
+                <dd className="break-all">{value}</dd>
+              </Fragment>
+            ))}
+          </dl>
+        </div>
+      )}
+      {exception.context && exception.context !== "{}" && (
+        <pre className="bg-muted/60 overflow-x-auto rounded-lg p-3 font-mono text-xs">
+          {exception.context}
+        </pre>
+      )}
+    </div>
+  )
+}
+
+const crumbColors: Record<string, string> = {
+  query: "bg-sky-500",
+  transaction: "bg-sky-300",
+  cache_event: "bg-violet-500",
+  outgoing_request: "bg-orange-500",
+  mail: "bg-pink-500",
+  broadcast: "bg-teal-500",
+  enqueued_job: "bg-amber-500",
+  view_render: "bg-emerald-500",
+  storage_op: "bg-indigo-500",
+  exception: "bg-red-500",
+  log: "bg-neutral-400",
+}
+
+// Sentry-style breadcrumbs: what the execution did in the run-up to the
+// exception, oldest first, each with its offset from the start.
+export function Breadcrumbs({ entries }: { entries: TimelineEntry[] }) {
+  if (entries.length === 0) return null
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <div className="label-caps border-b px-3 py-1.5">
+        Breadcrumbs · {entries.length} events before the exception
+      </div>
+      <ol className="divide-y">
+        {entries.map((e) => (
+          <li
+            key={`${e.type}-${e.id}`}
+            className="grid grid-cols-[3.5rem_5rem_1fr_4rem] items-center gap-2 px-3 py-1 font-mono text-xs"
+          >
+            <span className="text-muted-foreground tabular-nums">
+              +{e.offset.toFixed(1)}ms
+            </span>
+            <span className="text-muted-foreground flex items-center gap-1.5 truncate">
+              <span
+                className={cn(
+                  "inline-block size-1.5 shrink-0 rounded-full",
+                  crumbColors[e.type] ?? "bg-neutral-500",
+                )}
+              />
+              {e.type.replace("_", " ")}
+            </span>
+            <span className="truncate">{e.label}</span>
+            <span className="text-muted-foreground text-right tabular-nums">
+              {e.duration != null ? `${e.duration.toFixed(1)}ms` : ""}
+            </span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}
+
+export interface BrowserCrumb {
+  at: number
+  kind: string
+  text: string
+}
+
+const browserCrumbColors: Record<string, string> = {
+  console: "bg-red-500",
+  click: "bg-violet-500",
+  navigate: "bg-sky-500",
+}
+
+// The browser's half of the same idea: what the user did in the run-up to a
+// JavaScript error -- console errors, clicks, Inertia navigations -- offset
+// from the first of them, since a browser error has no execution whose
+// timeline would mean anything (its execution is the beacon that carried it).
+export function BrowserBreadcrumbs({ crumbs }: { crumbs: BrowserCrumb[] }) {
+  if (crumbs.length === 0) return null
+  const start = crumbs[0].at
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <div className="label-caps border-b px-3 py-1.5">
+        Breadcrumbs · {crumbs.length} events before the error
+      </div>
+      <ol className="divide-y">
+        {crumbs.map((c, i) => (
+          <li
+            key={`${c.at}-${c.kind}-${i}`}
+            className="grid grid-cols-[3.5rem_5rem_1fr] items-center gap-2 px-3 py-1 font-mono text-xs"
+          >
+            <span className="text-muted-foreground tabular-nums">
+              +{((c.at - start) / 1000).toFixed(1)}s
+            </span>
+            <span className="text-muted-foreground flex items-center gap-1.5 truncate">
+              <span
+                className={cn(
+                  "inline-block size-1.5 shrink-0 rounded-full",
+                  browserCrumbColors[c.kind] ?? "bg-neutral-500",
+                )}
+              />
+              {c.kind}
+            </span>
+            <span className="truncate">{c.text}</span>
+          </li>
+        ))}
+      </ol>
+    </div>
+  )
+}