Skip to content
Sign up

flagon-io/g1t

public
00

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

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