feat: collect errors from the browser

packages/vite/package.json

@@ -81,6 +81,8 @@
   },
   "//": "READ CONTRIBUTING.md to understand what to put under deps vs. devDeps!",
   "dependencies": {
+    "@shikijs/cli": "^3.8.1",
+    "body-parser": "^2.2.0",
     "esbuild": "^0.25.0",
     "fdir": "^6.4.6",
     "picomatch": "^4.0.3",

packages/vite/src/client/client.ts

@@ -109,6 +109,21 @@ if (typeof window !== 'undefined') {
   window.addEventListener?.('beforeunload', () => {
     willUnload = true
   })
+  window.addEventListener('error', (error) => {
+    fetch('/@vite/errors', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        stack: error.error.stack,
+        filename: error.filename,
+        message: error.message,
+        colno: error.colno,
+        lineno: error.lineno,
+      })
+    })
+  })
 }
 
 function cleanUrl(pathname: string): string {

packages/vite/src/node/constants.ts

@@ -104,6 +104,7 @@ export const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/
 export const FS_PREFIX = `/@fs/`
 
 export const CLIENT_PUBLIC_PATH = `/@vite/client`
+export const CLIENT_ERROR_RELAY_PATH = '/@vite/errors'
 export const ENV_PUBLIC_PATH = `/@vite/env`
 export const VITE_PACKAGE_DIR = resolve(
   fileURLToPath(import.meta.url),

packages/vite/src/node/server/index.ts

@@ -92,7 +92,8 @@
 import { ModuleGraph } from './mixedModuleGraph'
 import type { ModuleNode } from './mixedModuleGraph'
 import { notFoundMiddleware } from './middlewares/notFound'
 import { errorMiddleware } from './middlewares/error'
+import { errorIngestMiddleware } from './middlewares/errorIngest'
 import type { HmrOptions, NormalizedHotChannel } from './hmr'
 import { handleHMRUpdate, updateModules } from './hmr'
 import { openBrowser as _openBrowser } from './openBrowser'
@@ -910,6 +911,9 @@
   // open in editor support
   middlewares.use('/__open-in-editor', launchEditorMiddleware())
 
+  // error ingest handler
+  middlewares.use(errorIngestMiddleware(server))
+
   // ping request handler
   // Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
   middlewares.use(function viteHMRPingMiddleware(req, res, next) {
@@ -954,7 +958,7 @@
   }
 
   // error handler
-  middlewares.use(errorMiddleware(server, !!middlewareMode))
+  middlewares.use(errorIngestMiddleware(server))
 
   // httpServer.listen can be called multiple times
   // when port when using next port number

packages/vite/src/node/server/middlewares/errorIngest.ts

@@ -0,0 +1,67 @@
+import path from 'node:path'
+import repl from 'node:repl'
+import { readFileSync } from 'fs';
+import { codeToANSI } from '@shikijs/cli';
+
+import { stripVTControlCharacters as strip } from 'node:util'
+import colors from 'picocolors'
+import type { RollupError } from 'rollup'
+import bodyParser from 'body-parser'
+import type { Connect } from 'dep-types/connect'
+import type { ErrorPayload } from 'types/hmrPayload'
+import { pad } from '../../utils'
+import type { ViteDevServer } from '../..'
+import { CLIENT_ERROR_RELAY_PATH } from '../../constants'
+
+export function logBrowserError(
+  server: ViteDevServer, 
+  stack: string, 
+  fragment: string
+): void {
+  const msg = `${colors.magenta('[browser]')} ${colors.red(stack)}`
+  server.config.logger.error(`${msg}\n\n${fragment}`, {
+    clear: true,
+    timestamp: true,
+  })
+}
+
+export function errorIngestMiddleware(
+  server: ViteDevServer,
+): Connect.ErrorHandleFunction {
+  const jsonParser = bodyParser.json()
+  return function viteErrorIngestMiddleware(req, res, next) {
+    if (req.url === CLIENT_ERROR_RELAY_PATH) {
+      jsonParser(req, res, async () => {
+        const fragment = await getErrorFragment(req.body)
+        logBrowserError(server, req.body.stack, fragment)
+        res.statusCode = 201
+        res.end('')
+      })
+    } else {
+      next()
+    }
+  }
+}
+
+async function getErrorFragment (info) {
+  const res = await fetch(info.filename)
+  const source = await res.text()
+  const filtered = source.split(/\r?\n/g)
+    .map((line, i) => [i, line])
+    .slice(Math.max(1, info.lineno - 2), info.lineno + 3)
+    .filter(([_,line]) => !line.startsWith('//# sourceMappingURL'))
+  let fragment = ""
+  let padding = String(info.lineno).length
+  for (const [lineno, line] of filtered) {
+    fragment += `${
+      lineno === (info.lineno - 1) ? colors.red('>') : ' '
+    }${String(lineno).padStart(padding)} | ${
+      await codeToANSI(line, 'typescript', 'slack-dark')
+    }`
+    if (lineno === (info.lineno - 1)) {
+      const leftPadding = Math.max(0, (info.colno - 1) + padding + 5)
+      fragment += `${new Array(leftPadding).fill('').join(' ')}${colors.red('^')}\n`
+    }
+  }
+  return fragment
+} 

packages/vite/src/node/utils.ts

@@ -33,6 +33,7 @@ import { VALID_ID_PREFIX } from '../shared/constants'
 import {
   CLIENT_ENTRY,
   CLIENT_PUBLIC_PATH,
+  CLIENT_ERROR_RELAY_PATH,
   CSS_LANGS_RE,
   ENV_PUBLIC_PATH,
   FS_PREFIX,
@@ -326,6 +327,7 @@ const internalPrefixes = [
   FS_PREFIX,
   VALID_ID_PREFIX,
   CLIENT_PUBLIC_PATH,
+  CLIENT_ERROR_RELAY_PATH,
   ENV_PUBLIC_PATH,
 ]
 const InternalPrefixRE = new RegExp(`^(?:${internalPrefixes.join('|')})`)

playground/client-errors/index.html

@@ -0,0 +1,5 @@
+<body>
+  <h4>Test Client Error Ingestion</h4>
+  <input type="button" value="Create error">
+  <script type="module" src="/index.js"></script>
+</body>

playground/client-errors/index.js

@@ -0,0 +1,8 @@
+
+const input = document.querySelector('input')
+
+input.addEventListener('click', handleClick)
+
+function handleClick () {
+  throw new Error('Something went wrong')
+}

playground/client-errors/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@vitejs/test-client-errors",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "debug": "node --inspect-brk ../../packages/vite/bin/vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "workspace:^"
+  }
+}

playground/client-errors/vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  server: {},
+})