fix: Show error state in ActorRun widget instead of loading (#571)

* fix: Show error state in ActorRun widget instead of perpetual loading

When call-actor returns an isError tool result, the widget now displays
a "Failed" badge with a cleaned error message instead of showing
"Loading Actor run data ..." forever. Error text is sanitized to strip
trailing JSON blobs and model-facing instructions.

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

* fix: Update error handling in ActorRun widget to use CallToolResult type

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jirispilka

src/web/src/pages/ActorRun/ActorRun.tsx

@@ -6,7 +6,9 @@ import { CheckIcon, CrossIcon, LoaderIcon } from "@apify/ui-icons";
 import { useMcpApp } from "../../context/mcp-app-context";
 import { useWidgetProps } from "../../hooks/use-widget-props";
 import { formatDuration, formatTimestamp, humanizeActorName } from "../../utils/formatting";
+import { extractActorRunErrorMessage } from "../../utils/actor-run";
 import { TableSkeleton } from "./ActorRun.skeleton";
+
 interface ActorRunData {
     runId: string;
     actorName: string;
@@ -305,6 +307,7 @@ export const ActorRun: React.FC = () => {
     const toolOutput = useWidgetProps<ToolOutput>();
     const toolResponseMetadata = (toolResult?._meta ?? null) as Record<string, unknown> | null;
     const stableRunId = getRunIdFromUrl();
+    const toolErrorMessage = extractActorRunErrorMessage(toolResult);
 
     const [runData, setRunData] = useState<ActorRunData | null>(null);
     const [pictureUrl, setPictureUrl] = useState<string | undefined>(undefined);
@@ -464,9 +467,20 @@ export const ActorRun: React.FC = () => {
             <WidgetLayout>
                 <Container>
                     <EmptyStateContainer>
-                        <Text type="body" size="small" style={{ color: theme.color.neutral.textMuted }}>
-                            Loading Actor run data ...
-                        </Text>
+                        {toolErrorMessage ? (
+                            <>
+                                <Badge variant="danger" size="small" LeadingIcon={CrossIcon}>
+                                    Failed
+                                </Badge>
+                                <Text type="body" size="small" style={{ color: theme.color.neutral.text }}>
+                                    {toolErrorMessage}
+                                </Text>
+                            </>
+                        ) : (
+                            <Text type="body" size="small" style={{ color: theme.color.neutral.textMuted }}>
+                                Loading Actor run data ...
+                            </Text>
+                        )}
                     </EmptyStateContainer>
                 </Container>
             </WidgetLayout>

src/web/src/utils/actor-run.ts

@@ -0,0 +1,33 @@
+import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
+
+/**
+ * Strip noise that is meant for the model, not the end-user:
+ *  - trailing JSON blobs like `{"statusCode":404}`
+ *  - "Please verify …" / "You can search …" follow-up lines
+ */
+function cleanErrorText(raw: string): string {
+    // Take only the first meaningful line (the rest is model guidance)
+    const firstLine = raw.split("\n")[0].trim();
+    // Strip trailing JSON blob (e.g. `{"statusCode":404}`)
+    return firstLine.replace(/\s*\{[^}]*}\s*\.?$/, "").trim();
+}
+
+export function extractActorRunErrorMessage(toolResult: CallToolResult | null | undefined): string | null {
+    if (!toolResult?.isError) {
+        return null;
+    }
+
+    for (const item of toolResult.content) {
+        if (typeof item !== "object" || item === null || !("text" in item)) {
+            continue;
+        }
+
+        const text = item.text;
+        if (typeof text === "string" && text.trim()) {
+            const cleaned = cleanErrorText(text);
+            return cleaned || text.trim();
+        }
+    }
+
+    return "Actor run failed before it could start.";
+}

tests/unit/widget.actor_run.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+
+import { extractActorRunErrorMessage } from '../../src/web/src/utils/actor-run.js';
+
+describe('extractActorRunErrorMessage', () => {
+    it('strips trailing JSON blob and model instructions from error text', () => {
+        const message = extractActorRunErrorMessage({
+            isError: true,
+            content: [
+                {
+                    type: 'text',
+                    text: [
+                        'Failed to call Actor \'apify/rag-web-browser\': Actor not found {"statusCode":404}.',
+                        'Please verify the Actor name, input parameters, and ensure the Actor exists.',
+                        'You can search for available Actors using the tool: store-search.',
+                    ].join('\n'),
+                },
+            ],
+        });
+
+        expect(message).toBe("Failed to call Actor 'apify/rag-web-browser': Actor not found");
+    });
+
+    it('returns cleaned first line for single-line errors with JSON blob', () => {
+        const message = extractActorRunErrorMessage({
+            isError: true,
+            content: [
+                { type: 'text', text: 'SFAIL Actor not found or definition is not available {"statusCode":404}' },
+            ],
+        });
+
+        expect(message).toBe('SFAIL Actor not found or definition is not available');
+    });
+
+    it('returns null for non-error tool results', () => {
+        const message = extractActorRunErrorMessage({
+            isError: false,
+            content: [
+                { type: 'text', text: 'Started Actor "apify/rag-web-browser"' },
+            ],
+        });
+
+        expect(message).toBeNull();
+    });
+
+    it('returns a fallback message when the error response has no text content', () => {
+        const message = extractActorRunErrorMessage({
+            isError: true,
+            content: [{ type: 'image', data: 'abc123', mimeType: 'image/png' }],
+        });
+
+        expect(message).toBe('Actor run failed before it could start.');
+    });
+
+    it('returns plain error text when there is no JSON blob to strip', () => {
+        const message = extractActorRunErrorMessage({
+            isError: true,
+            content: [
+                { type: 'text', text: 'Failed to call Actor: connection timeout' },
+            ],
+        });
+
+        expect(message).toBe('Failed to call Actor: connection timeout');
+    });
+});