fix: handle health status when displaying task apps (#18675)

hugodutka · web-flow · commit 22c5e84a7eb4 · 2025-06-30T20:46:28.000+02:00
Previously, we displayed apps in iframes on the task page without waiting for them to initialize. This would result in 502 errors shown to the user. This PR makes sure that we only display the app after it initializes. ### Before <img width="1920" alt="Screenshot 2025-06-30 at 14 59 07 (2)" src="https://github.com/user-attachments/assets/63564ac9-abce-4a0c-b58e-b988772fae82" />
diff --git a/site/src/pages/TaskPage/TaskAppIframe.tsx b/site/src/pages/TaskPage/TaskAppIframe.tsx
@@ -6,6 +6,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
+import { Spinner } from "components/Spinner/Spinner";
 import { EllipsisVertical, ExternalLinkIcon, HouseIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
@@ -97,14 +98,31 @@ export const TaskAppIFrame: FC<TaskAppIFrameProps> = ({
 				</div>
 			)}
 
-			<iframe
-				ref={frameRef}
-				src={frameSrc}
-				title={link.label}
-				loading="eager"
-				className={"w-full h-full border-0"}
-				allow="clipboard-read; clipboard-write"
-			/>
+			{app.health === "healthy" ||
+			app.health === "disabled" ||
+			app.health === "unhealthy" ? (
+				<iframe
+					ref={frameRef}
+					src={frameSrc}
+					title={link.label}
+					loading="eager"
+					className={"w-full h-full border-0"}
+					allow="clipboard-read; clipboard-write"
+				/>
+			) : app.health === "initializing" ? (
+				<div className="w-full h-full flex items-center justify-center">
+					<Spinner loading />
+				</div>
+			) : (
+				<div className="w-full h-full flex flex-col items-center justify-center">
+					<h3 className="m-0 font-medium text-content-primary text-base">
+						Error
+					</h3>
+					<span className="text-content-secondary text-sm">
+						The app is in an unknown health state.
+					</span>
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/site/src/pages/TaskPage/TaskApps.tsx b/site/src/pages/TaskPage/TaskApps.tsx
@@ -7,6 +7,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { ChevronDownIcon, LayoutGridIcon } from "lucide-react";
 import { useAppLink } from "modules/apps/useAppLink";
 import type { Task } from "modules/tasks/tasks";
@@ -165,6 +166,13 @@ const TaskAppTab: FC<TaskAppTabProps> = ({ task, app, active, onClick }) => {
 			<RouterLink to={link.href} onClick={onClick}>
 				{app.icon ? <ExternalImage src={app.icon} /> : <LayoutGridIcon />}
 				{link.label}
+				{app.health === "unhealthy" && (
+					<InfoTooltip
+						title="This app is unhealthy."
+						message="The health check failed."
+						type="warning"
+					/>
+				)}
 			</RouterLink>
 		</Button>
 	);
diff --git a/site/src/pages/TaskPage/TaskPage.stories.tsx b/site/src/pages/TaskPage/TaskPage.stories.tsx
@@ -176,6 +176,33 @@ export const SidebarAppHealthy: Story = {
 	},
 };
 
+const mainAppHealthStory = (health: WorkspaceApp["health"]) => ({
+	beforeEach: () => {
+		spyOn(data, "fetchTask").mockResolvedValue({
+			prompt: "Create competitors page",
+			workspace: {
+				...MockWorkspace,
+				latest_build: {
+					...MockWorkspace.latest_build,
+					resources: mockResources({
+						claudeCodeAppOverrides: {
+							health,
+						},
+					}),
+				},
+			},
+		});
+	},
+});
+
+export const MainAppHealthy: Story = mainAppHealthStory("healthy");
+export const MainAppInitializing: Story = mainAppHealthStory("initializing");
+export const MainAppUnhealthy: Story = mainAppHealthStory("unhealthy");
+export const MainAppHealthDisabled: Story = mainAppHealthStory("disabled");
+export const MainAppHealthUnknown: Story = mainAppHealthStory(
+	"unknown" as unknown as WorkspaceApp["health"],
+);
+
 export const BuildNoAITask: Story = {
 	beforeEach: () => {
 		spyOn(data, "fetchTask").mockImplementation(() => {
