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
206 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">
99 {actionData && "notice" in actionData && <p className="text-sm text-success">{actionData.notice}</p>}
100 </div>
101
102 <div className={cn("mt-2 transition-opacity", loading && "opacity-60")}>
103 {!groups ? (
104 <Unavailable what="Errors" />
105 ) : groups.length === 0 ? (
106 <EmptyState title={state === "open" ? "No open errors in this period" : `No ${state} errors in this period`}>
107 Exceptions thrown by apps on g1t.page show here on their own; others arrive as OpenTelemetry exception events and log records.
108 </EmptyState>
109 ) : (
110 <ul className="space-y-3">
111 {groups.map((g) => (
112 <li key={g.fingerprint} id={g.fingerprint}>
113 <Card className="min-w-0 p-4">
114 <div className="flex flex-wrap items-start justify-between gap-3">
115 <div className="min-w-0 flex-1">
116 <p className="flex flex-wrap items-center gap-2">
117 <span className="font-mono text-sm text-danger">{g.name}</span>
118 <Badge tone="neutral" className="font-mono">
119 {g.service || "app"}
120 </Badge>
121 {g.environment && <Badge tone="neutral">{g.environment}</Badge>}
122 {(g.item ?? g.legacy_number) != null && (
123 <Link
124 to={g.item != null ? itemPath(params.owner, g.item) : `${base}/ref/${g.legacy_number}`}
125 className="inline-flex items-center gap-1 text-xs text-accent hover:underline"
126 >
127 <CircleDot size={12} />#{g.item ?? g.legacy_number}
128 </Link>
129 )}
130 </p>
131 <p className="mt-1 text-sm wrap-break-word">{g.message}</p>
132 <p className="mt-1.5 text-xs text-faint tabular-nums">
133 <span className="text-fg">{count(g.count)}</span> time{g.count === 1 ? "" : "s"} · first <TimeAgo at={g.first_us / 1000} /> · last{" "}
134 <TimeAgo at={g.last_us / 1000} />
135 {g.first_deployment_id && (
136 <>
137 {" "}
138 · since{" "}
139 <Link to={`${base}/deployments/${g.first_deployment_id}`} className="font-mono hover:text-fg">
140 {g.first_deployment_id.slice(0, 12)}
141 </Link>
142 </>
143 )}
144 </p>
145 </div>
146 <div className="flex shrink-0 flex-wrap gap-2">
147 {g.last_request_id && (
148 <Link to={`${base}/observability/requests/${g.last_request_id}`} className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg">
149 Latest request <ExternalLink size={11} />
150 </Link>
151 )}
152 {g.last_trace_id && (
153 <Link to={`${base}/observability/traces/${g.last_trace_id}`} className="inline-flex items-center gap-1 text-xs text-muted hover:text-fg">
154 Trace <ExternalLink size={11} />
155 </Link>
156 )}
157 </div>
158 </div>
159 {g.stack && (
160 <details className="mt-3">
161 <summary className="cursor-pointer text-xs text-muted hover:text-fg">Stack</summary>
162 <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>
163 </details>
164 )}
165 {(can.triage || (can.item && g.item == null && g.legacy_number == null)) && (
166 <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-line pt-3">
167 {can.item && g.item == null && g.legacy_number == null && (
168 <Form method="post" className="flex flex-wrap items-center gap-2">
169 <input type="hidden" name="fingerprint" value={g.fingerprint} />
170 <SubmitButton name="intent" value="item" size="sm" variant="outline">
171 Make a work item
172 </SubmitButton>
173 </Form>
174 )}
175 {can.triage && (
176 <Form method="post" className="ml-auto flex gap-2">
177 <input type="hidden" name="fingerprint" value={g.fingerprint} />
178 {g.state !== "resolved" && (
179 <SubmitButton name="intent" value="resolved" size="sm" variant="ghost">
180 Resolve
181 </SubmitButton>
182 )}
183 {g.state !== "ignored" && (
184 <SubmitButton name="intent" value="ignored" size="sm" variant="ghost">
185 Ignore
186 </SubmitButton>
187 )}
188 {g.state !== "open" && (
189 <SubmitButton name="intent" value="open" size="sm" variant="ghost">
190 Open again
191 </SubmitButton>
192 )}
193 </Form>
194 )}
195 </div>
196 )}
197 {failedOn === g.fingerprint && <ErrorText>{actionData && "error" in actionData ? actionData.error : null}</ErrorText>}
198 </Card>
199 </li>
200 ))}
201 </ul>
202 )}
203 </div>
204 </div>
205 );
206}