fix(app): retry failed session metadata without reloading

Author: milimarenko

packages/app/e2e/regression/tabs.spec.ts

@@ -14,9 +14,9 @@ import {
   sessionHref,
 } from "../utils/app"
 import { openFileLauncher, reviewTabs } from "../utils/side-panel"
-import { mockServers } from "../utils/mock-server"
+import { currentSession, mockServers } from "../utils/mock-server"
 import { fixture, mockStressTimeline } from "../utils/session-fixture"
-import { fileNode, mockWorkspace, openSession } from "../utils/workspace"
+import { fileNode, mockRemoteServer, mockWorkspace, openSession } from "../utils/workspace"
 import { expectSessionTitle } from "../utils/waits"
 
 const a = { id: "ses_tab_a", title: "Tab A session" }
@@ -128,6 +128,72 @@ test("recently closed fills remaining slots in Home order without open or duplic
   await expect(items).toHaveText(["OOther session 9"])
 })
 
+for (const server of [SERVER, REMOTE_SERVER]) {
+  test(`session metadata failure does not follow navigation to another tab on ${server}`, async ({ page }) => {
+    await mockWorkspace(page, {
+      name: "Tabs",
+      sessions: [b],
+      seed: { tabs: [a.id, { session: b.id, server }] },
+    })
+    if (server === REMOTE_SERVER) {
+      await mockRemoteServer(page, { sessions: [session({ ...b, directory: "/remote/project" })] })
+    }
+    await page.route(
+      (url) => url.origin === SERVER && url.pathname === `/api/session/${a.id}`,
+      (route) => route.fulfill({ status: 504, json: { message: "Fixture metadata timeout" } }),
+    )
+    await page.goto(sessionHref(a.id))
+    await expect(page.getByRole("heading", { name: "Server request failed" })).toBeVisible()
+    const document = await page.locator("html").elementHandle()
+
+    await page.locator(`a[data-titlebar-tab-link][href="${sessionHref(b.id, server)}"]`).click()
+
+    await expectPath(page, sessionHref(b.id, server))
+    await expectSessionTitle(page, b.title)
+    await expect(page.locator('[data-component="composer-editor"]')).toBeEditable()
+    await expect(page.getByRole("heading", { name: "Server request failed" })).toHaveCount(0)
+    expect(await document?.evaluate((element) => element.isConnected)).toBe(true)
+  })
+}
+
+test("session metadata failure can be retried without reloading or looping", async ({ page }, testInfo) => {
+  await page.setViewportSize({ width: 1440, height: 900 })
+  const workspace = await mockWorkspace(page, { name: "Tabs", sessions: [b], seed: { tabs: [a.id, b.id] } })
+  const state = { fail: true, requests: 0 }
+  await page.route(
+    (url) => url.origin === SERVER && url.pathname === `/api/session/${a.id}`,
+    (route) => {
+      state.requests++
+      return route.fulfill(
+        state.fail
+          ? { status: 504, json: { message: "Fixture metadata timeout" } }
+          : { json: { data: currentSession(session({ ...a, directory: workspace.directory })) } },
+      )
+    },
+  )
+  await page.goto(sessionHref(a.id))
+  const retry = page.getByRole("button", { name: "Try again", exact: true })
+  await expect(retry).toBeVisible()
+  const document = await page.locator("html").elementHandle()
+  const before = state.requests
+  await retry.press("Enter")
+  await expect(retry).toBeVisible()
+  await expect.poll(() => state.requests).toBe(before + 1)
+  await expect(retry).toBeInViewport()
+  await page.screenshot({ path: testInfo.outputPath("retry-desktop.png") })
+  expect(state.requests).toBe(before + 1)
+  await page.setViewportSize({ width: 390, height: 720 })
+  await expect(retry).toBeInViewport()
+  await page.screenshot({ path: testInfo.outputPath("retry-narrow.png") })
+
+  state.fail = false
+  await retry.click()
+  await expectSessionTitle(page, a.title)
+  await expect(page.locator('[data-component="composer-editor"]')).toBeEditable()
+  await expect(retry).toHaveCount(0)
+  expect(await document?.evaluate((element) => element.isConnected)).toBe(true)
+})
+
 test("tab strip keeps draft tabs as wide as session tabs and navigates on mouse down", async ({ page }) => {
   const workspace = await mockWorkspace(page, {
     name: "Tabs",

packages/app/src/session/route-error.tsx

@@ -8,7 +8,12 @@ import { useTabs } from "@/shell/tabs/tabs"
 import { isLocalSessionNotFoundError, isSessionNotFoundError } from "@/runtime/server/errors"
 import { ServerUnavailablePanel } from "./server-unavailable-panel"
 
-export function SessionErrorFallback(props: { error: unknown; sessionID?: string; serverKey?: ServerConnection.Key }) {
+export function SessionErrorFallback(props: {
+  error: unknown
+  sessionID?: string
+  serverKey?: ServerConnection.Key
+  onRetry?: () => void
+}) {
   const language = useLanguage()
   const activeServer = useServer()
   const server = useServers()
@@ -36,7 +41,7 @@ export function SessionErrorFallback(props: { error: unknown; sessionID?: string
           (isSessionNotFoundError(props.error, props.sessionID) ||
             isLocalSessionNotFoundError(props.error, props.sessionID))
         }
-        fallback={<ErrorPage error={props.error} />}
+        fallback={<ErrorPage error={props.error} onRetry={props.onRetry} />}
       >
         <div class="flex-1 min-h-0 overflow-hidden">
           <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-4">

packages/app/src/session/route.tsx

@@ -109,9 +109,9 @@ function TargetSessionSettingsCommand() {
 function SessionRouteErrorBoundary(props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>) {
   return (
     <ErrorBoundary
-      fallback={(error) => (
+      fallback={(error, reset) => (
         <SessionStatePanel>
-          <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
+          <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} onRetry={reset} />
         </SessionStatePanel>
       )}
     >

packages/app/src/shell/errors/error.tsx

@@ -250,6 +250,7 @@ function formatError(cause: unknown, t: Translator): string {
 
 interface ErrorPageProps {
   error: unknown
+  onRetry?: () => void
 }
 
 export const ErrorPage: Component<ErrorPageProps> = (props) => {
@@ -354,9 +355,20 @@ export const ErrorPage: Component<ErrorPageProps> = (props) => {
           hideLabel
         />
         <div class="flex flex-row items-center justify-center gap-3 flex-wrap max-w-64">
-          <Button size="large" onClick={platform.restart}>
-            {language.t(platform.platform === "web" ? "error.page.action.reload" : "error.page.action.restart")}
-          </Button>
+          <Show
+            when={props.onRetry}
+            fallback={
+              <Button size="large" onClick={platform.restart}>
+                {language.t(platform.platform === "web" ? "error.page.action.reload" : "error.page.action.restart")}
+              </Button>
+            }
+          >
+            {(retry) => (
+              <Button size="large" onClick={() => retry()()}>
+                {language.t("common.retry")}
+              </Button>
+            )}
+          </Show>
           <Show when={platform.platform === "desktop" && platform.exportDebugLogs}>
             <Button size="large" variant="ghost" onClick={exportDebugLogs}>
               {language.t("error.page.action.exportLogs")}