fix: hide app icon if not found (coder#16684)

mtojek · web-flow · commit a2d4b9984e35 · 2025-02-25T10:30:17.000Z
Fixes: coder#14759
diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
@@ -37,6 +37,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 	const preferredPathBase = proxy.preferredPathAppURL;
 	const appsHost = proxy.preferredWildcardHostname;
 	const [fetchingSessionToken, setFetchingSessionToken] = useState(false);
+	const [iconError, setIconError] = useState(false);
 
 	const theme = useTheme();
 	const username = workspace.owner_name;
@@ -67,7 +68,9 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
 	// To avoid bugs in the healthcheck code locking users out of apps, we no
 	// longer block access to apps if they are unhealthy/initializing.
 	let canClick = true;
-	let icon = <BaseIcon app={app} />;
+	let icon = !iconError && (
+		<BaseIcon app={app} onIconPathError={() => setIconError(true)} />
+	);
 
 	let primaryTooltip = "";
 	if (app.health === "initializing") {
diff --git a/site/src/modules/resources/AppLink/BaseIcon.tsx b/site/src/modules/resources/AppLink/BaseIcon.tsx
@@ -4,14 +4,21 @@ import type { FC } from "react";
 
 interface BaseIconProps {
 	app: WorkspaceApp;
+	onIconPathError?: () => void;
 }
 
-export const BaseIcon: FC<BaseIconProps> = ({ app }) => {
+export const BaseIcon: FC<BaseIconProps> = ({ app, onIconPathError }) => {
 	return app.icon ? (
 		<img
 			alt={`${app.display_name} Icon`}
 			src={app.icon}
 			style={{ pointerEvents: "none" }}
+			onError={() => {
+				console.warn(
+					`Application icon for "${app.id}" has invalid source "${app.icon}".`,
+				);
+				onIconPathError?.();
+			}}
 		/>
 	) : (
 		<ComputerIcon />
diff --git a/site/src/pages/WorkspacePage/Workspace.stories.tsx b/site/src/pages/WorkspacePage/Workspace.stories.tsx
@@ -80,6 +80,43 @@ export const Running: Story = {
 	},
 };
 
+export const AppIcons: Story = {
+	args: {
+		...Running.args,
+		workspace: {
+			...Mocks.MockWorkspace,
+			latest_build: {
+				...Mocks.MockWorkspace.latest_build,
+				resources: [
+					{
+						...Mocks.MockWorkspaceResource,
+						agents: [
+							{
+								...Mocks.MockWorkspaceAgent,
+								apps: [
+									{
+										...Mocks.MockWorkspaceApp,
+										id: "test-app-1",
+										slug: "test-app-1",
+										display_name: "Default Icon",
+									},
+									{
+										...Mocks.MockWorkspaceApp,
+										id: "test-app-2",
+										slug: "test-app-2",
+										display_name: "Broken Icon",
+										icon: "/foobar/broken.png",
+									},
+								],
+							},
+						],
+					},
+				],
+			},
+		},
+	},
+};
+
 export const Favorite: Story = {
 	args: {
 		...Running.args,
