feat: runtime error overlay

packages/playground/runtime-error/__tests__/runtime.spec.ts

@@ -0,0 +1,171 @@
+import { isBuild } from '../../testUtils'
+
+interface testErrorOverlayOptions {
+ message: string | RegExp
+ file: string | RegExp | null
+ frame: (string | RegExp)[] | null
+ stack: (string | RegExp)[]
+}
+
+const testErrorOverlay = async (
+ btnSelector: string,
+ { message, file, frame, stack }: testErrorOverlayOptions
+) => {
+ await (await page.$(btnSelector)).click()
+
+ const overlay = await page.waitForSelector('vite-error-overlay')
+ expect(overlay).toBeTruthy()
+
+ const overlayMessage = await (await overlay.$('.message-body'))?.innerHTML()
+ expect(overlayMessage).toMatch(message)
+
+ const overlayFile =
+ (await (await overlay.$('.file > .file-link'))?.innerText()) || null
+
+ if (file == null) {
+ expect(overlayFile).toBeNull()
+ } else {
+ expect(overlayFile).toMatch(file)
+ }
+
+ const overlayFrame = (await (await overlay.$('.frame')).innerText()) || null
+
+ if (frame == null) {
+ expect(overlayFrame).toBeNull()
+ } else {
+ frame.forEach((f) => {
+ expect(overlayFrame).toMatch(f)
+ })
+ }
+
+ const overlayStack = await (await overlay.$('.stack')).innerText()
+ stack.forEach((s) => {
+ expect(overlayStack).toMatch(s)
+ })
+}
+
+if (isBuild) {
+ test('Should not show overlay in build', async () => {
+ await (await page.$('#throwBtn')).click()
+ const overlay = await page.$('vite-error-overlay')
+ expect(overlay).toBeFalsy()
+ })
+} else {
+ beforeEach(async () => {
+ // reset the page before each run
+ // viteTestUrl is globally injected in scripts/jestPerTestSetup.ts
+ await page.goto(viteTestUrl)
+ })
+
+ describe('unhandled exceptions', () => {
+ test('should catch unhandled errors', async () => {
+ await testErrorOverlay('#throwBtn', {
+ message: 'Why did you click the button',
+ file: '/runtime-error/src/entry-client.ts:4:8',
+ frame: [
+ 'querySelector<HTMLButtonElement>',
+ "new Error('Why did you click the button')"
+ ],
+ stack: [
+ 'Error: Why did you click the button',
+ '/runtime-error/src/entry-client.ts:4:8'
+ ]
+ })
+ })
+
+ test('should catch runtime errors', async () => {
+ await testErrorOverlay('#invalidAccessor', {
+ message: 'Cannot set properties of undefined',
+ file: '/runtime-error/src/entry-client.ts:9:16',
+ frame: [
+ 'querySelector<HTMLButtonElement>',
+ '//@ts-expect-error',
+ 'window.doesnt.exists = 5'
+ ],
+ stack: [
+ 'TypeError: Cannot set properties of undefined',
+ 'HTMLButtonElement.document.querySelector.onclick',
+ '/runtime-error/src/entry-client.ts:9:16'
+ ]
+ })
+ })
+
+ test('should handle string errors', async () => {
+ await testErrorOverlay('#throwStr', {
+ message: 'String Error',
+ file: '/runtime-error/src/entry-client.ts:17:2',
+ frame: ['querySelector<HTMLButtonElement>', "throw 'String Error'"],
+ stack: [
+ "a non-error was thrown please check your browser's devtools for more information"
+ ]
+ })
+ })
+
+ test('should handle number errors', async () => {
+ await testErrorOverlay('#throwNum', {
+ message: '42',
+ file: '/runtime-error/src/entry-client.ts:21:2',
+ frame: ['querySelector<HTMLButtonElement>', 'throw 42'],
+ stack: [
+ "a non-error was thrown please check your browser's devtools for more information"
+ ]
+ })
+ })
+ test('should show stack trace from multiple files', async () => {
+ await testErrorOverlay('#throwExternal', {
+ message: 'Throw from externalThrow',
+ file: '/src/external.js:2:9',
+ frame: [
+ 'export const externalThrow',
+ "throw new Error('Throw from externalThrow')"
+ ],
+ stack: [
+ 'Error: Throw from externalThrow',
+ '/src/external.js',
+ '2:9',
+ 'HTMLButtonElement.document.querySelector.onclick',
+ '/runtime-error/src/entry-client.ts:25:2'
+ ]
+ })
+ })
+ })
+
+ describe('unhandled rejections', () => {
+ test('should catch unhandled promises', async () => {
+ await testErrorOverlay('#reject', {
+ message: 'async failure',
+ file: '/runtime-error/src/entry-client.ts:13:17',
+ frame: ['const asyncFunc = async () => {', 'async failure'],
+ stack: [
+ 'asyncFunc',
+ 'runtime-error/src/entry-client.ts:13:17',
+ 'HTMLButtonElement.document.querySelector.onclick',
+ 'runtime-error/src/entry-client.ts:29:8'
+ ]
+ })
+ })
+
+ test('should handle uncaught string reason', async () => {
+ await testErrorOverlay('#rejectExternal', {
+ message: 'Reject from externalAsync',
+ file: null,
+ frame: null,
+ stack: [
+ "a non-error was thrown please check your browser's devtools for more information"
+ ]
+ })
+ })
+
+ test('should handle rejected module', async () => {
+ await testErrorOverlay('#rejectExternalModule', {
+ message: 'Thrown From Module',
+ file: '/runtime-error/src/module-thrown.ts:1:6',
+ frame: ["throw new Error('Thrown From Module')"],
+ stack: [
+ 'Error: Thrown From Module',
+ '/runtime-error/src/module-thrown.ts:1:6'
+ ]
+ })
+ })
+ })
+}

