fix: show script errors when spec file fails to process

packages/app/package.json

@@ -35,6 +35,7 @@
     "@vitejs/plugin-vue-jsx": "1.1.6",
     "@vueuse/core": "5.2.0",
     "@windicss/plugin-interaction-variants": "1.0.0",
+    "ansi-to-html": "0.6.14",
     "bluebird": "3.5.3",
     "classnames": "2.3.1",
     "combine-properties": "0.1.0",

packages/app/src/runner/ScriptError.spec.tsx

@@ -0,0 +1,11 @@
+import ScriptError from './ScriptError.vue'
+
+const scriptError = `"Error: Webpack Compilation Error\n./cypress/integration/commands/actions/check_spec.js\nModule build failed (from /Users/username/work/cypress/node_modules/babel-loader/lib/index.js):\nSyntaxError: /Users/username/work/cypress/packages/driver/cypress/integration/commands/actions/check_spec.js: Unexpected token, expected \",\" (13:2)\n\n\u001b[0m \u001b[90m 11 |\u001b[39m   }\u001b[0m\n\u001b[0m \u001b[90m 12 |\u001b[39m\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 13 |\u001b[39m   beforeEach(\u001b[36mfunction\u001b[39m () {\u001b[0m\n\u001b[0m \u001b[90m    |\u001b[39m   \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 14 |\u001b[39m     \u001b[36mconst\u001b[39m doc \u001b[33m=\u001b[39m cy\u001b[33m.\u001b[39mstate(\u001b[32m'document'\u001b[39m)\u001b[0m\n\u001b[0m \u001b[90m 15 |\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 16 |\u001b[39m     $(doc\u001b[33m.\u001b[39mbody)\u001b[33m.\u001b[39mempty()\u001b[33m.\u001b[39mhtml(\u001b[36mthis\u001b[39m\u001b[33m.\u001b[39mbody)\u001b[0m\n    at Watching.handle [as handler] (/Users/username/work/cypress/npm/webpack-preprocessor/dist/index.js:180:23)\n    at /Users/username/work/cypress/node_modules/webpack/lib/Watching.js:99:9\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/username/work/cypress/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)\n    at AsyncSeriesHook.lazyCompileHook (/Users/username/work/cypress/node_modules/tapable/lib/Hook.js:154:20)\n    at Watching._done (/Users/username/work/cypress/node_modules/webpack/lib/Watching.js:98:28)\n    at /Users/username/work/cypress/node_modules/webpack/lib/Watching.js:73:19\n    at Compiler.emitRecords (/Users/username/work/cypress/node_modules/webpack/lib/Compiler.js:499:39)\n    at /Users/username/work/cypress/node_modules/webpack/lib/Watching.js:54:20\n    at /Users/username/work/cypress/node_modules/webpack/lib/Compiler.js:485:14\n    at eval (eval at create (/Users/username/work/cypress/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)\n    at /Users/username/work/cypress/node_modules/copy-webpack-plugin/dist/index.js:115:7\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/username/work/cypress/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)\n    at AsyncSeriesHook.lazyCompileHook (/Users/username/work/cypress/node_modules/tapable/lib/Hook.js:154:20)\n    at /Users/username/work/cypress/node_modules/webpack/lib/Compiler.js:482:27\n    at /Users/username/work/cypress/node_modules/neo-async/async.js:2818:7\n    at done (/Users/username/work/cypress/node_modules/neo-async/async.js:3522:9)\n    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/username/work/cypress/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)\n    at /Users/username/work/cypress/node_modules/webpack/lib/Compiler.js:464:33\n    at /Users/username/work/cypress/packages/server/node_modules/graceful-fs/graceful-fs.js:111:16\n    at /Users/username/work/cypress/packages/server/node_modules/graceful-fs/graceful-fs.js:111:16\n    at /Users/username/work/cypress/node_modules/graceful-fs/graceful-fs.js:61:14\n    at /Users/username/work/cypress/packages/server/node_modules/graceful-fs/graceful-fs.js:45:10\n    at FSReqCallback.oncomplete (node:fs:188:23)\n    at createDeferred (/Users/username/work/cypress/npm/webpack-preprocessor/dist/deferred.js:8:19)\n    at onCompile (/Users/username/work/cypress/npm/webpack-preprocessor/dist/index.js:213:60)\n    at SyncHook.eval (eval at create (/Users/username/work/cypress/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:9:1)\n    at SyncHook.lazyCompileHook (/Users/username/work/cypress/node_modules/tapable/lib/Hook.js:154:20)\n`
+
+describe('ScriptError', () => {
+  it('renders', () => {
+    cy.mount(() => <ScriptError error={scriptError} />)
+
+    cy.get('span').contains('beforeEach')
+  })
+})

