From 8049f0cd91b239c52e37d571e3ba3e703cf0e4cf Mon Sep 17 00:00:00 2001
From: Bjorn Lu <bjornlu.dev@gmail.com>
Date: Fri, 29 Dec 2023 22:52:43 +0700
Subject: [PATCH] Fix error overlay display on malformed uri (#9548)

---
 .changeset/great-beans-check.md                     | 5 +++++
 packages/astro/src/core/errors/dev/vite.ts          | 2 +-
 packages/astro/src/core/errors/overlay.ts           | 4 ++--
 packages/astro/src/vite-plugin-astro-server/base.ts | 8 +++++++-
 4 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/great-beans-check.md

diff --git a/.changeset/great-beans-check.md b/.changeset/great-beans-check.md
new file mode 100644
index 0000000000..69e188bd0a
--- /dev/null
+++ b/.changeset/great-beans-check.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes error overlay display on URI malformed error
diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
index f2f149b3f5..1bd4481451 100644
--- a/packages/astro/src/core/errors/dev/vite.ts
+++ b/packages/astro/src/core/errors/dev/vite.ts
@@ -111,7 +111,7 @@ export interface AstroErrorPayload {
 		hint?: string;
 		docslink?: string;
 		highlightedCode?: string;
-		loc: {
+		loc?: {
 			file?: string;
 			line?: number;
 			column?: number;
diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
index 9a6e5481c8..1062680bd9 100644
--- a/packages/astro/src/core/errors/overlay.ts
+++ b/packages/astro/src/core/errors/overlay.ts
@@ -631,7 +631,7 @@ class ErrorOverlay extends HTMLElement {
 		}
 
 		const code = this.root.querySelector<HTMLElement>('#code');
-		if (code && err.loc.file) {
+		if (code && err.loc?.file) {
 			code.style.display = 'block';
 			const codeHeader = code.querySelector<HTMLHeadingElement>('#code header');
 			const codeContent = code.querySelector<HTMLDivElement>('#code-content');
@@ -670,7 +670,7 @@ class ErrorOverlay extends HTMLElement {
 						}
 
 						// Add an empty line below the error line so we can show a caret under the error
-						if (err.loc.column) {
+						if (err.loc?.column) {
 							errorLine.insertAdjacentHTML(
 								'afterend',
 								`\n<span class="line error-caret"><span style="padding-left:${
diff --git a/packages/astro/src/vite-plugin-astro-server/base.ts b/packages/astro/src/vite-plugin-astro-server/base.ts
index 68eeae21a3..375e0d4f4b 100644
--- a/packages/astro/src/vite-plugin-astro-server/base.ts
+++ b/packages/astro/src/vite-plugin-astro-server/base.ts
@@ -20,7 +20,13 @@ export function baseMiddleware(
 	return function devBaseMiddleware(req, res, next) {
 		const url = req.url!;
 
-		const pathname = decodeURI(new URL(url, 'http://localhost').pathname);
+		let pathname: string;
+		try {
+			pathname = decodeURI(new URL(url, 'http://localhost').pathname);
+		} catch (e) {
+			/* malform uri */
+			return next(e);
+		}
 
 		if (pathname.startsWith(devRoot)) {
 			req.url = url.replace(devRoot, devRootReplacement);