Improve error message

withastro · Sep 30, 2024 · 5f80ac5 · 5f80ac5
1 parent 9816cb8
commit 5f80ac5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/packages/astro/src/runtime/server/hydration.ts b/packages/astro/src/runtime/server/hydration.ts
@@ -159,7 +159,7 @@ export async function generateHydrateScript(
 	if (renderer.clientEntrypoint) {
 		island.props['component-export'] = componentExport.value;
 		island.props['renderer-url'] = await result.resolve(decodeURI(renderer.clientEntrypoint));
-		island.props['props'] = escapeHTML(serializeProps(props));
+		island.props['props'] = escapeHTML(serializeProps(props, metadata.displayName));
 	}
 
 	island.props['ssr'] = '';

diff --git a/packages/astro/src/runtime/server/render/component.ts b/packages/astro/src/runtime/server/render/component.ts
@@ -16,6 +16,7 @@ import type {
 	SSRLoadedRenderer,
 	SSRResult,
 } from '../../../types/public/internal.js';
+import { serializeProps } from '../serialize.js';
 import {
 	Fragment,
 	type RenderDestination,
@@ -28,7 +29,6 @@ import { maybeRenderHead } from './head.js';
 import { containsServerDirective, renderServerIsland } from './server-islands.js';
 import { type ComponentSlots, renderSlotToString, renderSlots } from './slot.js';
 import { formatList, internalSpreadAttributes, renderElement, voidElementNames } from './util.js';
-import { serializeProps } from '../serialize.js';
 
 const needsHeadRenderingSymbol = Symbol.for('astro.needsHeadRendering');
 const rendererAliases = new Map([['solid', 'solid-js']]);
@@ -331,6 +331,7 @@ If you're still stuck, please open an issue on GitHub or join us at https://astr
 	const astroId = shorthash(
 		`<!--${metadata.componentExport!.value}:${metadata.componentUrl}-->\n${html}\n${serializeProps(
 			props,
+			metadata.displayName,
 		)}`,
 	);
 

diff --git a/packages/astro/src/runtime/server/serialize.ts b/packages/astro/src/runtime/server/serialize.ts
@@ -1,10 +1,14 @@
 import { uneval } from 'devalue';
 
-export function serializeProps(props: Record<string, unknown>) {
+export function serializeProps(props: Record<string, unknown>, componentName: string) {
 	// Remove symbolic keys as devalue can't handle them and they don't really make sense to be
 	// serialized as symbolic keys aren't really equal between the client and server realms
 	if (Object.getOwnPropertySymbols(props).length) {
 		props = Object.fromEntries(Object.entries(props).filter(([key]) => typeof key !== 'symbol'));
 	}
-	return uneval(props);
+	try {
+		return uneval(props);
+	} catch (e) {
+		throw new Error(`Unable to serialize props for <${componentName} />`, { cause: e });
+	}
 }