packages/app/src/runner/ScriptError.vue

@@ -0,0 +1,24 @@
+<template>
+  <pre
+    class="text-red-500 bg-white p-24px overflow-auto h-[calc(100%-70px)] whitespace-pre-wrap break-all text-sm"
+    v-html="scriptError"
+  />
+</template>
+
+<script setup lang="ts">
+import ansiToHtml from 'ansi-to-html'
+import { computed } from 'vue'
+
+const convert = new ansiToHtml({
+  fg: '#000',
+  bg: '#fff',
+  newline: false,
+  escapeXML: true,
+  stream: false,
+})
+
+const props = defineProps<{ error: string }>()
+
+const scriptError = computed(() => convert.toHtml(props.error))
+
+</script>

packages/app/src/runner/SpecRunner.vue

@@ -48,7 +48,12 @@
       <RemoveClassesDuringScreenshotting
         class="h-full bg-gray-100 p-16px"
       >
+        <ScriptError
+          v-if="autStore.scriptError"
+          :error="autStore.scriptError.error"
+        />
         <div
+          v-show="!autStore.scriptError"
           :id="RUNNER_ID"
           class="origin-top-left viewport"
           :style="viewportStyle"
@@ -82,6 +87,7 @@ import { useMutation, gql } from '@urql/vue'
 import { OpenFileInIdeDocument } from '@packages/data-context/src/gen/all-operations.gen'
 import type { SpecRunnerFragment } from '../generated/graphql'
 import { usePreferences } from '../composables/usePreferences'
+import ScriptError from './ScriptError.vue'
 import { useWindowSize } from '@vueuse/core'
 
 const { width, height } = useWindowSize()
@@ -168,6 +174,7 @@ const viewportStyle = computed(() => {
 })
 
 function runSpec () {
+  autStore.setScriptError(null)
   UnifiedRunnerAPI.executeSpec(props.activeSpec)
 }
 
@@ -227,6 +234,10 @@ onMounted(() => {
     preferences.update('isSpecsListOpen', state.isSpecsListOpen)
     preferences.update('autoScrollingEnabled', state.autoScrollingEnabled)
   })
+
+  eventManager.on('script:error', (err) => {
+    autStore.scriptError = err
+  })
 })
 
 onBeforeUnmount(() => {

packages/app/src/store/aut-store.ts

@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
 
+type ScriptError = { type: string, error: string } | null
+
 interface AutStoreState {
   url?: string
   highlightUrl: boolean
@@ -8,6 +10,7 @@ interface AutStoreState {
   isLoadingUrl: boolean
   isLoading: boolean
   isRunning: boolean
+  scriptError: ScriptError
   viewportUpdateCallback: (() => void) | null
 }
 
@@ -24,6 +27,7 @@ export const useAutStore = defineStore({
       isLoading: false,
       isRunning: false,
       viewportUpdateCallback: null,
+      scriptError: null,
     }
   },
 
@@ -62,6 +66,9 @@ export const useAutStore = defineStore({
       this.highlightUrl = false
       this.isLoadingUrl = false
     },
+    setScriptError (err: ScriptError) {
+      this.scriptError = err
+    },
   },
 
   getters: {