Implement load workflow error dialog in Vue (#3225)

Co-authored-by: github-actions <github-actions@github.com>

src/scripts/app.ts

@@ -11,7 +11,7 @@ import _ from 'lodash'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { reactive } from 'vue'
 
-import { st } from '@/i18n'
+import { st, t } from '@/i18n'
 import type { ResultItem } from '@/schemas/apiSchema'
 import {
   type ComfyWorkflowJSON,
@@ -1144,56 +1144,10 @@ export class ComfyApp {
         this.canvas.ds.scale = graphData.extra.ds.scale
       }
     } catch (error) {
-      let errorHint = []
-      // Try extracting filename to see if it was caused by an extension script
-      const filename =
-        // @ts-expect-error fixme ts strict error
-        error.fileName ||
-        // @ts-expect-error fixme ts strict error
-        (error.stack || '').match(/(\/extensions\/.*\.js)/)?.[1]
-      const pos = (filename || '').indexOf('/extensions/')
-      if (pos > -1) {
-        errorHint.push(
-          $el('span', {
-            textContent: 'This may be due to the following script:'
-          }),
-          $el('br'),
-          $el('span', {
-            style: {
-              fontWeight: 'bold'
-            },
-            textContent: filename.substring(pos)
-          })
-        )
-      }
-
-      // Show dialog to let the user know something went wrong loading the data
-      this.ui.dialog.show(
-        $el('div', [
-          $el('p', {
-            textContent: 'Loading aborted due to error reloading workflow data'
-          }),
-          $el('pre', {
-            style: { padding: '5px', backgroundColor: 'rgba(255,0,0,0.2)' },
-            // @ts-expect-error fixme ts strict error
-            textContent: error.toString()
-          }),
-          $el('pre', {
-            style: {
-              padding: '5px',
-              color: '#ccc',
-              fontSize: '10px',
-              maxHeight: '50vh',
-              overflow: 'auto',
-              backgroundColor: 'rgba(0,0,0,0.2)'
-            },
-            // @ts-expect-error fixme ts strict error
-            textContent: error.stack || 'No stacktrace available'
-          }),
-          ...errorHint
-        ]).outerHTML
-      )
-
+      useDialogService().showErrorDialog(error, {
+        title: t('errorDialog.loadWorkflowTitle'),
+        errorType: 'loadWorkflowError'
+      })
       return
     }
     for (const node of this.graph.nodes) {
@@ -1384,8 +1338,7 @@ export class ComfyApp {
     return !this.lastNodeErrors
   }
 
-  // @ts-expect-error fixme ts strict error
-  showErrorOnFileLoad(file) {
+  showErrorOnFileLoad(file: File) {
     this.ui.dialog.show(
       $el('div', [
         $el('p', { textContent: `Unable to find workflow in ${file.name}` })