Time filtering on the error detail page

Author: matt-aitken

apps/webapp/app/presenters/v3/ErrorGroupPresenter.server.ts

@@ -11,26 +11,34 @@ const errorGroupGranularity = new TimeGranularity([
   { max: "Infinity", granularity: "30d" },
 ]);
 import { type PrismaClientOrTransaction } from "@trigger.dev/database";
+import { timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
 import { findDisplayableEnvironment } from "~/models/runtimeEnvironment.server";
 import { ServiceValidationError } from "~/v3/services/baseService.server";
 import { BasePresenter } from "~/presenters/v3/basePresenter.server";
 import {
   NextRunListPresenter,
   type NextRunList,
 } from "~/presenters/v3/NextRunListPresenter.server";
+import { sortVersionsDescending } from "~/utils/semver";
 
 export type ErrorGroupOptions = {
   userId?: string;
   projectId: string;
   fingerprint: string;
   runsPageSize?: number;
+  period?: string;
+  from?: number;
+  to?: number;
 };
 
 export const ErrorGroupOptionsSchema = z.object({
   userId: z.string().optional(),
   projectId: z.string(),
   fingerprint: z.string(),
   runsPageSize: z.number().int().positive().max(1000).optional(),
+  period: z.string().optional(),
+  from: z.number().int().nonnegative().optional(),
+  to: z.number().int().nonnegative().optional(),
 });
 
 const DEFAULT_RUNS_PAGE_SIZE = 25;
@@ -53,6 +61,7 @@ export type ErrorGroupSummary = {
   count: number;
   firstSeen: Date;
   lastSeen: Date;
+  affectedVersions: string[];
 };
 
 export type ErrorGroupOccurrences = Awaited<ReturnType<ErrorGroupPresenter["getOccurrences"]>>;
@@ -75,6 +84,9 @@ export class ErrorGroupPresenter extends BasePresenter {
       projectId,
       fingerprint,
       runsPageSize = DEFAULT_RUNS_PAGE_SIZE,
+      period,
+      from,
+      to,
     }: ErrorGroupOptions
   ) {
     const displayableEnvironment = await findDisplayableEnvironment(environmentId, userId);
@@ -83,19 +95,37 @@ export class ErrorGroupPresenter extends BasePresenter {
       throw new ServiceValidationError("No environment found");
     }
 
-    const [summary, runList] = await Promise.all([
+    const time = timeFilterFromTo({
+      period,
+      from,
+      to,
+      defaultPeriod: "7d",
+    });
+
+    const [summary, affectedVersions, runList] = await Promise.all([
       this.getSummary(organizationId, projectId, environmentId, fingerprint),
+      this.getAffectedVersions(organizationId, projectId, environmentId, fingerprint),
       this.getRunList(organizationId, environmentId, {
         userId,
         projectId,
         fingerprint,
         pageSize: runsPageSize,
+        from: time.from.getTime(),
+        to: time.to.getTime(),
       }),
     ]);
 
+    if (summary) {
+      summary.affectedVersions = affectedVersions;
+    }
+
     return {
       errorGroup: summary,
       runList,
+      filters: {
+        from: time.from,
+        to: time.to,
+      },
     };
   }
 
@@ -194,9 +224,40 @@ export class ErrorGroupPresenter extends BasePresenter {
       count: record.occurrence_count,
       firstSeen: parseClickHouseDateTime(record.first_seen),
       lastSeen: parseClickHouseDateTime(record.last_seen),
+      affectedVersions: [],
     };
   }
 
+  /**
+   * Returns the most recent distinct task_version values for an error fingerprint,
+   * sorted by semantic version descending (newest first).
+   * Queries error_occurrences_v1 where task_version is part of the ORDER BY key.
+   */
+  private async getAffectedVersions(
+    organizationId: string,
+    projectId: string,
+    environmentId: string,
+    fingerprint: string
+  ): Promise<string[]> {
+    const queryBuilder = this.logsClickhouse.errors.affectedVersionsQueryBuilder();
+
+    queryBuilder.where("organization_id = {organizationId: String}", { organizationId });
+    queryBuilder.where("project_id = {projectId: String}", { projectId });
+    queryBuilder.where("environment_id = {environmentId: String}", { environmentId });
+    queryBuilder.where("error_fingerprint = {fingerprint: String}", { fingerprint });
+    queryBuilder.where("task_version != ''");
+    queryBuilder.limit(100);
+
+    const [queryError, records] = await queryBuilder.execute();
+
+    if (queryError || !records) {
+      return [];
+    }
+
+    const versions = records.map((r) => r.task_version).filter((v) => v.length > 0);
+    return sortVersionsDescending(versions).slice(0, 5);
+  }
+
   private async getRunList(
     organizationId: string,
     environmentId: string,
@@ -205,6 +266,8 @@ export class ErrorGroupPresenter extends BasePresenter {
       projectId: string;
       fingerprint: string;
       pageSize: number;
+      from?: number;
+      to?: number;
     }
   ): Promise<NextRunList | undefined> {
     const runListPresenter = new NextRunListPresenter(this.replica, this.clickhouse);
@@ -214,6 +277,8 @@ export class ErrorGroupPresenter extends BasePresenter {
       projectId: options.projectId,
       errorFingerprint: options.fingerprint,
       pageSize: options.pageSize,
+      from: options.from,
+      to: options.to,
     });
 
     if (result.runs.length === 0) {

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

@@ -29,6 +29,8 @@ import { TaskRunsTable } from "~/components/runs/v3/TaskRunsTable";
 import { DateTime } from "~/components/primitives/DateTime";
 import { ErrorId } from "@trigger.dev/core/v3/isomorphic";
 import { Chart, type ChartConfig } from "~/components/primitives/charts/ChartCompound";
+import { TimeFilter, timeFilterFromTo } from "~/components/runs/v3/SharedFilters";
+import { useOptimisticLocation } from "~/hooks/useOptimisticLocation";
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   return [
@@ -59,13 +61,23 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     throw new Response("Environment not found", { status: 404 });
   }
 
+  const url = new URL(request.url);
+  const period = url.searchParams.get("period") ?? undefined;
+  const fromStr = url.searchParams.get("from");
+  const toStr = url.searchParams.get("to");
+  const from = fromStr ? parseInt(fromStr, 10) : undefined;
+  const to = toStr ? parseInt(toStr, 10) : undefined;
+
   const presenter = new ErrorGroupPresenter($replica, logsClickhouseClient, clickhouseClient);
 
   const detailPromise = presenter
     .call(project.organizationId, environment.id, {
       userId,
       projectId: project.id,
       fingerprint,
+      period,
+      from,
+      to,
     })
     .catch((error) => {
       if (error instanceof ServiceValidationError) {
@@ -74,17 +86,16 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       throw error;
     });
 
-  const now = new Date();
-  const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  const time = timeFilterFromTo({ period, from, to, defaultPeriod: "7d" });
 
   const activityPromise = presenter
     .getOccurrences(
       project.organizationId,
       project.id,
       environment.id,
       fingerprint,
-      sevenDaysAgo,
-      now
+      time.from,
+      time.to
     )
     .catch(() => ({ data: [] as ErrorGroupActivity }));
 
@@ -102,11 +113,25 @@ export default function Page() {
   const { data, activity, organizationSlug, projectParam, envParam, fingerprint } =
     useTypedLoaderData<typeof loader>();
 
-  const errorsPath = v3ErrorsPath(
-    { slug: organizationSlug },
-    { slug: projectParam },
-    { slug: envParam }
-  );
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+
+  const errorsPath = useMemo(() => {
+    const base = v3ErrorsPath(
+      { slug: organizationSlug },
+      { slug: projectParam },
+      { slug: envParam }
+    );
+    const carry = new URLSearchParams();
+    const period = searchParams.get("period");
+    const from = searchParams.get("from");
+    const to = searchParams.get("to");
+    if (period) carry.set("period", period);
+    if (from) carry.set("from", from);
+    if (to) carry.set("to", to);
+    const qs = carry.toString();
+    return qs ? `${base}?${qs}` : base;
+  }, [organizationSlug, projectParam, envParam, searchParams.toString()]);
 
   return (
     <PageContainer>
@@ -203,6 +228,10 @@ function ErrorGroupDetail({
       <div className="border-b border-grid-bright p-4">
         <Header2 className="mb-4">{errorGroup.errorMessage}</Header2>
 
+        <div className="mb-4">
+          <TimeFilter defaultPeriod="7d" labelName="Occurred" />
+        </div>
+
         <div className="grid grid-cols-3 gap-x-12 gap-y-1">
           <Property.Table>
             <Property.Item>
@@ -224,6 +253,16 @@ function ErrorGroupDetail({
               <Property.Label>Occurrences</Property.Label>
               <Property.Value>{formatNumberCompact(errorGroup.count)}</Property.Value>
             </Property.Item>
+            {errorGroup.affectedVersions.length > 0 && (
+              <Property.Item>
+                <Property.Label>Affected versions</Property.Label>
+                <Property.Value>
+                  <span className="font-mono text-xs">
+                    {errorGroup.affectedVersions.join(", ")}
+                  </span>
+                </Property.Value>
+              </Property.Item>
+            )}
           </Property.Table>
 
           <Property.Table>
@@ -241,22 +280,11 @@ function ErrorGroupDetail({
             </Property.Item>
           </Property.Table>
         </div>
-
-        {errorGroup.stackTrace && (
-          <div className="mt-4 rounded-md bg-charcoal-900 p-4">
-            <Paragraph variant="small" className="mb-2 font-semibold text-text-bright">
-              Stack Trace
-            </Paragraph>
-            <pre className="overflow-x-auto text-xs text-text-dimmed">
-              <code>{errorGroup.stackTrace}</code>
-            </pre>
-          </div>
-        )}
       </div>
 
-      {/* Activity over past 7 days */}
+      {/* Activity chart */}
       <div className="flex flex-col overflow-hidden border-b border-grid-bright px-4 py-3">
-        <Header3 className="mb-2 shrink-0">Activity (past 7 days)</Header3>
+        <Header3 className="mb-2 shrink-0">Activity</Header3>
         <Suspense fallback={<ActivityChartBlankState />}>
           <TypedAwait resolve={activity} errorElement={<ActivityChartBlankState />}>
             {(result) =>

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

@@ -2,7 +2,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import { Form, type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { ErrorId } from "@trigger.dev/core/v3/isomorphic";
-import { Suspense } from "react";
+import { Suspense, useMemo } from "react";
 import {
   Bar,
   BarChart,
@@ -243,7 +243,11 @@ function FiltersBar({
         {list ? (
           <>
             <LogsTaskFilter possibleTasks={list.filters.possibleTasks} />
-            <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
+            <TimeFilter
+              defaultPeriod={defaultPeriod}
+              maxPeriodDays={retentionLimitDays}
+              labelName="Occurred"
+            />
             <LogsSearchInput placeholder="Search errors..." />
             {hasFilters && (
               <Form className="h-6">
@@ -344,12 +348,26 @@ function ErrorGroupRow({
   projectParam: string;
   envParam: string;
 }) {
-  const errorPath = v3ErrorPath(
-    { slug: organizationSlug },
-    { slug: projectParam },
-    { slug: envParam },
-    { fingerprint: errorGroup.fingerprint }
-  );
+  const location = useOptimisticLocation();
+  const searchParams = new URLSearchParams(location.search);
+
+  const errorPath = useMemo(() => {
+    const base = v3ErrorPath(
+      { slug: organizationSlug },
+      { slug: projectParam },
+      { slug: envParam },
+      { fingerprint: errorGroup.fingerprint }
+    );
+    const carry = new URLSearchParams();
+    const period = searchParams.get("period");
+    const from = searchParams.get("from");
+    const to = searchParams.get("to");
+    if (period) carry.set("period", period);
+    if (from) carry.set("from", from);
+    if (to) carry.set("to", to);
+    const qs = carry.toString();
+    return qs ? `${base}?${qs}` : base;
+  }, [organizationSlug, projectParam, envParam, errorGroup.fingerprint, searchParams.toString()]);
 
   const errorMessage = `${errorGroup.errorMessage}`;
 
@@ -387,11 +405,7 @@ function ErrorGroupRow({
   );
 }
 
-function ErrorActivityGraph({
-  activity,
-}: {
-  activity: ErrorOccurrenceActivity;
-}) {
+function ErrorActivityGraph({ activity }: { activity: ErrorOccurrenceActivity }) {
   const maxCount = Math.max(...activity.map((d) => d.count));
 
   return (

apps/webapp/app/utils/semver.ts

@@ -0,0 +1,41 @@
+/**
+ * Parses a version string into comparable numeric parts.
+ * Handles formats like "1.2.3", "20240115.1", "v1.0.0", plain timestamps, etc.
+ * Non-numeric pre-release suffixes (e.g. "-beta.1") are stripped for ordering purposes.
+ */
+function parseVersionParts(version: string): number[] {
+  const cleaned = version.replace(/^v/i, "").replace(/[-+].*$/, "");
+  return cleaned.split(".").map((p) => {
+    const n = parseInt(p, 10);
+    return isNaN(n) ? 0 : n;
+  });
+}
+
+/**
+ * Compares two version strings using numeric segment comparison (descending).
+ * Falls back to lexicographic comparison when segments are equal.
+ * Returns a negative number if `a` should come before `b` (i.e. `a` is newer).
+ */
+export function compareVersionsDescending(a: string, b: string): number {
+  const partsA = parseVersionParts(a);
+  const partsB = parseVersionParts(b);
+  const maxLen = Math.max(partsA.length, partsB.length);
+
+  for (let i = 0; i < maxLen; i++) {
+    const segA = partsA[i] ?? 0;
+    const segB = partsB[i] ?? 0;
+    if (segA !== segB) {
+      return segB - segA;
+    }
+  }
+
+  return b.localeCompare(a);
+}
+
+/**
+ * Sorts an array of version strings in descending order (newest first).
+ * Non-destructive – returns a new array.
+ */
+export function sortVersionsDescending(versions: string[]): string[] {
+  return [...versions].sort(compareVersionsDescending);
+}