mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-09 23:20:04 +00:00
feat: node-specific error tab with selection-aware grouping and error overlay (#8956)
## Summary Enhances the error panel with node-specific views: single-node selection shows errors grouped by message in compact mode, container nodes (subgraph/group) expose child errors via a badge and "See Error" button, and a floating ErrorOverlay appears after execution failure with a deduplicated summary and quick navigation to the errors tab. ## Changes - **Consolidate error tab**: Remove `TabError.vue`; merge all error display into `TabErrors.vue` and drop the separate `error` tab type from `rightSidePanelStore` - **Selection-aware grouping**: Single-node selection regroups errors by message (not `class_type`) and renders `ErrorNodeCard` in compact mode - **Container node support**: Detect child-node errors in subgraph/group nodes via execution ID prefix matching; show error badge and "See Error" button in `SectionWidgets` - **ErrorOverlay**: New floating card shown after execution failure with deduplicated error messages, "Dismiss" and "See Errors" actions; `isErrorOverlayOpen` / `showErrorOverlay` / `dismissErrorOverlay` added to `executionStore` - **Refactor**: Centralize error ID collection in `executionStore` (`allErrorExecutionIds`, `hasInternalErrorForNode`); split `errorGroups` into `allErrorGroups` (unfiltered) and `tabErrorGroups` (selection-filtered); move `ErrorOverlay` business logic into `useErrorGroups` ## Review Focus - `useErrorGroups.ts`: split into `allErrorGroups` / `tabErrorGroups` and the new `filterBySelection` parameter flow - `executionStore.ts`: `hasInternalErrorForNode` helper and `allErrorExecutionIds` computed - `ErrorOverlay.vue`: integration with `executionStore` overlay state and `useErrorGroups` ## Screenshots <img width="853" height="461" alt="image" src="https://github.com/user-attachments/assets/a49ab620-4209-4ae7-b547-fba13da0c633" /> <img width="854" height="203" alt="image" src="https://github.com/user-attachments/assets/c119da54-cd78-4e7a-8b7a-456cfd348f1d" /> <img width="497" height="361" alt="image" src="https://github.com/user-attachments/assets/74b16161-cf45-454b-ae60-24922fe36931" /> --------- Co-authored-by: GitHub Action <action@github.com> Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
@@ -831,7 +831,20 @@ export class ComfyApi extends EventTarget {
|
||||
})
|
||||
|
||||
if (res.status !== 200) {
|
||||
throw new PromptExecutionError(await res.json())
|
||||
const text = await res.text()
|
||||
let errorResponse
|
||||
try {
|
||||
errorResponse = JSON.parse(text)
|
||||
} catch {
|
||||
errorResponse = {
|
||||
error: {
|
||||
type: 'server_error',
|
||||
message: `${res.status} ${res.statusText}`,
|
||||
details: text
|
||||
}
|
||||
}
|
||||
}
|
||||
throw new PromptExecutionError(errorResponse)
|
||||
}
|
||||
|
||||
return await res.json()
|
||||
|
||||
@@ -71,7 +71,6 @@ import { SYSTEM_NODE_DEFS, useNodeDefStore } from '@/stores/nodeDefStore'
|
||||
import { useNodeReplacementStore } from '@/platform/nodeReplacement/nodeReplacementStore'
|
||||
import { useSubgraphStore } from '@/stores/subgraphStore'
|
||||
import { useWidgetStore } from '@/stores/widgetStore'
|
||||
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
|
||||
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
||||
import type { ComfyExtension, MissingNodeType } from '@/types/comfy'
|
||||
import type { ExtensionManager } from '@/types/extensionTypes'
|
||||
@@ -713,13 +712,11 @@ export class ComfyApp {
|
||||
isInsufficientCredits: true
|
||||
})
|
||||
}
|
||||
} else if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
|
||||
useExecutionStore().showErrorOverlay()
|
||||
} else {
|
||||
useDialogService().showExecutionErrorDialog(detail)
|
||||
}
|
||||
if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
|
||||
this.canvas.deselectAll()
|
||||
useRightSidePanelStore().openPanel('errors')
|
||||
}
|
||||
this.canvas.draw(true, true)
|
||||
})
|
||||
|
||||
@@ -1465,7 +1462,10 @@ export class ComfyApp {
|
||||
{}) as MissingNodeTypeExtraInfo
|
||||
const missingNodeType = createMissingNodeTypeFromError(extraInfo)
|
||||
this.showMissingNodesError([missingNodeType])
|
||||
} else {
|
||||
} else if (
|
||||
!useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab') ||
|
||||
!(error instanceof PromptExecutionError)
|
||||
) {
|
||||
useDialogService().showErrorDialog(error, {
|
||||
title: t('errorDialog.promptExecutionError'),
|
||||
reportType: 'promptExecutionError'
|
||||
@@ -1500,11 +1500,8 @@ export class ComfyApp {
|
||||
}
|
||||
}
|
||||
|
||||
// Clear selection and open the error panel so the user can immediately
|
||||
// see the error details without extra clicks.
|
||||
if (useSettingStore().get('Comfy.RightSidePanel.ShowErrorsTab')) {
|
||||
this.canvas.deselectAll()
|
||||
useRightSidePanelStore().openPanel('errors')
|
||||
executionStore.showErrorOverlay()
|
||||
}
|
||||
this.canvas.draw(true, true)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user