From f5f71094ec74961b4cca2ee451798abd830c617a Mon Sep 17 00:00:00 2001
From: Florian Lefebvre <contact@florian-lefebvre.dev>
Date: Fri, 8 Nov 2024 16:07:40 +0100
Subject: [PATCH] fix: error overlay message escape (#12305)

Co-authored-by: Princesseuh <3019731+Princesseuh@users.noreply.github.com>
---
 .changeset/breezy-plums-clap.md               |  5 +++++
 packages/astro/src/core/errors/dev/vite.ts    |  2 ++
 packages/astro/src/core/module-loader/vite.ts | 21 +++++++++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 .changeset/breezy-plums-clap.md

diff --git a/.changeset/breezy-plums-clap.md b/.changeset/breezy-plums-clap.md
new file mode 100644
index 0000000000..d6d3f4b26a
--- /dev/null
+++ b/.changeset/breezy-plums-clap.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes a case where the error overlay would not escape the message
diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
index 56688877a8..9063e45b70 100644
--- a/packages/astro/src/core/errors/dev/vite.ts
+++ b/packages/astro/src/core/errors/dev/vite.ts
@@ -105,6 +105,7 @@ export function enhanceViteSSRError({
 }
 
 export interface AstroErrorPayload {
+	__isEnhancedAstroErrorPayload: true;
 	type: ErrorPayload['type'];
 	err: Omit<ErrorPayload['err'], 'loc'> & {
 		name?: string;
@@ -164,6 +165,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 		: undefined;
 
 	return {
+		__isEnhancedAstroErrorPayload: true,
 		type: 'error',
 		err: {
 			...err,
diff --git a/packages/astro/src/core/module-loader/vite.ts b/packages/astro/src/core/module-loader/vite.ts
index 1b2a4423cf..20aea87e25 100644
--- a/packages/astro/src/core/module-loader/vite.ts
+++ b/packages/astro/src/core/module-loader/vite.ts
@@ -1,6 +1,9 @@
 import { EventEmitter } from 'node:events';
 import path from 'node:path';
+import { pathToFileURL } from 'node:url';
 import type * as vite from 'vite';
+import { collectErrorMetadata } from '../errors/dev/utils.js';
+import { getViteErrorPayload } from '../errors/dev/vite.js';
 import type { ModuleLoader, ModuleLoaderEventEmitter } from './loader.js';
 
 export function createViteLoader(viteServer: vite.ViteDevServer): ModuleLoader {
@@ -43,6 +46,24 @@ export function createViteLoader(viteServer: vite.ViteDevServer): ModuleLoader {
 		}
 		const msg = args[0] as vite.HMRPayload;
 		if (msg?.type === 'error') {
+			// If we have an error, but it didn't go through our error enhancement program, it means that it's a HMR error from
+			// vite itself, which goes through a different path. We need to enhance it here.
+			if (!(msg as any)['__isEnhancedAstroErrorPayload']) {
+				const err = collectErrorMetadata(msg.err, pathToFileURL(viteServer.config.root));
+				getViteErrorPayload(err).then((payload) => {
+					events.emit('hmr-error', {
+						type: 'error',
+						err: {
+							message: payload.err.message,
+							stack: payload.err.stack,
+						},
+					});
+
+					args[0] = payload;
+					_wsSend.apply(this, args);
+				});
+				return;
+			}
 			events.emit('hmr-error', msg);
 		}
 		_wsSend.apply(this, args);