Fix error overlay display on malformed uri (#9548)

Author: bluwy

.changeset/great-beans-check.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes error overlay display on URI malformed error

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;

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:${

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);