feat: add logging for when hydrate's JSON parse fails (#7887)

Co-authored-by: Emanuele Stoppa <[email protected]>
Co-authored-by: Bjorn Lu <[email protected]>

.changeset/gorgeous-starfishes-serve.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add logging for when JSON.parse fails within hydrate func

packages/astro/src/runtime/server/astro-island.ts

@@ -127,9 +127,29 @@ declare const Astro: {
 						if (!closest?.isSameNode(this)) continue;
 						slots[slot.getAttribute('name') || 'default'] = slot.innerHTML;
 					}
-					const props = this.hasAttribute('props')
-						? JSON.parse(this.getAttribute('props')!, reviver)
-						: {};
+
+					let props: Record<string, unknown>;
+
+					try {
+						props = this.hasAttribute('props')
+							? JSON.parse(this.getAttribute('props')!, reviver)
+							: {};
+					} catch (e) {
+						let componentName: string = this.getAttribute('component-url') || '<unknown>';
+						const componentExport = this.getAttribute('component-export');
+
+						if (componentExport) {
+							componentName += ` (export ${componentExport})`;
+						}
+
+						// eslint-disable-next-line no-console
+						console.error(
+							`[hydrate] Error parsing props for component ${componentName}`,
+							this.getAttribute('props'),
+							e
+						);
+						throw e;
+					}
 					await this.hydrator(this)(this.Component, props, slots, {
 						client: this.getAttribute('client'),
 					});