Fix bulk import stuck in pending state in dev mode

In dev (Vite), runKomootBulkImport was fire-and-forgotten with .catch(()=>{}) which silently swallowed all errors, leaving the batch frozen at "pending". Fix: - Pre-mark the batch as "running" before firing the detached promise so the UI immediately transitions out of the pending state - On failure, update the batch to "failed" with the error message instead of swallowing it, so the UI shows the error and offers a retry Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fix import action crashing in dev when pg-boss is not initialized
2026-05-23 18:57:00 +02:00 · 2026-05-23 18:55:18 +02:00 · 2026-05-23 18:48:14 +02:00
1 changed files with 136 additions and 95 deletions
--- a/apps/journal/app/routes/sync.import.komoot.tsx
+++ b/apps/journal/app/routes/sync.import.komoot.tsx
@ -50,16 +50,54 @@ export async function action({ request }: Route.ActionArgs) {
  const user = await getSessionUser(request);
  if (!user) return redirect("/auth/login");

-  // Delegate to the API route — just redirect so the page reloads with
-  // the new batch after the POST.
-  const resp = await fetch(
-    new URL("/api/sync/komoot/import", new URL(request.url).origin),
-    { method: "POST", headers: { cookie: request.headers.get("cookie") ?? "" } },
-  );
-  if (!resp.ok) {
-    const body = (await resp.json()) as { error?: string };
-    return data({ error: body.error ?? "failed" }, { status: resp.status });
+  const { randomUUID } = await import("node:crypto");
+  const { getDb } = await import("~/lib/db");
+  const { importBatches } = await import("@trails-cool/db/schema/journal");
+
+  const service = await getService(user.id, "komoot");
+  if (!service) return redirect("/settings/connections/komoot");
+
+  const db = getDb();
+  const batchId = randomUUID();
+  await db.insert(importBatches).values({
+    id: batchId,
+    userId: user.id,
+    connectionId: service.id,
+    provider: "komoot",
+    status: "pending",
+  });
+
+  const { runKomootBulkImport } = await import("~/lib/komoot-bulk-import.server");
+  const creds = service.credentials as Parameters<typeof runKomootBulkImport>[2];
+
+  // Try to enqueue via pg-boss (production / custom server.ts).
+  // In dev (Vite), boss is never initialized — fall back to an inline
+  // fire-and-forget so the redirect still happens immediately.
+  let enqueued = false;
+  try {
+    const { getBoss } = await import("~/lib/boss.server");
+    const boss = getBoss();
+    await boss.send("komoot-bulk-import", { batchId, userId: user.id, creds });
+    enqueued = true;
+  } catch {
+    // pg-boss not available
  }
+
+  if (!enqueued) {
+    // Mark the batch running before returning so the UI doesn't stay frozen
+    // if the detached promise fails to start.
+    const { eq } = await import("drizzle-orm");
+    await db.update(importBatches).set({ status: "running" }).where(eq(importBatches.id, batchId));
+    void runKomootBulkImport(batchId, user.id, creds).catch(async (err) => {
+      const { eq: eq2 } = await import("drizzle-orm");
+      await db.update(importBatches).set({
+        status: "failed",
+        errorMessage: err instanceof Error ? err.message : String(err),
+        completedAt: new Date(),
+      }).where(eq2(importBatches.id, batchId));
+    });
+  }
+
  return redirect("/sync/import/komoot");
 }

@ -78,107 +116,110 @@ export default function KomootImportPage({ loaderData }: Route.ComponentProps) {
  const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);

  const isActive = batch?.status === "pending" || batch?.status === "running";
+  const isIdle = triggerFetcher.state === "idle";

  useEffect(() => {
    if (isActive) {
-      pollingRef.current = setInterval(() => {
-        revalidator.revalidate();
-      }, 2000);
+      pollingRef.current = setInterval(() => revalidator.revalidate(), 2000);
    }
-    return () => {
-      if (pollingRef.current) clearInterval(pollingRef.current);
-    };
+    return () => { if (pollingRef.current) clearInterval(pollingRef.current); };
  }, [isActive]);

  const elapsedSeconds = batch
    ? Math.floor(
-        (batch.completedAt
-          ? new Date(batch.completedAt).getTime()
-          : Date.now()) - new Date(batch.startedAt).getTime(),
-      ) / 1000
+        ((batch.completedAt ? new Date(batch.completedAt) : new Date()).getTime()
+          - new Date(batch.startedAt).getTime()) / 1000,
+      )
    : 0;

  return (
-    <div className="mx-auto max-w-2xl px-4 py-8">
-      <h1 className="text-2xl font-bold text-gray-900">
-        {t("sync.importFrom", { provider: "Komoot" })}
-      </h1>
+    <div className="mx-auto max-w-4xl px-4 py-8">
+      {/* Header row — mirrors sync.import.$provider layout */}
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">
+          {t("sync.importFrom", { provider: "Komoot" })}
+        </h1>

-      <div className="mt-6 rounded-lg border border-gray-200 p-6">
-        {!batch && (
-          <div className="text-center">
-            <p className="text-gray-600">{t("komoot.import.noImportYet")}</p>
-            <triggerFetcher.Form method="post" className="mt-4">
-              <button
-                type="submit"
-                disabled={triggerFetcher.state !== "idle"}
-                className="rounded-md bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
-              >
-                {triggerFetcher.state !== "idle"
-                  ? t("komoot.import.starting")
-                  : t("komoot.import.startImport")}
-              </button>
-            </triggerFetcher.Form>
-          </div>
-        )}
-
-        {batch && (
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <StatusBadge status={batch.status} t={t} />
-              {(batch.status === "completed" || batch.status === "failed") && (
-                <triggerFetcher.Form method="post">
-                  <button
-                    type="submit"
-                    disabled={triggerFetcher.state !== "idle"}
-                    className="text-sm text-blue-600 hover:underline disabled:opacity-50"
-                  >
-                    {t("komoot.import.runAgain")}
-                  </button>
-                </triggerFetcher.Form>
-              )}
-            </div>
-
-            {isActive && (
-              <div className="h-2 w-full overflow-hidden rounded-full bg-gray-100">
-                <div
-                  className="h-2 rounded-full bg-blue-500 transition-all duration-500"
-                  style={{
-                    width: batch.totalFound > 0
-                      ? `${Math.round(((batch.importedCount + batch.duplicateCount) / batch.totalFound) * 100)}%`
-                      : "5%",
-                  }}
-                />
-              </div>
-            )}
-
-            <dl className="grid grid-cols-3 gap-4 text-center">
-              <StatBox label={t("komoot.import.found")} value={batch.totalFound} />
-              <StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
-              <StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
-            </dl>
-
-            {batch.status === "completed" && (
-              <p className="text-sm text-gray-500">
-                {t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
-              </p>
-            )}
-
-            {batch.status === "failed" && batch.errorMessage && (
-              <p className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
-                {batch.errorMessage}
-              </p>
-            )}
-          </div>
+        {isActive ? (
+          <span className="text-sm text-gray-500">
+            {batch.totalFound > 0
+              ? t("sync.importingProgress", {
+                  current: batch.importedCount + batch.duplicateCount,
+                  total: batch.totalFound,
+                })
+              : t("komoot.import.status.running")}
+          </span>
+        ) : (
+          <triggerFetcher.Form method="post">
+            <button
+              type="submit"
+              disabled={!isIdle}
+              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            >
+              {!isIdle ? t("komoot.import.starting") : t("komoot.import.startImport")}
+            </button>
+          </triggerFetcher.Form>
        )}
      </div>

-      {batch?.status === "completed" && (
-        <p className="mt-4 text-center text-sm text-gray-500">
-          <a href={`/users/me`} className="text-blue-600 hover:underline">
-            {t("komoot.import.viewActivities")}
-          </a>
-        </p>
+      {/* Progress card — shown once a batch exists */}
+      {batch && (
+        <div className="mt-6 rounded-lg border border-gray-200 p-6">
+          <div className="flex items-center justify-between">
+            <StatusBadge status={batch.status} t={t} />
+            {(batch.status === "completed" || batch.status === "failed") && (
+              <triggerFetcher.Form method="post">
+                <button
+                  type="submit"
+                  disabled={!isIdle}
+                  className="text-sm text-blue-600 hover:underline disabled:opacity-50"
+                >
+                  {t("komoot.import.runAgain")}
+                </button>
+              </triggerFetcher.Form>
+            )}
+          </div>
+
+          {isActive && (
+            <div className="mt-4 h-2 w-full overflow-hidden rounded-full bg-gray-100">
+              <div
+                className="h-2 rounded-full bg-blue-500 transition-all duration-500"
+                style={{
+                  width: batch.totalFound > 0
+                    ? `${Math.round(((batch.importedCount + batch.duplicateCount) / batch.totalFound) * 100)}%`
+                    : "5%",
+                }}
+              />
+            </div>
+          )}
+
+          <dl className="mt-4 grid grid-cols-3 gap-4 text-center">
+            <StatBox label={t("komoot.import.found")} value={batch.totalFound} />
+            <StatBox label={t("komoot.import.imported")} value={batch.importedCount} />
+            <StatBox label={t("komoot.import.skipped")} value={batch.duplicateCount} />
+          </dl>
+
+          {batch.status === "completed" && (
+            <p className="mt-3 text-sm text-gray-500">
+              {t("komoot.import.completedIn", { duration: formatDuration(elapsedSeconds) })}
+              {" · "}
+              <a href="/activities" className="text-blue-600 hover:underline">
+                {t("komoot.import.viewActivities")}
+              </a>
+            </p>
+          )}
+
+          {batch.status === "failed" && batch.errorMessage && (
+            <p className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+              {batch.errorMessage}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Empty state — no batch yet */}
+      {!batch && (
+        <p className="mt-8 text-center text-gray-500">{t("komoot.import.noImportYet")}</p>
      )}
    </div>
  );