fix: harden canvas node rendering and workflow mapper preparation

web_src/.eslint-budget-baseline.json

@@ -1,20 +1,18 @@
 {
-  "maxAllowedTotalIssues": 1270,
+  "maxAllowedTotalIssues": 1226,
   "maxAllowedByRule": {
-    "@typescript-eslint/no-explicit-any": 359,
-    "complexity": 273,
-    "@typescript-eslint/consistent-type-imports": 200,
-    "max-statements": 103,
-    "max-lines-per-function": 97,
-    "@typescript-eslint/no-non-null-asserted-optional-chain": 97,
+    "@typescript-eslint/no-explicit-any": 344,
+    "complexity": 270,
+    "@typescript-eslint/consistent-type-imports": 194,
+    "max-statements": 102,
+    "max-lines-per-function": 96,
+    "@typescript-eslint/no-non-null-asserted-optional-chain": 87,
     "react-hooks/exhaustive-deps": 59,
     "max-lines": 26,
     "react-refresh/only-export-components": 25,
     "max-depth": 11,
-    "max-params": 8,
     "jsx-a11y/label-has-associated-control": 6,
-    "react-hooks/rules-of-hooks": 4,
-    "no-case-declarations": 2
+    "max-params": 6
   },
-  "updatedAt": "2026-04-01T15:16:27.934Z"
+  "updatedAt": "2026-04-01T22:39:48.685Z"
 }

web_src/src/lib/canvas-node-fallback.ts

@@ -0,0 +1 @@
+export const CANVAS_NODE_FALLBACK_MESSAGE = "Can't display";

web_src/src/lib/records.ts

@@ -0,0 +1,5 @@
+export type UnknownRecord = Record<string, unknown>;
+
+export function isRecord(value: unknown): value is UnknownRecord {
+  return typeof value === "object" && value !== null;
+}

web_src/src/pages/workflowv2/index.spec.ts

@@ -0,0 +1,150 @@
+import { QueryClient } from "@tanstack/react-query";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ComponentsComponent, ComponentsNode } from "@/api-client";
+import type { CustomFieldRenderer } from "./mappers/types";
+import * as mappers from "./mappers";
+import { createSafeCustomFieldRenderer } from "./mappers/safeMappers";
+import { prepareComponentBaseNode, prepareTriggerNode } from "./lib/canvas-node-preparation";
+import { renderWorkflowNodeCustomField } from "./lib/render-workflow-node-custom-field";
+
+type FallbackComponentData = {
+  renderFallback?: {
+    source: string;
+    message: string;
+  };
+  component: {
+    error?: string;
+    emptyStateProps?: {
+      title?: string;
+    };
+  };
+};
+
+function makeNode(overrides: Partial<ComponentsNode> = {}): ComponentsNode {
+  return {
+    id: "node-1",
+    name: "Broken Component",
+    type: "TYPE_COMPONENT",
+    position: { x: 10, y: 20 },
+    component: {
+      name: "approval",
+    },
+    configuration: {},
+    ...overrides,
+  } as ComponentsNode;
+}
+
+function makeComponent(overrides: Partial<ComponentsComponent> = {}): ComponentsComponent {
+  return {
+    name: "approval",
+    label: "Approval",
+    icon: "hand",
+    color: "orange",
+    outputChannels: [{ name: "default" }],
+    ...overrides,
+  } as ComponentsComponent;
+}
+
+function makeTriggerNode(overrides: Partial<ComponentsNode> = {}): ComponentsNode {
+  return {
+    id: "trigger-1",
+    name: "Incoming Event",
+    type: "TYPE_TRIGGER",
+    position: { x: 0, y: 0 },
+    trigger: {
+      name: "webhook",
+    },
+    configuration: {},
+    ...overrides,
+  } as ComponentsNode;
+}
+
+describe("workflow node preparation resilience", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns a fallback canvas node when component preparation fails", () => {
+    vi.spyOn(mappers, "getComponentAdditionalDataBuilder").mockReturnValue({
+      buildAdditionalData: () => {
+        throw new Error("builder failed");
+      },
+    });
+    vi.spyOn(mappers, "getComponentBaseMapper").mockReturnValue({
+      props: () => {
+        throw new Error("mapper failed");
+      },
+      subtitle: () => "",
+      getExecutionDetails: () => ({}),
+    });
+
+    const result = prepareComponentBaseNode({
+      nodes: [makeNode()],
+      node: makeNode(),
+      components: [makeComponent()],
+      nodeExecutionsMap: {},
+      nodeQueueItemsMap: {},
+      workflowId: "canvas-1",
+      queryClient: new QueryClient(),
+      organizationId: "org-1",
+    });
+
+    const fallbackData = result.data as unknown as FallbackComponentData;
+
+    expect(fallbackData.renderFallback).toEqual({
+      source: "mapper",
+      message: "Can't display",
+    });
+    expect(fallbackData.component.error).toBeUndefined();
+    expect(fallbackData.component.emptyStateProps?.title).toBe("Can't display");
+  });
+
+  it("returns null when a custom field renderer throws so sidebar rendering stays alive", () => {
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    const renderer = createSafeCustomFieldRenderer(
+      {
+        render: () => {
+          throw new Error("custom field failed");
+        },
+      } satisfies CustomFieldRenderer,
+      "approval",
+    );
+
+    const result = renderWorkflowNodeCustomField({
+      renderer,
+      node: makeNode(),
+    });
+
+    expect(result).toBeNull();
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Custom field renderer "approval" threw in render()'),
+      expect.any(Error),
+    );
+    consoleSpy.mockRestore();
+  });
+
+  it("keeps trigger error and warning precedence on node state only", () => {
+    vi.spyOn(mappers, "getTriggerRenderer").mockReturnValue({
+      getTriggerProps: () => ({
+        title: "Webhook",
+        iconSlug: "bolt",
+        metadata: [],
+        error: "renderer error",
+        warning: "renderer warning",
+      }),
+      getRootEventValues: () => ({}),
+      getTitleAndSubtitle: () => ({ title: "Event", subtitle: "" }),
+    });
+
+    const result = prepareTriggerNode(
+      makeTriggerNode(),
+      [{ name: "webhook", label: "Webhook", icon: "bolt" }] as never,
+      {},
+    );
+
+    const triggerData = result.data as { trigger: { error?: string; warning?: string } };
+
+    expect(triggerData.trigger.error).toBeUndefined();
+    expect(triggerData.trigger.warning).toBeUndefined();
+  });
+});