feat(webapp): errors page polish and GA rollout

.server-changes/errors-page-polish-and-ga.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: feature
+---
+
+Ship the Errors page to all users, with a polish + bug-fix pass: pinned "No channel" item in the Slack alert channel picker, viewer-timezone alert timestamps via Slack's `<!date^>` token, Activity sparkline peak tooltip, centered loading spinner and bug-icon empty state on the error detail page, ellipsis on the Configure alerts trigger.

apps/webapp/app/components/errors/ConfigureErrorAlerts.tsx

@@ -196,7 +196,7 @@ export function ConfigureErrorAlerts({
                       name={slackChannel.name}
                       placeholder={<span className="text-text-dimmed">Select a Slack channel</span>}
                       heading="Filter channels…"
-                      defaultValue={selectedSlackChannelValue}
+                      value={selectedSlackChannelValue ?? ""}
                       dropdownIcon
                       variant="tertiary/medium"
                       items={slack.channels}
@@ -218,6 +218,15 @@ export function ConfigureErrorAlerts({
                     >
                       {(matches) => (
                         <>
+                          <SelectItem
+                            value=""
+                            className="border-b border-grid-bright text-text-dimmed"
+                          >
+                            <div className="flex items-center gap-1.5">
+                              <XMarkIcon className="size-4" />
+                              <span>No channel</span>
+                            </div>
+                          </SelectItem>
                           {matches?.map((channel) => (
                             <SelectItem
                               key={channel.id}

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

@@ -524,17 +524,15 @@ export function SideMenu({
                     isCollapsed={isCollapsed}
                   />
                 )}
-                {(user.admin || user.isImpersonating) && (
-                  <SideMenuItem
-                    name="Errors"
-                    icon={IconBugFilled}
-                    activeIconColor="text-errors"
-                    inactiveIconColor="text-errors"
-                    to={v3ErrorsPath(organization, project, environment)}
-                    data-action="errors"
-                    isCollapsed={isCollapsed}
-                  />
-                )}
+                <SideMenuItem
+                  name="Errors"
+                  icon={IconBugFilled}
+                  activeIconColor="text-errors"
+                  inactiveIconColor="text-errors"
+                  to={v3ErrorsPath(organization, project, environment)}
+                  data-action="errors"
+                  isCollapsed={isCollapsed}
+                />
                 <SideMenuItem
                   name="Query"
                   icon={TableCellsIcon}

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors.$fingerprint/route.tsx

@@ -1,7 +1,11 @@
 import { type LoaderFunctionArgs, type ActionFunctionArgs, json } from "@remix-run/server-runtime";
 import { type MetaFunction, useFetcher, useRevalidator } from "@remix-run/react";
 import { BellAlertIcon } from "@heroicons/react/20/solid";
-import { IconAlarmSnooze as IconAlarmSnoozeBase, IconCircleDotted } from "@tabler/icons-react";
+import {
+  IconAlarmSnooze as IconAlarmSnoozeBase,
+  IconBugFilled,
+  IconCircleDotted,
+} from "@tabler/icons-react";
 import { parse } from "@conform-to/zod";
 import { z } from "zod";
 import { ErrorStatusBadge } from "~/components/errors/ErrorStatusBadge";
@@ -27,7 +31,7 @@ import {
 import { type NextRunList } from "~/presenters/v3/NextRunListPresenter.server";
 import { $replica } from "~/db.server";
 import { logsClickhouseClient, clickhouseClient } from "~/services/clickhouseInstance.server";
-import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { PageBody } from "~/components/layout/AppLayout";
 import {
   ResizableHandle,
@@ -324,13 +328,23 @@ export default function Page() {
           }}
           title={<span className="font-mono text-xs">{ErrorId.toFriendlyId(fingerprint)}</span>}
         />
+        <PageAccessories>
+          <LinkButton
+            to={alertsHref}
+            variant="secondary/small"
+            LeadingIcon={BellAlertIcon}
+            leadingIconClassName="text-alerts"
+          >
+            Configure alerts…
+          </LinkButton>
+        </PageAccessories>
       </NavBar>
 
       <PageBody scrollable={false}>
         <Suspense
           fallback={
-            <div className="my-2 flex items-center justify-center">
-              <div className="mx-auto flex items-center gap-2">
+            <div className="flex h-full items-center justify-center">
+              <div className="flex items-center gap-2">
                 <Spinner />
                 <Paragraph variant="small">Loading error details…</Paragraph>
               </div>
@@ -366,7 +380,6 @@ export default function Page() {
                   projectParam={projectParam}
                   envParam={envParam}
                   fingerprint={fingerprint}
-                  alertsHref={alertsHref}
                 />
               );
             }}
@@ -385,7 +398,6 @@ function ErrorGroupDetail({
   projectParam,
   envParam,
   fingerprint,
-  alertsHref,
 }: {
   errorGroup: ErrorGroupSummary | undefined;
   runList: NextRunList | undefined;
@@ -394,7 +406,6 @@ function ErrorGroupDetail({
   projectParam: string;
   envParam: string;
   fingerprint: string;
-  alertsHref: string;
 }) {
   const { value, values } = useSearchParams();
   const organization = useOrganization();
@@ -499,9 +510,12 @@ function ErrorGroupDetail({
                 additionalTableState={{ errorId: ErrorId.toFriendlyId(fingerprint) }}
               />
             ) : (
-              <Paragraph variant="small" className="p-4 text-text-dimmed">
-                No runs found for this error.
-              </Paragraph>
+              <div className="flex flex-1 flex-col items-center justify-center gap-3">
+                <IconBugFilled className="size-16 text-charcoal-650" />
+                <Paragraph className="max-w-32 text-center text-text-dimmed">
+                  No runs found for this error.
+                </Paragraph>
+              </div>
             )}
           </div>
         </div>
@@ -510,11 +524,7 @@ function ErrorGroupDetail({
       {/* Right-hand detail sidebar */}
       <ResizableHandle id="error-detail-handle" />
       <ResizablePanel id="error-detail" min="280px" default="380px" max="500px" isStaticAtRest>
-        <ErrorDetailSidebar
-          errorGroup={errorGroup}
-          fingerprint={fingerprint}
-          alertsHref={alertsHref}
-        />
+        <ErrorDetailSidebar errorGroup={errorGroup} fingerprint={fingerprint} />
       </ResizablePanel>
     </ResizablePanelGroup>
   );
@@ -523,24 +533,14 @@ function ErrorGroupDetail({
 function ErrorDetailSidebar({
   errorGroup,
   fingerprint,
-  alertsHref,
 }: {
   errorGroup: ErrorGroupSummary;
   fingerprint: string;
-  alertsHref: string;
 }) {
   return (
     <div className="grid h-full grid-rows-[auto_1fr] overflow-hidden bg-background-bright">
-      <div className="flex items-center justify-between border-b border-grid-dimmed py-2 pl-3 pr-2">
+      <div className="border-b border-grid-dimmed px-3 py-2">
         <Header2 className="truncate">Details</Header2>
-        <LinkButton
-          to={alertsHref}
-          variant="secondary/small"
-          LeadingIcon={BellAlertIcon}
-          leadingIconClassName="text-alerts"
-        >
-          Configure alerts
-        </LinkButton>
       </div>
       <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <div className="flex flex-col gap-4">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.errors._index/route.tsx

@@ -55,6 +55,7 @@ import {
   statusActionToastMessage,
 } from "~/components/errors/ErrorStatusMenu";
 import { useToast } from "~/components/primitives/Toast";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
 import TooltipPortal from "~/components/primitives/TooltipPortal";
 import { appliedSummary, FilterMenuProvider, TimeFilter } from "~/components/runs/v3/SharedFilters";
 import { $replica } from "~/db.server";
@@ -463,7 +464,7 @@ function FiltersBar({
           LeadingIcon={BellAlertIcon}
           leadingIconClassName="text-alerts"
         >
-          Configure alerts
+          Configure alerts…
         </LinkButton>
         {list && <ListPagination list={list} />}
       </div>
@@ -706,9 +707,14 @@ function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity })
           </BarChart>
         </ResponsiveContainer>
       </div>
-      <span className="-mt-1 text-xxs tabular-nums text-text-dimmed">
-        {formatNumberCompact(maxCount)}
-      </span>
+      <SimpleTooltip
+        button={
+          <span className="-mt-1 text-xxs tabular-nums text-text-dimmed">
+            {formatNumberCompact(maxCount)}
+          </span>
+        }
+        content="Peak occurrences in a single time bucket"
+      />
     </div>
   );
 }

apps/webapp/app/v3/services/alerts/deliverAlert.server.ts

@@ -1182,15 +1182,19 @@ export class DeliverAlertService extends BaseService {
   }
 
   #formatTimestamp(date: Date): string {
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: true,
-    }).format(date);
+    const unix = Math.floor(date.getTime() / 1000);
+    const fallback =
+      new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+        timeZone: "UTC",
+      }).format(date) + " UTC";
+    return `<!date^${unix}^{date_short_pretty} {time_secs}|${fallback}>`;
   }
 
   #buildWebhookGitObject(git: GitMetaLinks | null) {

apps/webapp/app/v3/services/alerts/deliverErrorGroupAlert.server.ts

@@ -383,15 +383,19 @@ export class DeliverErrorGroupAlertService {
   }
 
   #formatTimestamp(date: Date): string {
-    return new Intl.DateTimeFormat("en-US", {
-      month: "short",
-      day: "numeric",
-      year: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-      second: "2-digit",
-      hour12: true,
-    }).format(date);
+    const unix = Math.floor(date.getTime() / 1000);
+    const fallback =
+      new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+        timeZone: "UTC",
+      }).format(date) + " UTC";
+    return `<!date^${unix}^{date_short_pretty} {time_secs}|${fallback}>`;
   }
 }