fix(browser): print related test file and potential test in unhandled errors (#7564)

Author: sheremet-va

packages/browser/src/client/public/error-catcher.js

@@ -1,16 +1,26 @@
 import { channel, client } from '@vitest/browser/client'
 
 function serializeError(unhandledError) {
+  const state = globalThis.__vitest_worker__
+  const VITEST_TEST_NAME = state && state.current && state.current.type === 'test'
+    ? state.current.name
+    : undefined
+  const VITEST_TEST_PATH = state && state.filepath ? state.filepath : undefined
+
   if (typeof unhandledError !== 'object' || !unhandledError) {
     return {
       message: String(unhandledError),
+      VITEST_TEST_NAME,
+      VITEST_TEST_PATH,
     }
   }
 
   return {
     name: unhandledError.name,
     message: unhandledError.message,
     stack: String(unhandledError.stack),
+    VITEST_TEST_NAME,
+    VITEST_TEST_PATH,
   }
 }
 

packages/vitest/src/node/error.ts

@@ -141,7 +141,7 @@ function printErrorInner(
         })
 
   if (type) {
-    printErrorType(type, project.ctx)
+    printErrorType(type, project.vitest)
   }
   printErrorMessage(e, logger)
   if (options.screenshotPaths?.length) {
@@ -205,7 +205,7 @@ function printErrorInner(
     logger.error(
       c.red(
         `This error originated in "${c.bold(
-          testPath,
+          relative(project.config.root, testPath),
         )}" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.`,
       ),
     )

packages/vitest/src/runtime/execute.ts

@@ -6,7 +6,7 @@ import fs from 'node:fs'
 import { pathToFileURL } from 'node:url'
 import vm from 'node:vm'
 import { processError } from '@vitest/utils/error'
-import { normalize, relative } from 'pathe'
+import { normalize } from 'pathe'
 import { DEFAULT_REQUEST_STUBS, ViteNodeRunner } from 'vite-node/client'
 import {
   isInternalRequest,
@@ -59,7 +59,7 @@ function listenForErrors(state: () => WorkerGlobalState) {
     const worker = state()
 
     // if error happens during a test
-    if (worker.current) {
+    if (worker.current?.type === 'test') {
       const listeners = process.listeners(event as 'uncaughtException')
       // if there is another listener, assume that it's handled by user code
       // one is Vitest's own listener
@@ -70,9 +70,9 @@ function listenForErrors(state: () => WorkerGlobalState) {
 
     const error = processError(err)
     if (!isPrimitive(error)) {
-      error.VITEST_TEST_NAME = worker.current?.name
+      error.VITEST_TEST_NAME = worker.current?.type === 'test' ? worker.current.name : undefined
       if (worker.filepath) {
-        error.VITEST_TEST_PATH = relative(state().config.root, worker.filepath)
+        error.VITEST_TEST_PATH = worker.filepath
       }
       error.VITEST_AFTER_ENV_TEARDOWN = worker.environmentTeardownRun
     }

test/browser/fixtures/unhandled/throw-unhandled-error.test.ts

@@ -4,8 +4,11 @@ interface _Unused {
   _fake: never
 }
 
-test('unhandled exception', () => {
+test('unhandled exception', async () => {
   ;(async () => {
     throw new Error('custom_unhandled_error')
   })()
+  // trigger the error during the test so the report includes the helpful message
+  // in reality, most tests will have something going on here already
+  await new Promise<void>((resolve) => setTimeout(() => resolve(), 50))
 })

test/browser/specs/unhandled.test.ts

@@ -7,6 +7,8 @@ test('prints correct unhandled error stack', async () => {
   })
 
   expect(stderr).toContain('throw-unhandled-error.test.ts:9:10')
+  expect(stderr).toContain('This error originated in "throw-unhandled-error.test.ts" test file.')
+  expect(stderr).toContain('The latest test that might\'ve caused the error is "unhandled exception".')
 
   if (instances.some(({ browser }) => browser === 'webkit')) {
     expect(stderr).toContain('throw-unhandled-error.test.ts:9:20')