feat(ui): show unhandled errors on the ui

packages/ui/client/components/dashboard/TestFilesEntry.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { files } from '../../composables/client'
+import { files, unhandledErrors } from '../../composables/client'
 import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../composables/summary'
 </script>
 
@@ -44,12 +44,33 @@ import { filesFailed, filesSnapshotFailed, filesSuccess, time } from '../../comp
       </div>
     </template>
 
+    <template v-if="unhandledErrors.length">
+      <div i-carbon-checkmark-outline-error />
+      <div>
+        Errors
+      </div>
+      <div class="number" text-red5>
+        {{ unhandledErrors.length }}
+      </div>
+    </template>
+
     <div i-carbon-timer />
     <div>Time</div>
     <div class="number" data-testid="run-time">
       {{ time }}
     </div>
   </div>
+  <template v-if="unhandledErrors.length">
+    <div bg="red500/10" text="red500" p="x3 y2" max-w-xl m-2 rounded>
+      <h3 text-center mb-2>
+        Unhandled Errors
+      </h3>
+      <p text="sm" font-thin data-testid="unhandled-errors">
+        Vitest caught {{ unhandledErrors.length }} error{{ unhandledErrors.length > 1 ? 's' : '' }} during the test run.<br>
+        This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.
+      </p>
+    </div>
+  </template>
 </template>
 
 <style scoped>

packages/ui/client/composables/client/index.ts

@@ -11,6 +11,7 @@ import { createStaticClient } from './static'
 export { ENTRY_URL, PORT, HOST, isReport } from '../../constants'
 
 export const testRunState: Ref<RunState> = ref('idle')
+export const unhandledErrors: Ref<unknown[]> = ref([])
 
 export const client = (function createVitestClient() {
   if (isReport) {
@@ -23,8 +24,9 @@ export const client = (function createVitestClient() {
         onTaskUpdate() {
           testRunState.value = 'running'
         },
-        onFinished() {
+        onFinished(_files, errors) {
           testRunState.value = 'idle'
+          unhandledErrors.value = errors || []
         },
       },
     })
@@ -75,6 +77,7 @@ watch(
         client.rpc.getConfig(),
       ])
       client.state.collectFiles(files)
+      unhandledErrors.value = await client.rpc.getUnhandledErrors()
       config.value = _config
     })
 

packages/ui/client/composables/client/static.ts

@@ -1,6 +1,6 @@
 import type { BirpcReturn } from 'birpc'
 import type { VitestClient } from '@vitest/ws-client'
-import type { WebSocketHandlers } from 'vitest/src/api/types'
+import type { WebSocketEvents, WebSocketHandlers } from 'vitest/src/api/types'
 import { parse } from 'flatted'
 import { decompressSync, strFromU8 } from 'fflate'
 import type { File, ModuleGraphData, ResolvedConfig } from 'vitest/src/types'
@@ -11,6 +11,7 @@ interface HTMLReportMetadata {
   files: File[]
   config: ResolvedConfig
   moduleGraph: Record<string, ModuleGraphData>
+  unhandledErrors: unknown[]
 }
 
 const noop: any = () => {}
