From 5c5da8d2fbb37830f3ee81830d4c9afcd2c1a3e3 Mon Sep 17 00:00:00 2001
From: Sam Hulick <ffxsam@users.noreply.github.com>
Date: Tue, 1 Aug 2023 10:33:38 -0500
Subject: [PATCH] feat: add logging for when hydrate's JSON parse fails (#7887)

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
---
 .changeset/gorgeous-starfishes-serve.md       |  5 ++++
 .../astro/src/runtime/server/astro-island.ts  | 26 ++++++++++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/gorgeous-starfishes-serve.md

diff --git a/.changeset/gorgeous-starfishes-serve.md b/.changeset/gorgeous-starfishes-serve.md
new file mode 100644
index 0000000000..401ab1eedb
--- /dev/null
+++ b/.changeset/gorgeous-starfishes-serve.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Add logging for when JSON.parse fails within hydrate func
diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts
index 5887f3149b..a108044acf 100644
--- a/packages/astro/src/runtime/server/astro-island.ts
+++ b/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'),
 					});