fix(editor): Fix error rendering and indexing of LLM sub-node outputs (#10688)

packages/editor-ui/src/components/RunData.vue

@@ -56,6 +56,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { useNodeType } from '@/composables/useNodeType';
 import { useToast } from '@/composables/useToast';
 import { isEqual, isObject } from 'lodash-es';
 import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -171,12 +172,16 @@ export default defineComponent({
 			runIndex: props.runIndex,
 			displayMode: ndvStore.getPanelDisplayMode(props.paneType),
 		});
+		const { isSubNodeType } = useNodeType({
+			node,
+		});
 
 		return {
 			...useToast(),
 			externalHooks,
 			nodeHelpers,
 			pinnedData,
+			isSubNodeType,
 		};
 	},
 	data() {
@@ -308,6 +313,12 @@ export default defineComponent({
 			if (!this.node) {
 				return null;
 			}
+
+			// If the node is a sub-node, we need to get the parent node error to check for input errors
+			if (this.isSubNodeType && this.paneType === 'input') {
+				const parentNode = this.workflow.getChildNodes(this.node?.name ?? '', 'ALL_NON_MAIN')[0];
+				return this.workflowRunData?.[parentNode]?.[this.runIndex]?.error as NodeError;
+			}
 			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
 		},
 		hasRunError(): boolean {

packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue

@@ -9,10 +9,12 @@ import hljs from 'highlight.js/lib/core';
 import { useClipboard } from '@/composables/useClipboard';
 import { useI18n } from '@/composables/useI18n';
 import { useToast } from '@/composables/useToast';
-import { NodeConnectionType, type IDataObject } from 'n8n-workflow';
+import { NodeConnectionType } from 'n8n-workflow';
+import type { NodeError, IDataObject } from 'n8n-workflow';
 
 const props = defineProps<{
 	runData: IAiDataContent;
+	error?: NodeError;
 }>();
 
 const i18n = useI18n();
@@ -149,7 +151,7 @@ onMounted(() => {
 			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
 			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
 			<el-switch
-				v-if="contentParsed"
+				v-if="contentParsed && !error"
 				v-model="isShowRaw"
 				:class="$style.rawSwitch"
 				active-text="RAW JSON"
@@ -162,8 +164,10 @@ onMounted(() => {
 				[$style.blockContentExpanded]: isExpanded,
 			}"
 		>
+			<NodeErrorView v-if="error" :error="error" :class="$style.error" />
 			<div
 				v-for="({ parsedContent, raw }, index) in parsedRun"
+				v-else
 				:key="index"
 				:class="$style.contentText"
 				:data-content-type="parsedContent?.type"
@@ -299,4 +303,7 @@ onMounted(() => {
 	padding: 0;
 	color: var(--color-text-base);
 }
+.error {
+	padding: var(--spacing-s) 0;
+}
 </style>

packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue

@@ -2,7 +2,12 @@
 import type { IAiData, IAiDataContent } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import type { INodeExecutionData, INodeTypeDescription, NodeConnectionType } from 'n8n-workflow';
+import type {
+	INodeExecutionData,
+	INodeTypeDescription,
+	NodeConnectionType,
+	NodeError,
+} from 'n8n-workflow';
 import { computed } from 'vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import AiRunContentBlock from './AiRunContentBlock.vue';
@@ -85,6 +90,16 @@ const runMeta = computed(() => {
 	}
 	return extractRunMeta(outputRun.value);
 });
+
+const executionRunData = computed(() => {
+	return workflowsStore.getWorkflowExecution?.data?.resultData?.runData;
+});
+
+const outputError = computed(() => {
+	return executionRunData.value?.[props.inputData.node]?.[props.inputData.runIndex]?.error as
+		| NodeError
+		| undefined;
+});
 </script>
 
 <template>
@@ -155,7 +170,10 @@ const runMeta = computed(() => {
 		</header>
 
 		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
-			<AiRunContentBlock :run-data="run" />
+			<AiRunContentBlock
+				:run-data="run"
+				:error="run.inOut === 'output' ? outputError : undefined"
+			/>
 		</main>
 	</div>
 </template>