@@ -42,6 +43,9 @@ export function createStaticClient(): VitestClient {
     getModuleGraph: async (id) => {
       return metadata.moduleGraph[id]
     },
+    getUnhandledErrors: () => {
+      return metadata.unhandledErrors
+    },
     getTransformResult: async (id) => {
       return {
         code: id,
@@ -66,9 +70,11 @@ export function createStaticClient(): VitestClient {
     saveSnapshotFile: asyncNoop,
     readTestFile: asyncNoop,
     removeSnapshotFile: asyncNoop,
+    onUnhandledError: noop,
+    saveTestFile: asyncNoop,
   } as WebSocketHandlers
 
-  ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers>
+  ctx.rpc = rpc as any as BirpcReturn<WebSocketHandlers, WebSocketEvents>
 
   let openPromise: Promise<void>
 

packages/ui/node/reporter.ts

@@ -28,6 +28,7 @@ interface HTMLReportData {
   files: File[]
   config: ResolvedConfig
   moduleGraph: Record<string, ModuleGraphData>
+  unhandledErrors: unknown[]
 }
 
 const distDir = resolve(fileURLToPath(import.meta.url), '../../dist')
@@ -47,6 +48,7 @@ export default class HTMLReporter implements Reporter {
       paths: this.ctx.state.getPaths(),
       files: this.ctx.state.getFiles(),
       config: this.ctx.config,
+      unhandledErrors: this.ctx.state.getUnhandledErrors(),
       moduleGraph: {},
     }
     await Promise.all(

packages/vitest/src/api/setup.ts

@@ -135,6 +135,9 @@ export function setup(vitestOrWorkspace: Vitest | WorkspaceProject, server?: Vit
         getProvidedContext() {
           return 'ctx' in vitestOrWorkspace ? vitestOrWorkspace.getProvidedContext() : ({} as any)
         },
+        getUnhandledErrors() {
+          return ctx.state.getUnhandledErrors()
+        },
       },
       {
         post: msg => ws.send(msg),
@@ -194,9 +197,9 @@ class WebSocketReporter implements Reporter {
     })
   }
 
-  onFinished(files?: File[] | undefined) {
+  onFinished(files?: File[], errors?: unknown[]) {
     this.clients.forEach((client) => {
-      client.onFinished?.(files)
+      client.onFinished?.(files, errors)
     })
   }
 

packages/vitest/src/api/types.ts

@@ -31,6 +31,7 @@ export interface WebSocketHandlers {
   rerun(files: string[]): Promise<void>
   updateSnapshot(file?: File): Promise<void>
   getProvidedContext(): ProvidedContext
+  getUnhandledErrors(): unknown[]
 }
 
 export interface WebSocketEvents extends Pick<Reporter, 'onCollected' | 'onFinished' | 'onTaskUpdate' | 'onUserConsoleLog' | 'onPathsCollected'> {

packages/ws-client/src/index.ts

@@ -65,8 +65,8 @@ export function createClient(url: string, options: VitestClientOptions = {}) {
     onUserConsoleLog(log) {
       ctx.state.updateUserLog(log)
     },
-    onFinished(files) {
-      handlers.onFinished?.(files)
+    onFinished(files, errors) {
+      handlers.onFinished?.(files, errors)
     },
     onCancel(reason: CancelReason) {
       handlers.onCancel?.(reason)

test/reporters/tests/__snapshots__/html.test.ts.snap

@@ -103,6 +103,7 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
   "paths": [
     "<rootDir>/test/reporters/fixtures/json-fail.test.ts",
   ],
+  "unhandledErrors": [],
 }
 `;
 
@@ -226,5 +227,6 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
   "paths": [
     "<rootDir>/test/reporters/fixtures/all-passing-or-skipped.test.ts",
   ],
+  "unhandledErrors": [],
 }
 `;

test/ui/fixtures/sample.test.ts

@@ -3,5 +3,8 @@ import { expect, it } from 'vitest'
 it('add', () => {
   // eslint-disable-next-line no-console
   console.log('log test')
+  setTimeout(() => {
+    throw new Error('error')
+  })
   expect(1 + 1).toEqual(2)
 })

test/ui/test/html-report.spec.ts

@@ -20,8 +20,18 @@ describe.skipIf(isWindows)('html report', () => {
     return exit
   })
 
-  it('dashboard', async () => {
-    await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+  describe('dashboard', async () => {
+    it('summary', async () => {
+      await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+    })
+
+    it('unhandled errors', async () => {
+      await untilUpdated(
+        () => page.textContent('[data-testid=unhandled-errors]'),
+        'Vitest caught 1 error during the test run. This might cause false positive tests. '
+        + 'Resolve unhandled errors to make sure your tests are not affected.',
+      )
+    })
   })
 
   describe('file detail', async () => {

test/ui/test/ui.spec.ts

@@ -14,8 +14,18 @@ describe.skipIf(isWindows)('ui', () => {
     return exit
   })
 
-  it('dashboard', async () => {
-    await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+  describe('dashboard', async () => {
+    it('summary', async () => {
+      await untilUpdated(() => page.textContent('[aria-labelledby]'), '1 Pass 0 Fail 1 Total ')
+    })
+
+    it('unhandled errors', async () => {
+      await untilUpdated(
+        () => page.textContent('[data-testid=unhandled-errors]'),
+        'Vitest caught 1 error during the test run. This might cause false positive tests. '
+        + 'Resolve unhandled errors to make sure your tests are not affected.',
+      )
+    })
   })
 
   describe('file detail', async () => {