diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue index 69f79baad0..27be55962c 100644 --- a/src/components/TopMenuSection.vue +++ b/src/components/TopMenuSection.vue @@ -36,7 +36,14 @@
@@ -168,6 +175,7 @@ import { isDesktop } from '@/platform/distribution/types' import { useConflictAcknowledgment } from '@/workbench/extensions/manager/composables/useConflictAcknowledgment' import { useManagerState } from '@/workbench/extensions/manager/composables/useManagerState' import { ManagerTab } from '@/workbench/extensions/manager/types/comfyManagerTypes' +import { cn } from '@/utils/tailwindUtil' const settingStore = useSettingStore() const workspaceStore = useWorkspaceStore() @@ -252,6 +260,8 @@ const shouldShowRedDot = computed((): boolean => { return shouldShowConflictRedDot.value }) +const { hasAnyError } = storeToRefs(executionStore) + // Right side panel toggle const { isOpen: isRightSidePanelOpen } = storeToRefs(rightSidePanelStore) const rightSidePanelTooltipConfig = computed(() => diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue index cdf6b891fd..3b36a62996 100644 --- a/src/components/rightSidePanel/RightSidePanel.vue +++ b/src/components/rightSidePanel/RightSidePanel.vue @@ -33,6 +33,7 @@ import { useFlatAndCategorizeSelectedItems } from './shared' import SubgraphEditor from './subgraph/SubgraphEditor.vue' +import TabErrors from './errors/TabErrors.vue' const canvasStore = useCanvasStore() const executionStore = useExecutionStore() @@ -40,6 +41,8 @@ const rightSidePanelStore = useRightSidePanelStore() const settingStore = useSettingStore() const { t } = useI18n() +const { hasAnyError } = storeToRefs(executionStore) + const { findParentGroup } = useGraphHierarchy() const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore) @@ -102,7 +105,10 @@ const selectedNodeErrors = computed(() => const tabs = computed(() => { const list: RightSidePanelTabList = [] - if (selectedNodeErrors.value.length) { + if ( + selectedNodeErrors.value.length && + settingStore.get('Comfy.RightSidePanel.ShowErrorsTab') + ) { list.push({ label: () => t('g.error'), value: 'error', @@ -110,6 +116,18 @@ const tabs = computed(() => { }) } + if ( + hasAnyError.value && + !hasSelection.value && + settingStore.get('Comfy.RightSidePanel.ShowErrorsTab') + ) { + list.push({ + label: () => t('rightSidePanel.errors'), + value: 'errors', + icon: 'icon-[lucide--octagon-alert] bg-node-stroke-error ml-1' + }) + } + list.push({ label: () => flattedItems.value.length > 1 @@ -298,7 +316,8 @@ function handleProxyWidgetsUpdate(value: ProxyWidgetsProperty) {
diff --git a/src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts b/src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts new file mode 100644 index 0000000000..44e264aeaa --- /dev/null +++ b/src/components/rightSidePanel/errors/ErrorNodeCard.stories.ts @@ -0,0 +1,162 @@ +import type { Meta, StoryObj } from '@storybook/vue3-vite' +import ErrorNodeCard from './ErrorNodeCard.vue' +import type { ErrorCardData } from './types' + +/** + * ErrorNodeCard displays a single error card inside the error tab. + * It shows the node header (ID badge, title, action buttons) + * and the list of error items (message, traceback, copy button). + */ +const meta: Meta = { + title: 'RightSidePanel/Errors/ErrorNodeCard', + component: ErrorNodeCard, + parameters: { + layout: 'centered' + }, + argTypes: { + showNodeIdBadge: { control: 'boolean' } + }, + decorators: [ + (story) => ({ + components: { story }, + template: + '
' + }) + ] +} + +export default meta +type Story = StoryObj + +const singleErrorCard: ErrorCardData = { + id: 'node-10', + title: 'CLIPTextEncode', + nodeId: '10', + nodeTitle: 'CLIP Text Encode (Prompt)', + isSubgraphNode: false, + errors: [ + { + message: 'Required input "text" is missing.', + details: 'Input: text\nExpected: STRING' + } + ] +} + +const multipleErrorsCard: ErrorCardData = { + id: 'node-24', + title: 'VAEDecode', + nodeId: '24', + nodeTitle: 'VAE Decode', + isSubgraphNode: false, + errors: [ + { + message: 'Required input "samples" is missing.', + details: '' + }, + { + message: 'Value "NaN" is not a valid number for "strength".', + details: 'Expected: FLOAT [0.0 .. 1.0]' + } + ] +} + +const runtimeErrorCard: ErrorCardData = { + id: 'exec-45', + title: 'KSampler', + nodeId: '45', + nodeTitle: 'KSampler', + isSubgraphNode: false, + errors: [ + { + message: 'OutOfMemoryError: CUDA out of memory. Tried to allocate 1.2GB.', + details: [ + 'Traceback (most recent call last):', + ' File "ksampler.py", line 142, in sample', + ' samples = model.apply(latent)', + 'RuntimeError: CUDA out of memory.' + ].join('\n'), + isRuntimeError: true + } + ] +} + +const subgraphErrorCard: ErrorCardData = { + id: 'node-3:15', + title: 'KSampler', + nodeId: '3:15', + nodeTitle: 'Nested KSampler', + isSubgraphNode: true, + errors: [ + { + message: 'Latent input is required.', + details: '' + } + ] +} + +const promptOnlyCard: ErrorCardData = { + id: '__prompt__', + title: 'Prompt has no outputs.', + errors: [ + { + message: + 'The workflow does not contain any output nodes (e.g. Save Image, Preview Image) to produce a result.' + } + ] +} + +/** Single validation error with node ID badge visible */ +export const WithNodeIdBadge: Story = { + args: { + card: singleErrorCard, + showNodeIdBadge: true + } +} + +/** Single validation error without node ID badge */ +export const WithoutNodeIdBadge: Story = { + args: { + card: singleErrorCard, + showNodeIdBadge: false + } +} + +/** Subgraph node error — shows "Enter subgraph" button */ +export const WithEnterSubgraphButton: Story = { + args: { + card: subgraphErrorCard, + showNodeIdBadge: true + } +} + +/** Regular node error — no "Enter subgraph" button */ +export const WithoutEnterSubgraphButton: Story = { + args: { + card: singleErrorCard, + showNodeIdBadge: true + } +} + +/** Multiple validation errors on one node */ +export const MultipleErrors: Story = { + args: { + card: multipleErrorsCard, + showNodeIdBadge: true + } +} + +/** Runtime execution error with full traceback */ +export const RuntimeError: Story = { + args: { + card: runtimeErrorCard, + showNodeIdBadge: true + } +} + +/** Prompt-level error (no node header) */ +export const PromptError: Story = { + args: { + card: promptOnlyCard, + showNodeIdBadge: false + } +} diff --git a/src/components/rightSidePanel/errors/ErrorNodeCard.vue b/src/components/rightSidePanel/errors/ErrorNodeCard.vue new file mode 100644 index 0000000000..815f622fec --- /dev/null +++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue @@ -0,0 +1,110 @@ + + + diff --git a/src/components/rightSidePanel/errors/TabErrors.test.ts b/src/components/rightSidePanel/errors/TabErrors.test.ts new file mode 100644 index 0000000000..6d3abc7023 --- /dev/null +++ b/src/components/rightSidePanel/errors/TabErrors.test.ts @@ -0,0 +1,218 @@ +import { mount } from '@vue/test-utils' +import { createTestingPinia } from '@pinia/testing' +import PrimeVue from 'primevue/config' +import { beforeEach, describe, expect, it, vi } from 'vitest' +import { createI18n } from 'vue-i18n' +import TabErrors from './TabErrors.vue' + +// Mock dependencies +vi.mock('@/scripts/app', () => ({ + app: { + rootGraph: { + serialize: vi.fn(() => ({})), + getNodeById: vi.fn() + } + } +})) + +vi.mock('@/utils/graphTraversalUtil', () => ({ + getNodeByExecutionId: vi.fn(), + forEachNode: vi.fn() +})) + +vi.mock('@/composables/useCopyToClipboard', () => ({ + useCopyToClipboard: vi.fn(() => ({ + copyToClipboard: vi.fn() + })) +})) + +vi.mock('@/services/litegraphService', () => ({ + useLitegraphService: vi.fn(() => ({ + fitView: vi.fn() + })) +})) + +describe('TabErrors.vue', () => { + let i18n: ReturnType + + beforeEach(() => { + i18n = createI18n({ + legacy: false, + locale: 'en', + messages: { + en: { + g: { + workflow: 'Workflow', + copy: 'Copy' + }, + rightSidePanel: { + noErrors: 'No errors', + noneSearchDesc: 'No results found', + promptErrors: { + prompt_no_outputs: { + desc: 'Prompt has no outputs' + } + } + } + } + } + }) + }) + + function mountComponent(initialState = {}) { + return mount(TabErrors, { + global: { + plugins: [ + PrimeVue, + i18n, + createTestingPinia({ + createSpy: vi.fn, + initialState + }) + ], + stubs: { + FormSearchInput: { + template: + '' + }, + PropertiesAccordionItem: { + template: '
' + }, + Button: { + template: '' + } + } + } + }) + } + + it('renders "no errors" state when store is empty', () => { + const wrapper = mountComponent() + expect(wrapper.text()).toContain('No errors') + }) + + it('renders prompt-level errors (Group title = error message)', async () => { + const wrapper = mountComponent({ + execution: { + lastPromptError: { + type: 'prompt_no_outputs', + message: 'Server Error: No outputs', + details: 'Error details' + } + } + }) + + // Group title should be the raw message from store + expect(wrapper.text()).toContain('Server Error: No outputs') + // Item message should be localized desc + expect(wrapper.text()).toContain('Prompt has no outputs') + // Details should not be rendered for prompt errors + expect(wrapper.text()).not.toContain('Error details') + }) + + it('renders node validation errors grouped by class_type', async () => { + const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil') + vi.mocked(getNodeByExecutionId).mockReturnValue({ + title: 'CLIP Text Encode' + } as ReturnType) + + const wrapper = mountComponent({ + execution: { + lastNodeErrors: { + '6': { + class_type: 'CLIPTextEncode', + errors: [ + { message: 'Required input is missing', details: 'Input: text' } + ] + } + } + } + }) + + expect(wrapper.text()).toContain('CLIPTextEncode') + expect(wrapper.text()).toContain('#6') + expect(wrapper.text()).toContain('CLIP Text Encode') + expect(wrapper.text()).toContain('Required input is missing') + }) + + it('renders runtime execution errors from WebSocket', async () => { + const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil') + vi.mocked(getNodeByExecutionId).mockReturnValue({ + title: 'KSampler' + } as ReturnType) + + const wrapper = mountComponent({ + execution: { + lastExecutionError: { + prompt_id: 'abc', + node_id: '10', + node_type: 'KSampler', + exception_message: 'Out of memory', + exception_type: 'RuntimeError', + traceback: ['Line 1', 'Line 2'], + timestamp: Date.now() + } + } + }) + + expect(wrapper.text()).toContain('KSampler') + expect(wrapper.text()).toContain('#10') + expect(wrapper.text()).toContain('RuntimeError: Out of memory') + expect(wrapper.text()).toContain('Line 1') + }) + + it('filters errors based on search query', async () => { + const { getNodeByExecutionId } = await import('@/utils/graphTraversalUtil') + vi.mocked(getNodeByExecutionId).mockReturnValue(null) + + const wrapper = mountComponent({ + execution: { + lastNodeErrors: { + '1': { + class_type: 'CLIPTextEncode', + errors: [{ message: 'Missing text input' }] + }, + '2': { + class_type: 'KSampler', + errors: [{ message: 'Out of memory' }] + } + } + } + }) + + expect(wrapper.text()).toContain('CLIPTextEncode') + expect(wrapper.text()).toContain('KSampler') + + const searchInput = wrapper.find('input') + await searchInput.setValue('Missing text input') + + expect(wrapper.text()).toContain('CLIPTextEncode') + expect(wrapper.text()).not.toContain('KSampler') + }) + + it('calls copyToClipboard when copy button is clicked', async () => { + const { useCopyToClipboard } = + await import('@/composables/useCopyToClipboard') + const mockCopy = vi.fn() + vi.mocked(useCopyToClipboard).mockReturnValue({ copyToClipboard: mockCopy }) + + const wrapper = mountComponent({ + execution: { + lastNodeErrors: { + '1': { + class_type: 'TestNode', + errors: [{ message: 'Test message', details: 'Test details' }] + } + } + } + }) + + // Find the copy button (rendered inside ErrorNodeCard) + const copyButtons = wrapper.findAll('button') + const copyButton = copyButtons.find((btn) => btn.text().includes('Copy')) + expect(copyButton).toBeTruthy() + await copyButton!.trigger('click') + + expect(mockCopy).toHaveBeenCalledWith('Test message\n\nTest details') + }) +}) diff --git a/src/components/rightSidePanel/errors/TabErrors.vue b/src/components/rightSidePanel/errors/TabErrors.vue new file mode 100644 index 0000000000..836d683d73 --- /dev/null +++ b/src/components/rightSidePanel/errors/TabErrors.vue @@ -0,0 +1,167 @@ + + + diff --git a/src/components/rightSidePanel/errors/types.ts b/src/components/rightSidePanel/errors/types.ts new file mode 100644 index 0000000000..b5729fd032 --- /dev/null +++ b/src/components/rightSidePanel/errors/types.ts @@ -0,0 +1,21 @@ +export interface ErrorItem { + message: string + details?: string + isRuntimeError?: boolean +} + +export interface ErrorCardData { + id: string + title: string + nodeId?: string + nodeTitle?: string + graphNodeId?: string + isSubgraphNode?: boolean + errors: ErrorItem[] +} + +export interface ErrorGroup { + title: string + cards: ErrorCardData[] + priority: number +} diff --git a/src/components/rightSidePanel/errors/useErrorGroups.ts b/src/components/rightSidePanel/errors/useErrorGroups.ts new file mode 100644 index 0000000000..9c83829af6 --- /dev/null +++ b/src/components/rightSidePanel/errors/useErrorGroups.ts @@ -0,0 +1,236 @@ +import { computed } from 'vue' +import type { Ref } from 'vue' +import Fuse from 'fuse.js' +import type { IFuseOptions } from 'fuse.js' + +import { useExecutionStore } from '@/stores/executionStore' +import { app } from '@/scripts/app' +import { getNodeByExecutionId } from '@/utils/graphTraversalUtil' +import { resolveNodeDisplayName } from '@/utils/nodeTitleUtil' +import { st } from '@/i18n' +import type { ErrorCardData, ErrorGroup } from './types' +import { isNodeExecutionId } from '@/types/nodeIdentification' + +interface GroupEntry { + priority: number + cards: Map +} + +interface ErrorSearchItem { + groupIndex: number + cardIndex: number + searchableNodeId: string + searchableNodeTitle: string + searchableMessage: string + searchableDetails: string +} + +const KNOWN_PROMPT_ERROR_TYPES = new Set(['prompt_no_outputs', 'no_prompt']) + +function resolveNodeInfo(nodeId: string): { + title: string + graphNodeId: string | undefined +} { + const graphNode = getNodeByExecutionId(app.rootGraph, nodeId) + return { + title: resolveNodeDisplayName(graphNode, { + emptyLabel: '', + untitledLabel: '', + st + }), + graphNodeId: graphNode ? String(graphNode.id) : undefined + } +} + +function getOrCreateGroup( + groupsMap: Map, + title: string, + priority = 1 +): Map { + let entry = groupsMap.get(title) + if (!entry) { + entry = { priority, cards: new Map() } + groupsMap.set(title, entry) + } + return entry.cards +} + +function processPromptError( + groupsMap: Map, + executionStore: ReturnType, + t: (key: string) => string +) { + if (!executionStore.lastPromptError) return + + const error = executionStore.lastPromptError + const groupTitle = error.message + const cards = getOrCreateGroup(groupsMap, groupTitle, 0) + const isKnown = KNOWN_PROMPT_ERROR_TYPES.has(error.type) + + cards.set('__prompt__', { + id: '__prompt__', + title: groupTitle, + errors: [ + { + message: isKnown + ? t(`rightSidePanel.promptErrors.${error.type}.desc`) + : error.message + } + ] + }) +} + +function processNodeErrors( + groupsMap: Map, + executionStore: ReturnType +) { + if (!executionStore.lastNodeErrors) return + + for (const [nodeId, nodeError] of Object.entries( + executionStore.lastNodeErrors + )) { + const cards = getOrCreateGroup(groupsMap, nodeError.class_type, 1) + if (!cards.has(nodeId)) { + const nodeInfo = resolveNodeInfo(nodeId) + cards.set(nodeId, { + id: `node-${nodeId}`, + title: nodeError.class_type, + nodeId, + nodeTitle: nodeInfo.title, + graphNodeId: nodeInfo.graphNodeId, + isSubgraphNode: isNodeExecutionId(nodeId), + errors: [] + }) + } + const card = cards.get(nodeId) + if (!card) continue + card.errors.push( + ...nodeError.errors.map((e) => ({ + message: e.message, + details: e.details ?? undefined + })) + ) + } +} + +function processExecutionError( + groupsMap: Map, + executionStore: ReturnType +) { + if (!executionStore.lastExecutionError) return + + const e = executionStore.lastExecutionError + const nodeId = String(e.node_id) + const cards = getOrCreateGroup(groupsMap, e.node_type, 1) + + if (!cards.has(nodeId)) { + const nodeInfo = resolveNodeInfo(nodeId) + cards.set(nodeId, { + id: `exec-${nodeId}`, + title: e.node_type, + nodeId, + nodeTitle: nodeInfo.title, + graphNodeId: nodeInfo.graphNodeId, + isSubgraphNode: isNodeExecutionId(nodeId), + errors: [] + }) + } + const card = cards.get(nodeId) + if (!card) return + card.errors.push({ + message: `${e.exception_type}: ${e.exception_message}`, + details: e.traceback.join('\n'), + isRuntimeError: true + }) +} + +function toSortedGroups(groupsMap: Map): ErrorGroup[] { + return Array.from(groupsMap.entries()) + .map(([title, groupData]) => ({ + title, + cards: Array.from(groupData.cards.values()), + priority: groupData.priority + })) + .sort((a, b) => { + if (a.priority !== b.priority) return a.priority - b.priority + return a.title.localeCompare(b.title) + }) +} + +function buildErrorGroups( + executionStore: ReturnType, + t: (key: string) => string +): ErrorGroup[] { + const groupsMap = new Map() + + processPromptError(groupsMap, executionStore, t) + processNodeErrors(groupsMap, executionStore) + processExecutionError(groupsMap, executionStore) + + return toSortedGroups(groupsMap) +} + +function searchErrorGroups(groups: ErrorGroup[], query: string): ErrorGroup[] { + if (!query) return groups + + const searchableList: ErrorSearchItem[] = [] + for (let gi = 0; gi < groups.length; gi++) { + const group = groups[gi]! + for (let ci = 0; ci < group.cards.length; ci++) { + const card = group.cards[ci]! + searchableList.push({ + groupIndex: gi, + cardIndex: ci, + searchableNodeId: card.nodeId ?? '', + searchableNodeTitle: card.nodeTitle ?? '', + searchableMessage: card.errors.map((e) => e.message).join(' '), + searchableDetails: card.errors.map((e) => e.details ?? '').join(' ') + }) + } + } + + const fuseOptions: IFuseOptions = { + keys: [ + { name: 'searchableNodeId', weight: 0.3 }, + { name: 'searchableNodeTitle', weight: 0.3 }, + { name: 'searchableMessage', weight: 0.3 }, + { name: 'searchableDetails', weight: 0.1 } + ], + threshold: 0.3 + } + + const fuse = new Fuse(searchableList, fuseOptions) + const results = fuse.search(query) + + const matchedCardKeys = new Set( + results.map((r) => `${r.item.groupIndex}:${r.item.cardIndex}`) + ) + + return groups + .map((group, gi) => ({ + ...group, + cards: group.cards.filter((_, ci) => matchedCardKeys.has(`${gi}:${ci}`)) + })) + .filter((group) => group.cards.length > 0) +} + +export function useErrorGroups( + searchQuery: Ref, + t: (key: string) => string +) { + const executionStore = useExecutionStore() + + const errorGroups = computed(() => + buildErrorGroups(executionStore, t) + ) + + const filteredGroups = computed(() => { + const query = searchQuery.value.trim() + return searchErrorGroups(errorGroups.value, query) + }) + + return { + errorGroups, + filteredGroups + } +} diff --git a/src/components/rightSidePanel/parameters/SectionWidgets.vue b/src/components/rightSidePanel/parameters/SectionWidgets.vue index 1ecac869f3..5e2e77ecd1 100644 --- a/src/components/rightSidePanel/parameters/SectionWidgets.vue +++ b/src/components/rightSidePanel/parameters/SectionWidgets.vue @@ -12,6 +12,10 @@ import type { } from '@/lib/litegraph/src/litegraph' import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets' import { useCanvasStore } from '@/renderer/core/canvas/canvasStore' +import { useExecutionStore } from '@/stores/executionStore' +import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore' +import { useSettingStore } from '@/platform/settings/settingStore' +import { cn } from '@/utils/tailwindUtil' import { useNodeDefStore } from '@/stores/nodeDefStore' import { getWidgetDefaultValue } from '@/utils/widgetUtil' import type { WidgetValue } from '@/utils/widgetUtil' @@ -60,6 +64,8 @@ watchEffect(() => (widgets.value = widgetsProp)) provide(HideLayoutFieldKey, true) const canvasStore = useCanvasStore() +const executionStore = useExecutionStore() +const rightSidePanelStore = useRightSidePanelStore() const nodeDefStore = useNodeDefStore() const { t } = useI18n() @@ -104,6 +110,11 @@ const targetNode = computed(() => { return allSameNode ? widgets.value[0].node : null }) +const nodeHasError = computed(() => { + if (canvasStore.selectedItems.length > 0 || !targetNode.value) return false + return executionStore.activeGraphErrorNodeIds.has(String(targetNode.value.id)) +}) + const parentGroup = computed(() => { if (!targetNode.value || !getNodeParentGroup) return null return getNodeParentGroup(targetNode.value) @@ -122,6 +133,13 @@ function handleLocateNode() { } } +function navigateToErrorTab() { + if (!targetNode.value) return + if (!useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) return + rightSidePanelStore.focusedErrorNodeId = String(targetNode.value.id) + rightSidePanelStore.openPanel('errors') +} + function writeWidgetValue(widget: IBaseWidget, value: WidgetValue) { widget.value = value widget.callback?.(value) @@ -162,9 +180,20 @@ defineExpose({ :tooltip >