packages/playground/runtime-error/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Run Time ErrorL</title>
+ </head>
+ <body>
+ <h1>Runtime Error</h1>
+ <button id="throwBtn">Throw Error</button>
+ <button id="invalidAccessor">Invalid Accessor</button>
+
+ <button id="throwStr">Throw String</button>
+ <button id="throwNum">Throw Number</button>
+ <button id="throwExternal">Throw External</button>
+
+ <button id="reject">reject</button>
+ <button id="rejectExternal">Reject External Import</button>
+ <button id="rejectExternalModule">Reject External Module</button>
+ <script type="module" src="/src/entry-client.ts"></script>
+ </body>
+</html>

packages/playground/runtime-error/package.json

@@ -0,0 +1,11 @@
+{
+ "name": "test-runtime-error",
+ "private": true,
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "debug": "node --inspect-brk ../../vite/bin/vite",
+ "preview": "vite preview"
+ }
+}

packages/playground/runtime-error/src/entry-client.ts

@@ -0,0 +1,40 @@
+import { externalThrow } from './external'
+
+document.querySelector<HTMLButtonElement>('#throwBtn').onclick = () => {
+ throw new Error('Why did you click the button')
+}
+
+document.querySelector<HTMLButtonElement>('#invalidAccessor').onclick = () => {
+ //@ts-expect-error
+ window.doesnt.exists = 5
+}
+
+const asyncFunc = async () => {
+ Promise.reject(new Error('async failure'))
+}
+
+document.querySelector<HTMLButtonElement>('#throwStr').onclick = () => {
+ throw 'String Error'
+}
+
+document.querySelector<HTMLButtonElement>('#throwNum').onclick = () => {
+ throw 42
+}
+
+document.querySelector<HTMLButtonElement>('#throwExternal').onclick = () => {
+ externalThrow()
+}
+
+document.querySelector<HTMLButtonElement>('#reject').onclick = async () => {
+ await asyncFunc()
+}
+
+document.querySelector<HTMLButtonElement>('#rejectExternalModule').onclick =
+ async () => {
+ await import('./module-thrown')
+ }
+
+document.querySelector<HTMLButtonElement>('#rejectExternal').onclick =
+ async () => {
+ ;(await import('./external')).externalAsync()
+ }

packages/playground/runtime-error/src/external.js

@@ -0,0 +1,7 @@
+export const externalThrow = () => {
+ throw new Error('Throw from externalThrow')
+}
+
+export const externalAsync = async () => {
+ return Promise.reject('Reject from externalAsync')
+}

packages/playground/runtime-error/src/module-thrown.ts

@@ -0,0 +1 @@
+throw new Error('Thrown From Module')

packages/vite/rollup.config.js

@@ -40,14 +40,16 @@ const clientConfig = {
  input: path.resolve(__dirname, 'src/client/client.ts'),
  external: ['./env', '@vite/env'],
  plugins: [
+ nodeResolve(),
  typescript({
  target: 'es2018',
  include: ['src/client/**/*.ts'],
  baseUrl: path.resolve(__dirname, 'src/client'),
  paths: {
  'types/*': ['../../types/*']
  }
- })
+ }),
+ commonjs({ extensions: ['.js', '.ts'], sourceMap: true })
  ],
  output: {
  file: path.resolve(__dirname, 'dist/client', 'client.mjs'),

packages/vite/src/client/__tests__/error.spec.ts

@@ -0,0 +1,66 @@
+import type { StackLineInfo, StackLineResult } from '../error'
+import { getStackLineInformation } from '../error'
+
+describe('getStackLineInformation', () => {
+ describe('chrome', () => {
+ test('should parse stack line', () => {
+ const input = ' at a (http://domain.com/script.js:1:11764)'
+ const result = getStackLineInformation(input)
+
+ expect(result).toStrictEqual({
+ input,
+ varName: 'a',
+ url: 'http://domain.com/script.js',
+ line: 1,
+ column: 11764,
+ vendor: 'chrome'
+ })
+ })
+
+ test('should parse stack line with eval', () => {
+ const input =
+ ' at Object.eval (eval at <anonymous> (http://domain.com/script.js:1:11764), <anonymous>:35:3729)'
+ const result = getStackLineInformation(input)
+
+ expect(result).toStrictEqual({
+ input,
+ varName: 'Object.eval',
+ url: 'http://domain.com/script.js',
+ line: 1,
+ column: 11764,
+ vendor: 'chrome'
+ })
+ })
+ })
+
+ describe('firefox', () => {
+ test('should parse stack line', () => {
+ const input = 'a@(http://domain.com/script.js:1:11764)'
+ const result = getStackLineInformation(input)
+
+ expect(result).toStrictEqual({
+ input,
+ varName: 'a',
+ url: 'http://domain.com/script.js',
+ line: 1,
+ column: 11764,
+ vendor: 'firefox'
+ })
+ })
+
+ test('should parse stack line with eval', () => {
+ const input =
+ 'Object.eval@http://domain.com/script.js line 1 > eval line 1 > eval:35:3729'
+ const result = getStackLineInformation(input)
+
+ expect(result).toStrictEqual({
+ input,
+ varName: 'Object.eval',
+ url: 'http://domain.com/script.js',
+ line: 1,
+ column: 0,
+ vendor: 'firefox'
+ })
+ })
+ })
+})