feature: Errors page (#3172)

A top-level Errors page that aggregates errors from failed runs with
occurrences metrics.


https://github.com/user-attachments/assets/8f0ef55e-90dd-4faa-9051-59f4665181e4

Errors are “fingerprinted” so similar errors are grouped together (e.g.
has an ID in the error message).

You can view an individual error to view a timeline of when it fired,
the runs, and bulk replay them.

Author: matt-aitken

.server-changes/add-errors-page.md

@@ -0,0 +1,11 @@
+---
+area: webapp
+type: feature
+---
+
+A new Errors page for viewing and tracking errors that cause runs to fail
+
+- Errors are grouped using error fingerprinting
+- View top errors for a time period, filter by task, or search the text
+- View occurrences over time
+- View all the runs for an error and bulk replay them

apps/webapp/app/components/BulkActionFilterSummary.tsx

@@ -228,6 +228,18 @@ export function BulkActionFilterSummary({
                     />
                   );
                 }
+                case "errorId": {
+                  return (
+                    <AppliedFilter
+                      variant="minimal/medium"
+                      key={key}
+                      label={"Error ID"}
+                      icon={filterIcon(key)}
+                      value={value}
+                      removable={false}
+                    />
+                  );
+                }
                 default: {
                   assertNever(typedKey);
                 }

apps/webapp/app/components/logs/LogsSearchInput.tsx

@@ -3,12 +3,14 @@ import { motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input } from "~/components/primitives/Input";
 import { ShortcutKey } from "~/components/primitives/ShortcutKey";
-import { cn } from "~/utils/cn";
-import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 import { useSearchParams } from "~/hooks/useSearchParam";
+import { cn } from "~/utils/cn";
+
+export type LogsSearchInputProps = {
+  placeholder?: string;
+};
 
-export function LogsSearchInput() {
-  const location = useOptimisticLocation();
+export function LogsSearchInput({ placeholder = "Search logs…" }: LogsSearchInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { value, replace, del } = useSearchParams();
@@ -61,7 +63,7 @@ export function LogsSearchInput() {
           type="text"
           ref={inputRef}
           variant="secondary-small"
-          placeholder="Search logs…"
+          placeholder={placeholder}
           value={text}
           onChange={(e) => setText(e.target.value)}
           fullWidth

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -24,6 +24,7 @@ import {
   Squares2X2Icon,
   TableCellsIcon,
   UsersIcon,
+  BugAntIcon,
 } from "@heroicons/react/20/solid";
 import { Link, useFetcher, useNavigation } from "@remix-run/react";
 import { LayoutGroup, motion } from "framer-motion";
@@ -73,6 +74,7 @@ import {
   v3EnvironmentPath,
   v3EnvironmentVariablesPath,
   v3LogsPath,
+  v3ErrorsPath,
   v3ProjectAlertsPath,
   v3ProjectPath,
   v3ProjectSettingsGeneralPath,
@@ -112,6 +114,7 @@ import { SideMenuHeader } from "./SideMenuHeader";
 import { SideMenuItem } from "./SideMenuItem";
 import { SideMenuSection } from "./SideMenuSection";
 import { type SideMenuSectionId } from "./sideMenuTypes";
+import { IconBugFilled } from "@tabler/icons-react";
 
 /** Get the collapsed state for a specific side menu section from user preferences */
 function getSectionCollapsed(
@@ -474,6 +477,17 @@ export function SideMenu({
                     isCollapsed={isCollapsed}
                   />
                 )}
+                {(user.admin || user.isImpersonating) && (
+                  <SideMenuItem
+                    name="Errors"
+                    icon={IconBugFilled}
+                    activeIconColor="text-amber-500"
+                    inactiveIconColor="text-amber-500"
+                    to={v3ErrorsPath(organization, project, environment)}
+                    data-action="errors"
+                    isCollapsed={isCollapsed}
+                  />
+                )}
                 <SideMenuItem
                   name="Query"
                   icon={TableCellsIcon}

apps/webapp/app/components/primitives/DateTime.tsx

@@ -1,7 +1,8 @@
 import { GlobeAltIcon, GlobeAmericasIcon } from "@heroicons/react/20/solid";
 import { useRouteLoaderData } from "@remix-run/react";
+import { formatDistanceToNow } from "date-fns";
 import { Laptop } from "lucide-react";
-import { memo, type ReactNode, useMemo, useSyncExternalStore } from "react";
+import { memo, type ReactNode, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { CopyButton } from "./CopyButton";
 import { useLocales } from "./LocaleProvider";
 import { Paragraph } from "./Paragraph";
@@ -357,6 +358,54 @@ function formatDateTimeAccurate(
   return `${datePart} ${timePart}`;
 }
 
+type RelativeDateTimeProps = {
+  date: Date | string;
+  timeZone?: string;
+};
+
+function getRelativeText(date: Date): string {
+  const text = formatDistanceToNow(date, { addSuffix: true });
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export const RelativeDateTime = ({ date, timeZone }: RelativeDateTimeProps) => {
+  const locales = useLocales();
+  const userTimeZone = useUserTimeZone();
+
+  const realDate = useMemo(() => (typeof date === "string" ? new Date(date) : date), [date]);
+
+  const [relativeText, setRelativeText] = useState(() => getRelativeText(realDate));
+
+  // Every 60s refresh
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setRelativeText(getRelativeText(realDate));
+    }, 60_000);
+    return () => clearInterval(interval);
+  }, [realDate]);
+
+  // On first render
+  useEffect(() => {
+    setRelativeText(getRelativeText(realDate));
+  }, [realDate]);
+
+  return (
+    <SimpleTooltip
+      button={<span suppressHydrationWarning>{relativeText}</span>}
+      content={
+        <TooltipContent
+          realDate={realDate}
+          timeZone={timeZone}
+          localTimeZone={userTimeZone}
+          locales={locales}
+        />
+      }
+      side="right"
+      asChild={true}
+    />
+  );
+};
+
 export const DateTimeShort = ({ date, hour12 = true }: DateTimeProps) => {
   const locales = useLocales();
   const userTimeZone = useUserTimeZone();

apps/webapp/app/components/runs/v3/RunFilters.tsx

@@ -9,7 +9,7 @@ import {
   XMarkIcon,
 } from "@heroicons/react/20/solid";
 import { Form, useFetcher } from "@remix-run/react";
-import { IconRotateClockwise2, IconToggleLeft } from "@tabler/icons-react";
+import { IconBugFilled, IconRotateClockwise2, IconToggleLeft } from "@tabler/icons-react";
 import { MachinePresetName } from "@trigger.dev/core/v3";
 import type { BulkActionType, TaskRunStatus, TaskTriggerSource } from "@trigger.dev/database";
 import { ListFilterIcon } from "lucide-react";
@@ -181,6 +181,7 @@ export const TaskRunListSearchFilters = z.object({
   machines: MachinePresetOrMachinePresetArray.describe(
     `Machine presets to filter by (${machines.join(", ")})`
   ),
+  errorId: z.string().optional().describe("Error ID to filter runs by (e.g. error_abc123)"),
 });
 
 export type TaskRunListSearchFilters = z.infer<typeof TaskRunListSearchFilters>;
@@ -220,6 +221,8 @@ export function filterTitle(filterKey: string) {
       return "Machine";
     case "versions":
       return "Version";
+    case "errorId":
+      return "Error ID";
     default:
       return filterKey;
   }
@@ -258,6 +261,8 @@ export function filterIcon(filterKey: string): ReactNode | undefined {
       return <MachineDefaultIcon className="size-4" />;
     case "versions":
       return <IconRotateClockwise2 className="size-4" />;
+    case "errorId":
+      return <IconBugFilled className="size-4" />;
     default:
       return undefined;
   }
@@ -304,6 +309,7 @@ export function getRunFiltersFromSearchParams(
       searchParams.getAll("versions").filter((v) => v.length > 0).length > 0
         ? searchParams.getAll("versions")
         : undefined,
+    errorId: searchParams.get("errorId") ?? undefined,
   };
 
   const parsed = TaskRunListSearchFilters.safeParse(params);
@@ -344,7 +350,8 @@ export function RunsFilters(props: RunFiltersProps) {
     searchParams.has("scheduleId") ||
     searchParams.has("queues") ||
     searchParams.has("machines") ||
-    searchParams.has("versions");
+    searchParams.has("versions") ||
+    searchParams.has("errorId");
 
   return (
     <div className="flex flex-row flex-wrap items-center gap-1">
@@ -380,6 +387,7 @@ const filterTypes = [
   { name: "batch", title: "Batch ID", icon: <Squares2X2Icon className="size-4" /> },
   { name: "schedule", title: "Schedule ID", icon: <ClockIcon className="size-4" /> },
   { name: "bulk", title: "Bulk action", icon: <ListCheckedIcon className="size-4" /> },
+  { name: "error", title: "Error ID", icon: <IconBugFilled className="size-4" /> },
 ] as const;
 
 type FilterType = (typeof filterTypes)[number]["name"];
@@ -434,6 +442,7 @@ function AppliedFilters({ possibleTasks, bulkActions }: RunFiltersProps) {
       <AppliedBatchIdFilter />
       <AppliedScheduleIdFilter />
       <AppliedBulkActionsFilter bulkActions={bulkActions} />
+      <AppliedErrorIdFilter />
     </>
   );
 }
@@ -470,6 +479,8 @@ function Menu(props: MenuProps) {
       return <ScheduleIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
     case "versions":
       return <VersionsDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
+    case "error":
+      return <ErrorIdDropdown onClose={() => props.setFilterType(undefined)} {...props} />;
   }
 }
 
@@ -655,7 +666,7 @@ function TasksDropdown({
                 <TaskTriggerSourceIcon source={item.triggerSource} className="size-4 flex-none" />
               }
             >
-              <MiddleTruncate text={item.slug}/>
+              <MiddleTruncate text={item.slug} />
             </SelectItem>
           ))}
         </SelectList>
@@ -1740,3 +1751,121 @@ function AppliedScheduleIdFilter() {
     </FilterMenuProvider>
   );
 }
+
+function ErrorIdDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+}) {
+  const [open, setOpen] = useState<boolean | undefined>();
+  const { value, replace } = useSearchParams();
+  const errorIdValue = value("errorId");
+
+  const [errorId, setErrorId] = useState(errorIdValue);
+
+  const apply = useCallback(() => {
+    clearSearchValue();
+    replace({
+      cursor: undefined,
+      direction: undefined,
+      errorId: errorId === "" ? undefined : errorId?.toString(),
+    });
+
+    setOpen(false);
+  }, [errorId, replace]);
+
+  let error: string | undefined = undefined;
+  if (errorId) {
+    if (!errorId.startsWith("error_")) {
+      error = "Error IDs start with 'error_'";
+    }
+  }
+
+  return (
+    <SelectProvider virtualFocus={true} open={open} setOpen={setOpen}>
+      {trigger}
+      <SelectPopover
+        hideOnEnter={false}
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+
+          return true;
+        }}
+        className="max-w-[min(32ch,var(--popover-available-width))]"
+      >
+        <div className="flex flex-col gap-4 p-3">
+          <div className="flex flex-col gap-1">
+            <Label>Error ID</Label>
+            <Input
+              placeholder="error_"
+              value={errorId ?? ""}
+              onChange={(e) => setErrorId(e.target.value)}
+              variant="small"
+              className="w-[29ch] font-mono"
+              spellCheck={false}
+            />
+            {error ? <FormError>{error}</FormError> : null}
+          </div>
+          <div className="flex justify-between gap-1 border-t border-grid-dimmed pt-3">
+            <Button variant="tertiary/small" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button
+              disabled={error !== undefined || !errorId}
+              variant="secondary/small"
+              shortcut={{
+                modifiers: ["mod"],
+                key: "Enter",
+                enabledOnInputElements: true,
+              }}
+              onClick={() => apply()}
+            >
+              Apply
+            </Button>
+          </div>
+        </div>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+function AppliedErrorIdFilter() {
+  const { value, del } = useSearchParams();
+
+  if (value("errorId") === undefined) {
+    return null;
+  }
+
+  const errorId = value("errorId");
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <ErrorIdDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Error ID"
+                icon={filterIcon("errorId")}
+                value={errorId}
+                onRemove={() => del(["errorId", "cursor", "direction"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}