[Refactor] Extract error report generation logic (#3263)

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -1,8 +1,8 @@
 <template>
   <NoResultsPlaceholder
     icon="pi pi-exclamation-circle"
-    :title="props.error.node_type"
+    :title="error.node_type"
-    :message="props.error.exception_message"
+    :message="error.exception_message"
   />
   <div class="comfy-error-report">
     <div class="flex gap-2 justify-center">
@@ -32,13 +32,13 @@
       error-type="graphExecutionError"
       :extra-fields="[stackTraceField]"
       :tags="{
-        exceptionMessage: props.error.exception_message,
+        exceptionMessage: error.exception_message,
-        nodeType: props.error.node_type
+        nodeType: error.node_type
       }"
     />
     <div class="action-container">
       <FindIssueButton
-        :errorMessage="props.error.exception_message"
+        :errorMessage="error.exception_message"
         :repoOwner="repoOwner"
         :repoName="repoName"
       />
@@ -67,10 +67,11 @@ import type { ExecutionErrorWsMessage, SystemStats } from '@/schemas/apiSchema'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import type { ReportField } from '@/types/issueReportTypes'
+import { generateErrorReport } from '@/utils/errorReportUtil'
 
 import ReportIssuePanel from './error/ReportIssuePanel.vue'
 
-const props = defineProps<{
+const { error } = defineProps<{
   error: ExecutionErrorWsMessage
 }>()
 
@@ -93,7 +94,7 @@ const stackTraceField = computed<ReportField>(() => {
     label: t('issueReport.stackTrace'),
     value: 'StackTrace',
     optIn: true,
-    getData: () => props.error.traceback?.join('\n')
+    getData: () => error.traceback?.join('\n')
   }
 })
 
@@ -116,58 +117,16 @@ onMounted(async () => {
 })
 
 const generateReport = (systemStats: SystemStats, logs: string) => {
-  // The default JSON workflow has about 3000 characters.
+  reportContent.value = generateErrorReport({
-  const MAX_JSON_LENGTH = 20000
+    systemStats,
-  const workflowJSONString = JSON.stringify(app.graph.serialize())
+    serverLogs: logs,
-  const workflowText =
+    workflow: app.graph.serialize(),
-    workflowJSONString.length > MAX_JSON_LENGTH
+    exception_type: error.exception_type,
-      ? 'Workflow too large. Please manually upload the workflow from local file system.'
+    exception_message: error.exception_message,
-      : workflowJSONString
+    traceback: error.traceback,
-
+    node_id: error.node_id,
-  reportContent.value = `
+    node_type: error.node_type
-# ComfyUI Error Report
+  })
-## Error Details
-- **Node ID:** ${props.error.node_id}
-- **Node Type:** ${props.error.node_type}
-- **Exception Type:** ${props.error.exception_type}
-- **Exception Message:** ${props.error.exception_message}
-## Stack Trace
-\`\`\`
-${props.error.traceback.join('\n')}
-\`\`\`
-## System Information
-- **ComfyUI Version:** ${systemStats.system.comfyui_version}
-- **Arguments:** ${systemStats.system.argv.join(' ')}
-- **OS:** ${systemStats.system.os}
-- **Python Version:** ${systemStats.system.python_version}
-- **Embedded Python:** ${systemStats.system.embedded_python}
-- **PyTorch Version:** ${systemStats.system.pytorch_version}
-## Devices
-${systemStats.devices
-  .map(
-    (device) => `
-- **Name:** ${device.name}
-  - **Type:** ${device.type}
-  - **VRAM Total:** ${device.vram_total}
-  - **VRAM Free:** ${device.vram_free}
-  - **Torch VRAM Total:** ${device.torch_vram_total}
-  - **Torch VRAM Free:** ${device.torch_vram_free}
-`
-  )
-  .join('\n')}
-## Logs
-\`\`\`
-${logs}
-\`\`\`
-## Attached Workflow
-Please make sure that workflow does not contain any sensitive information such as API keys or passwords.
-\`\`\`
-${workflowText}
-\`\`\`
-
-## Additional Context
-(Please add any additional context or steps to reproduce the error here)
-`
 }
 
 const { copyToClipboard } = useCopyToClipboard()

src/utils/errorReportUtil.ts

@@ -0,0 +1,81 @@
+import type { ISerialisedGraph } from '@comfyorg/litegraph'
+
+import type { SystemStats } from '@/schemas/apiSchema'
+import type { NodeId } from '@/schemas/comfyWorkflowSchema'
+
+export interface ErrorReportData {
+  exception_type: string
+  exception_message: string
+  systemStats: SystemStats
+  serverLogs: string
+  workflow: ISerialisedGraph
+
+  traceback?: string[]
+  node_id?: NodeId
+  node_type?: string
+}
+
+/**
+ * Generate a report for an error.
+ * @param error - The error to report.
+ * @returns The report.
+ */
+export function generateErrorReport(error: ErrorReportData): string {
+  // The default JSON workflow has about 3000 characters.
+  const MAX_JSON_LENGTH = 20000
+  const workflowJSONString = JSON.stringify(error.workflow)
+  const workflowText =
+    workflowJSONString.length > MAX_JSON_LENGTH
+      ? 'Workflow too large. Please manually upload the workflow from local file system.'
+      : workflowJSONString
+  const systemStats = error.systemStats
+
+  return `
+# ComfyUI Error Report
+${
+  error
+    ? `## Error Details
+- **Node ID:** ${error.node_id || 'N/A'}
+- **Node Type:** ${error.node_type || 'N/A'}
+- **Exception Type:** ${error.exception_type || 'N/A'}
+- **Exception Message:** ${error.exception_message || 'N/A'}
+## Stack Trace
+\`\`\`
+${error.traceback ? error.traceback.join('\n') : 'No stack trace available'}
+\`\`\``
+    : ''
+}
+## System Information
+- **ComfyUI Version:** ${systemStats.system.comfyui_version}
+- **Arguments:** ${systemStats.system.argv.join(' ')}
+- **OS:** ${systemStats.system.os}
+- **Python Version:** ${systemStats.system.python_version}
+- **Embedded Python:** ${systemStats.system.embedded_python}
+- **PyTorch Version:** ${systemStats.system.pytorch_version}
+## Devices
+${systemStats.devices
+  .map(
+    (device) => `
+- **Name:** ${device.name}
+  - **Type:** ${device.type}
+  - **VRAM Total:** ${device.vram_total}
+  - **VRAM Free:** ${device.vram_free}
+  - **Torch VRAM Total:** ${device.torch_vram_total}
+  - **Torch VRAM Free:** ${device.torch_vram_free}
+`
+  )
+  .join('\n')}
+## Logs
+\`\`\`
+${error.serverLogs}
+\`\`\`
+## Attached Workflow
+Please make sure that workflow does not contain any sensitive information such as API keys or passwords.
+\`\`\`
+${workflowText}
+\`\`\`
+
+## Additional Context
+(Please add any additional context or steps to reproduce the error here)
+`
+}