fix(webapp): stop a ClickHouse outage crashing the dev server

The env dashboard defers its analytics queries: the presenters create the
promises eagerly and the route only subscribes via typeddefer after further
awaits. With ClickHouse unreachable the queries reject instantly — inside
that gap — and Node treats the not-yet-subscribed rejection as unhandled and
kills the whole server. The agent sparkline promises aren't consumed by the
unified path at all, so with agents present those reject unhandled every
time.

Each deliberately un-awaited promise now carries a no-op backstop catch at
creation. Consumers still receive rejections (the stats chips keep their
error state); the process just no longer dies. With ClickHouse down the
dashboard now renders with failed-stats placeholders.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

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

@@ -7,6 +7,7 @@ import { type ClickHouse } from "@internal/clickhouse";
 import { z } from "zod";
 import { $replica } from "~/db.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
+import { backstopPromise } from "~/utils/backstopPromise";
 import { singleton } from "~/utils/singleton";
 import { findCurrentWorkerFromEnvironment } from "~/v3/models/workerDeployment.server";
 
@@ -97,15 +98,19 @@ export class AgentListPresenter {
       };
     }
 
-    // All queries are deferred for streaming
-    const activeStates = this.#getActiveStates(clickhouse, environmentId, slugs);
-    const conversationSparklines = this.#getConversationSparklines(
-      clickhouse,
-      environmentId,
-      slugs
+    // All queries are deferred for streaming. Backstopped: consumers subscribe
+    // late (or, for some callers, not at all), and an unhandled rejection in
+    // the gap kills the server.
+    const activeStates = backstopPromise(this.#getActiveStates(clickhouse, environmentId, slugs));
+    const conversationSparklines = backstopPromise(
+      this.#getConversationSparklines(clickhouse, environmentId, slugs)
+    );
+    const costSparklines = backstopPromise(
+      this.#getCostSparklines(clickhouse, environmentId, slugs)
+    );
+    const tokenSparklines = backstopPromise(
+      this.#getTokenSparklines(clickhouse, environmentId, slugs)
     );
-    const costSparklines = this.#getCostSparklines(clickhouse, environmentId, slugs);
-    const tokenSparklines = this.#getTokenSparklines(clickhouse, environmentId, slugs);
 
     return { agents, activeStates, conversationSparklines, costSparklines, tokenSparklines };
   }

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

@@ -9,6 +9,7 @@ import {
   ClickHouseEnvironmentMetricsRepository,
   type CurrentRunningStats,
 } from "~/services/environmentMetricsRepository.server";
+import { backstopPromise } from "~/utils/backstopPromise";
 import { singleton } from "~/utils/singleton";
 import { findCurrentWorkerFromEnvironment } from "~/v3/models/workerDeployment.server";
 
@@ -84,16 +85,18 @@ export class TaskListPresenter {
     });
 
     // IMPORTANT: Don't await this, we want to return the promise
-    // so we can defer the loading of the data. The caller is responsible for
-    // consuming it — an unconsumed promise here would become an unhandled
-    // rejection if the underlying query fails.
-    const runningStats = environmentMetricsRepository.getCurrentRunningStats({
-      organizationId,
-      projectId,
-      environmentId,
-      days: 6,
-      tasks: slugs,
-    });
+    // so we can defer the loading of the data. Backstopped because the caller
+    // only subscribes after further awaits — with ClickHouse down this rejects
+    // instantly, and an unhandled rejection kills the whole server.
+    const runningStats = backstopPromise(
+      environmentMetricsRepository.getCurrentRunningStats({
+        organizationId,
+        projectId,
+        environmentId,
+        days: 6,
+        tasks: slugs,
+      })
+    );
 
     return { tasks, runningStats };
   }

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

@@ -8,6 +8,7 @@ import {
 import { z } from "zod";
 import { $replica } from "~/db.server";
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
+import { backstopPromise } from "~/utils/backstopPromise";
 import { singleton } from "~/utils/singleton";
 import { findCurrentWorkerFromEnvironment } from "~/v3/models/workerDeployment.server";
 import { agentListPresenter, type AgentActiveState } from "./AgentListPresenter.server";
@@ -69,26 +70,34 @@ export class UnifiedTaskListPresenter {
     const items = toUnifiedItems(taskResult.tasks, agentResult.agents);
     const allSlugs = items.map((item) => item.slug);
 
+    // Both deferred promises below are backstopped: the route only subscribes
+    // (via typeddefer) after further awaits, so a rejection landing in that
+    // gap — e.g. ClickHouse refusing connections — would otherwise be an
+    // unhandled rejection and take the server down. Awaiting them still
+    // rejects into the route's error elements.
     const hourlyActivity: Promise<HourlyTaskActivity> =
       allSlugs.length === 0
         ? Promise.resolve({})
-        : (async () => {
-            const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
-              args.organizationId,
-              "standard"
-            );
-            return getHourlyTaskActivity(clickhouse, {
-              organizationId: args.organizationId,
-              projectId: args.projectId,
-              environmentId: args.environmentId,
-              slugs: allSlugs,
-            });
-          })();
+        : backstopPromise(
+            (async () => {
+              const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
+                args.organizationId,
+                "standard"
+              );
+              return getHourlyTaskActivity(clickhouse, {
+                organizationId: args.organizationId,
+                projectId: args.projectId,
+                environmentId: args.environmentId,
+                slugs: allSlugs,
+              });
+            })()
+          );
 
-    const runningStates: Promise<UnifiedRunningStates> = Promise.all([
-      taskResult.runningStats,
-      agentResult.activeStates,
-    ]).then(([runningStats, activeStates]) => mergeRunningStates(runningStats, activeStates));
+    const runningStates: Promise<UnifiedRunningStates> = backstopPromise(
+      Promise.all([taskResult.runningStats, agentResult.activeStates]).then(
+        ([runningStats, activeStates]) => mergeRunningStates(runningStats, activeStates)
+      )
+    );
 
     return { items, hourlyActivity, runningStates };
   }

apps/webapp/app/utils/backstopPromise.ts

@@ -0,0 +1,15 @@
+/**
+ * Marks a deliberately un-awaited promise as handled without consuming it.
+ *
+ * For promises created eagerly and consumed later — handed to Remix `defer()`,
+ * or composed into another promise after further awaits — a rejection that
+ * lands before the consumer subscribes counts as an unhandled rejection, and
+ * Node brings the whole process down on those. The no-op catch here is a
+ * separate branch: awaiting the returned promise still rejects as normal
+ * (e.g. into a `<TypedAwait errorElement>`), and a branch nobody ever awaits
+ * simply logs nothing instead of crashing the server.
+ */
+export function backstopPromise<T>(promise: Promise<T>): Promise<T> {
+  promise.catch(() => {});
+  return promise;
+}