qol(islands): improve hydration errors (#10075)

* improve error messages for island hydration

* add changeset

---------

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

2 files changed, 13 insertions, 4 deletions

diff --git a/.changeset/giant-zoos-fail.md b/.changeset/giant-zoos-fail.md
new file mode 100644
index 000000000..2c4188541
--- /dev/null
+++ b/.changeset/giant-zoos-fail.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Improves error messages for island hydration.
diff --git a/packages/astro/src/runtime/server/astro-island.ts b/packages/astro/src/runtime/server/astro-island.ts
index 58eb7f2e0..7741de25d 100644
--- a/packages/astro/src/runtime/server/astro-island.ts
+++ b/packages/astro/src/runtime/server/astro-island.ts
@@ -9,7 +9,7 @@ declare const Astro: {
 		fn: () => Promise<() => void>,
 		opts: Record<string, any>,
 		root: HTMLElement
-	) => void;
+	) => unknown;
 };
 
 {
@@ -93,14 +93,15 @@ declare const Astro: {
 					}
 					this.start();
 				}
-				start() {
+				async start() {
 					const opts = JSON.parse(this.getAttribute('opts')!) as Record<string, any>;
 					const directive = this.getAttribute('client') as directiveAstroKeys;
 					if (Astro[directive] === undefined) {
 						window.addEventListener(`astro:${directive}`, () => this.start(), { once: true });
 						return;
 					}
-					Astro[directive]!(
+					try {
+					await Astro[directive]!(
 						async () => {
 							const rendererUrl = this.getAttribute('renderer-url');
 							const [componentModule, { default: hydrator }] = await Promise.all([
@@ -121,7 +122,10 @@ declare const Astro: {
 						},
 						opts,
 						this
-					);
+					)
+					} catch (e) {
+						console.error(`[astro-island] Error hydrating ${this.getAttribute('component-url')}`, e);
+					}
 				}
 				hydrate = async () => {
 					// The client directive needs to load the hydrator code before it can hydrate