feat(ui): show unhandled errors on the ui

packages/ui/client/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     Dashboard: typeof import('./components/Dashboard.vue')['default']
     DashboardEntry: typeof import('./components/dashboard/DashboardEntry.vue')['default']
     DetailsPanel: typeof import('./components/DetailsPanel.vue')['default']
+    ErrorEntry: typeof import('./components/dashboard/ErrorEntry.vue')['default']
     FileDetails: typeof import('./components/FileDetails.vue')['default']
     IconButton: typeof import('./components/IconButton.vue')['default']
     Modal: typeof import('./components/Modal.vue')['default']

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import { isPrimitive } from 'vitest/utils'
+
+  const props = defineProps<{
+    error: unkown
+  }>()
+
+  let e = props.error as ErrorWithDiff;
+
+  if (isPrimitive(props.error)) {
+    e = {
+      message: String(error).split(/\n/g)[0],
+      stack: String(error),
+      name: ''
+    }
+  }
+
+  if (!e) {
+    const error = new Error('unknown error')
+    e = {
+      message: error.message,
+      stack: error.stack,
+      name: ''
+    }
+  }
+</script>
+
+<template>
+  <h4 bg="red500/10" p-1 mb-1 mt-2 rounded>
+    <span font-bold>
+      {{ e.name || e.nameStr || 'Unknown Error' }}<template v-if="e.message">:</template>
+    </span>
+    {{ e.message }}
+  </h4>
+  <p v-if="e.VITEST_TEST_PATH" text="sm" font-thin mb-2>
+    This error originated in <span font-bold>{{ e.VITEST_TEST_PATH }}</span> test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
+  </p>
+  <p v-if="e.VITEST_TEST_NAME" text="sm" font-thin mb-2>
+    The latest test that might've caused the error is <span font-bold>{{ e.VITEST_TEST_NAME }}</span>. It might mean one of the following:<br>
+    <ul>
+      <li>
+        The error was thrown, while Vitest was running this test.
+      </li>
+      <li>
+        This was the last recorded test before the error was thrown, if error originated after test finished its execution.
+      </li>
+    </ul>
+  </p>
+  <p v-if="e.VITEST_AFTER_ENV_TEARDOWN" text="sm" font-thin>
+    This error was caught after test environment was torn down. Make sure to cancel any running tasks before test finishes:<br>
+    <ul>
+      <li>
+        Cancel timeouts using clearTimeout and clearInterval.
+      </li>
+      <li>
+        Wait for promises to resolve using the await keyword.
+      </li>
+    </ul>
+  </p>
+</template>

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,17 +44,50 @@ 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 mb-2 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>
+      <details text="sm" font-thin pe-2.5 open:max-h-52 overflow-auto class="scrolls unhandled-errors">
+        <summary font-bold cursor-pointer>Errors</summary>
+        <ErrorEntry v-for="e in unhandledErrors" :error="e" />
+      </details>
+    </div>
+  </template>
 </template>
 
 <style scoped>
 .number {
   font-weight: 400;
   text-align: right;
 }
+
+.unhandled-errors {
+  --cm-ttc-c-thumb: #CCC;
+}
+
+html.dark .unhandled-errors {
+  --cm-ttc-c-thumb: #444;
+}
 </style>

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 || []
         },
       },
     })
@@ -70,11 +72,13 @@ watch(
     ws.addEventListener('open', async () => {
       status.value = 'OPEN'
       client.state.filesMap.clear()
-      const [files, _config] = await Promise.all([
+      const [files, _config, errors] = await Promise.all([
         client.rpc.getFiles(),
         client.rpc.getConfig(),
+        client.rpc.getUnhandledErrors(),
       ])
       client.state.collectFiles(files)
+      unhandledErrors.value = errors
       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 () => {