| 1 | import { CircleDot, ExternalLink } from "lucide-react"; |
| 2 | import { Form, Link, redirect } from "react-router"; |
| 3 | |
| 4 | import type { ErrorGroup } from "@g1t/contracts"; |
| 5 | |
| 6 | import type { Route } from "./+types/observability-errors"; |
| 7 | import { FilterBar, ObservabilityHeader, useLoadingView } from "../../components/observability"; |
| 8 | import { EmptyState, ErrorText, SubmitButton, TimeAgo } from "../../components/ui"; |
| 9 | import { Badge } from "../../components/ui/badge"; |
| 10 | import { Card } from "../../components/ui/card"; |
| 11 | import { refusal } from "../../lib/access.server"; |
| 12 | import { cn } from "../../lib/cn"; |
| 13 | import { page } from "../../lib/meta"; |
| 14 | import { count, errorIssue, viewHref } from "../../lib/observability"; |
| 15 | import { observed, soft } from "../../lib/observability.server"; |
| 16 | import { work } from "../../lib/services.server"; |
| 17 | import { assertSameOrigin, requireUser } from "../../lib/session.server"; |
| 18 | |
| 19 | const STATES: ErrorGroup["state"][] = ["open", "resolved", "ignored"]; |
| 20 | |
| 21 | export function meta({ params, ...args }: Route.MetaArgs) { |
| 22 | return page(args, { title: `Errors · ${params.owner}/${params.repo} · g1t` }); |
| 23 | } |
| 24 | |
| 25 | export async function loader({ params, context, request }: Route.LoaderArgs) { |
| 26 | const { projectId, service, view, filter, access } = await observed(context, params, request); |
| 27 | const stateParam = new URL(request.url).searchParams.get("state"); |
| 28 | const state = STATES.find((s) => s === stateParam) ?? "open"; |
| 29 | const [groups, facets] = await Promise.all([ |
| 30 | soft(service.errors({ project_id: projectId, ...filter, deployment_id: null, state }), "errors"), |
| 31 | soft(service.facets({ project_id: projectId }), "facets"), |
| 32 | ]); |
| 33 | return { view, groups, facets, state, can: { triage: access.can.triage, issue: access.can.participate } }; |
| 34 | } |
| 35 | |
| 36 | export async function action({ request, params, context }: Route.ActionArgs) { |
| 37 | assertSameOrigin(request); |
| 38 | const user = requireUser(context, request); |
| 39 | const { projectId, service, repo } = await observed(context, params, request); |
| 40 | const form = await request.formData(); |
| 41 | const intent = String(form.get("intent") ?? ""); |
| 42 | const fingerprint = String(form.get("fingerprint") ?? ""); |
| 43 | if (intent === "resolved" || intent === "ignored" || intent === "open") { |
| 44 | const refused = await refusal(context, params, "triage"); |
| 45 | if (refused) return { error: refused, fingerprint }; |
| 46 | await service.setError({ project_id: projectId, fingerprint, state: intent }); |
| 47 | return { notice: intent === "open" ? "Open again." : intent === "resolved" ? "Resolved. It opens again if it happens again." : "Ignored." }; |
| 48 | } |
| 49 | if (intent === "issue") { |
| 50 | const refused = await refusal(context, params, "participate"); |
| 51 | if (refused) return { error: refused, fingerprint }; |
| 52 | const group = (await service.errors({ project_id: projectId })).find((g) => g.fingerprint === fingerprint); |
| 53 | if (!group) return { error: "That error is no longer kept.", fingerprint }; |
| 54 | const url = new URL(request.url); |
| 55 | const { title, body } = errorIssue(group, `${url.origin}/${params.owner}/${params.repo}/observability`); |
| 56 | const path = { namespace: repo.namespace, name: repo.name }; |
| 57 | const opened = await work.openIssue(user, path, { title, body, labels: ["bug"] }); |
| 58 | if (!opened.ok) return { error: opened.error.message, fingerprint }; |
| 59 | await service.setError({ project_id: projectId, fingerprint, issue_number: opened.value.number }); |
| 60 | throw redirect(`/${path.namespace}/${path.name}/issues/${opened.value.number}`); |
| 61 | } |
| 62 | return { error: "Unknown request.", fingerprint }; |
| 63 | } |
| 64 | |
| 65 | export default function Errors({ loaderData, actionData, params }: Route.ComponentProps) { |
| 66 | const { view, groups, facets, state, can } = loaderData; |
| 67 | const base = `/${params.owner}/${params.repo}`; |
| 68 | const path = `${base}/observability/errors`; |
| 69 | const loading = useLoadingView(); |
| 70 | const failedOn = actionData && "fingerprint" in actionData ? actionData.fingerprint : null; |
| 71 | |
| 72 | return ( |
| 73 | <div className="mx-auto max-w-6xl"> |
| 74 | <ObservabilityHeader |
| 75 | title="Errors" |
| 76 | about="Exceptions, grouped: the same error thrown a thousand times is one row. Each can become an issue, carrying the stack and the request it came from." |
| 77 | /> |
| 78 | <FilterBar path={path} view={view} environments={facets?.environments ?? []} services={facets?.services ?? []}> |
| 79 | <nav className="flex rounded-md border border-line p-0.5 text-sm" aria-label="State"> |
| 80 | {STATES.map((s) => ( |
| 81 | <Link |
| 82 | key={s} |
| 83 | to={viewHref(path, view, { state: s === "open" ? null : s })} |
| 84 | preventScrollReset |
| 85 | aria-current={s === state ? "true" : undefined} |
| 86 | className={cn("rounded px-2 py-0.5 text-xs capitalize", s === state ? "bg-raised text-fg" : "text-muted hover:text-fg")} |
| 87 | > |
| 88 | {s} |
| 89 | </Link> |
| 90 | ))} |
| 91 | </nav> |
| 92 | </FilterBar> |
| 93 | <div className="mt-3 min-h-5"> |
| 94 | {actionData && "notice" in actionData && <p className="text-sm text-success">{actionData.notice}</p>} |
| 95 | </div> |
| 96 | |
| 97 | <div className={cn("mt-2 transition-opacity", loading && "opacity-60")}> |
| 98 | {!groups ? ( |
| 99 | <Card className="p-6 text-sm text-muted">Errors could not be loaded just now. Reload the page to try again.</Card> |
| 100 | ) : groups.length === 0 ? ( |
| 101 | <EmptyState title={state === "open" ? "No open errors in this period" : `No ${state} errors in this period`}> |
| 102 | Exceptions thrown by apps on g1t.page show here on their own; others arrive as OpenTelemetry exception events and log records. |
| 103 | </EmptyState> |
| 104 | ) : ( |
| 105 | <ul className="space-y-3"> |
| 106 | {groups.map((g) => ( |
| 107 | <li key={g.fingerprint} id={g.fingerprint}> |
| 108 | <Card className="min-w-0 p-4"> |
| 109 | <div className="flex flex-wrap items-start justify-between gap-3"> |
| 110 | <div className="min-w-0 flex-1"> |
| 111 | <p className="flex flex-wrap items-center gap-2"> |
| 112 | <span className="font-mono text-sm text-danger">{g.name}</span> |
| 113 | <Badge tone="neutral" className="font-mono"> |
| 114 | {g.service || "app"} |
| 115 | </Badge> |
| 116 | {g.environment && <Badge tone="neutral">{g.environment}</Badge>} |
| 117 | {g.issue_number && ( |
| 118 | <Link to={`${base}/issues/${g.issue_number}`} className="inline-flex items-center gap-1 text-xs text-accent hover:underline"> |
| 119 | <CircleDot size={12} />#{g.issue_number} |
| 120 | </Link> |
| 121 | )} |
| 122 | </p> |
| 123 | <p className="mt-1 text-sm break-words">{g.message}</p> |
| 124 | <p className="mt-1.5 text-xs text-faint tabular-nums"> |
| 125 | <span className="text-fg">{count(g.count)}</span> time{g.count === 1 ? "" : "s"} · first <TimeAgo at={g.first_us / 1000} /> · last{" "} |
| 126 | <TimeAgo at={g.last_us / 1000} /> |
| 127 | {g.first_deployment_id && ( |
| 128 | <> |
| 129 | {" "} |
| 130 | · since{" "} |
| 131 | <Link to={`${base}/deployments/${g.first_deployment_id}`} className="font-mono hover:text-fg"> |
| 132 | {g.first_deployment_id.slice(0, 12)} |
| 133 | </Link> |
| 134 | </> |
| 135 | )} |
| 136 | </p> |
| 137 | </div> |
| 138 | <div className="flex shrink-0 flex-wrap gap-2"> |
| 139 | {g.last_request_id && ( |
| 140 | <Link to={`${base}/observability/requests/${g.last_request_id}`} className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg"> |
| 141 | Latest request <ExternalLink size={11} /> |
| 142 | </Link> |
| 143 | )} |
| 144 | {g.last_trace_id && ( |
| 145 | <Link to={`${base}/observability/traces/${g.last_trace_id}`} className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg"> |
| 146 | Trace <ExternalLink size={11} /> |
| 147 | </Link> |
| 148 | )} |
| 149 | </div> |
| 150 | </div> |
| 151 | {g.stack && ( |
| 152 | <details className="mt-3"> |
| 153 | <summary className="cursor-pointer text-xs text-muted hover:text-fg">Stack</summary> |
| 154 | <pre className="mt-2 max-h-72 overflow-auto rounded-md border border-line bg-bg p-3 font-mono text-xs whitespace-pre">{g.stack}</pre> |
| 155 | </details> |
| 156 | )} |
| 157 | {(can.triage || (can.issue && !g.issue_number)) && ( |
| 158 | <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-line pt-3"> |
| 159 | {can.issue && !g.issue_number && ( |
| 160 | <Form method="post" className="flex flex-wrap items-center gap-2"> |
| 161 | <input type="hidden" name="fingerprint" value={g.fingerprint} /> |
| 162 | <SubmitButton name="intent" value="issue" size="sm" variant="outline"> |
| 163 | Make an issue |
| 164 | </SubmitButton> |
| 165 | </Form> |
| 166 | )} |
| 167 | {can.triage && ( |
| 168 | <Form method="post" className="ml-auto flex gap-2"> |
| 169 | <input type="hidden" name="fingerprint" value={g.fingerprint} /> |
| 170 | {g.state !== "resolved" && ( |
| 171 | <SubmitButton name="intent" value="resolved" size="sm" variant="ghost"> |
| 172 | Resolve |
| 173 | </SubmitButton> |
| 174 | )} |
| 175 | {g.state !== "ignored" && ( |
| 176 | <SubmitButton name="intent" value="ignored" size="sm" variant="ghost"> |
| 177 | Ignore |
| 178 | </SubmitButton> |
| 179 | )} |
| 180 | {g.state !== "open" && ( |
| 181 | <SubmitButton name="intent" value="open" size="sm" variant="ghost"> |
| 182 | Open again |
| 183 | </SubmitButton> |
| 184 | )} |
| 185 | </Form> |
| 186 | )} |
| 187 | </div> |
| 188 | )} |
| 189 | {failedOn === g.fingerprint && <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>} |
| 190 | </Card> |
| 191 | </li> |
| 192 | ))} |
| 193 | </ul> |
| 194 | )} |
| 195 | </div> |
| 196 | </div> |
| 197 | ); |
| 198 | } |