fix: upgrade client to expo 56 (#147)

Upgrade the React Native client through Expo SDK 56, align workspace React versions, switch Bun installs to the hoisted linker for Expo compatibility, and fix the Metro proxy to handle localhost/IPv6 loopback after the SDK upgrade.

apps/freya-client/scripts/dev-proxy.ts

@@ -8,14 +8,16 @@ import type { ServerWebSocket } from "bun"
 
 const PROXY_PORT = parseInt(process.env.PROXY_PORT || "8080", 10)
 const PROXY_HOST = process.env.PROXY_HOST || "0.0.0.0"
+const METRO_HOST = process.env.METRO_HOST || "localhost"
 const METRO_PORT = parseInt(process.env.METRO_PORT || "8081", 10)
-const METRO_BASE = `http://127.0.0.1:${METRO_PORT}`
+const METRO_BASE = `http://${METRO_HOST}:${METRO_PORT}`
+const METRO_WS_BASE = `ws://${METRO_HOST}:${METRO_PORT}`
 
 function forwardHeaders(headers: Headers): Headers {
 	const result = new Headers(headers)
 	result.delete("origin")
 	result.delete("referer")
-	result.set("host", `127.0.0.1:${METRO_PORT}`)
+	result.set("host", `${METRO_HOST}:${METRO_PORT}`)
 	return result
 }
 
@@ -40,7 +42,7 @@ Bun.serve<WsData>({
 
 		// WebSocket upgrade — bridge to Metro's ws endpoint
 		if (req.headers.get("upgrade")?.toLowerCase() === "websocket") {
-			const wsUrl = `ws://127.0.0.1:${METRO_PORT}${url.pathname}${url.search}`
+			const wsUrl = `${METRO_WS_BASE}${url.pathname}${url.search}`
 			const upstream = new WebSocket(wsUrl)
 
 			// Wait for upstream to connect before upgrading the client
@@ -65,12 +67,12 @@ Bun.serve<WsData>({
 		// HTTP proxy
 		const upstream = `${METRO_BASE}${url.pathname}${url.search}`
 		const body = req.body ? await req.arrayBuffer() : undefined
-		const res = await fetch(upstream, {
-			method: req.method,
-			headers: forwardHeaders(req.headers),
-			body,
-			redirect: "manual",
-		})
+		const res = await fetchUpstream(upstream, req.method, forwardHeaders(req.headers), body)
+		if (res == null) {
+			return new Response(`Metro is not reachable on ${METRO_HOST}. Restart the Expo dev server.`, {
+				status: 502,
+			})
+		}
 
 		return new Response(res.body, {
 			status: res.status,
@@ -121,9 +123,7 @@ async function printDebuggerUrl() {
 	const target = targets.find((t) => t.reactNative?.capabilities?.prefersFuseboxFrontend)
 	if (!target) return
 
-	const wsPath = target.webSocketDebuggerUrl
-		.replace(/^ws:\/\//, "")
-		.replace(`127.0.0.1:${METRO_PORT}`, `${tsIp}:${PROXY_PORT}`)
+	const wsPath = getProxyWebSocketPath(target.webSocketDebuggerUrl)
 
 	console.log(
 		`\n  React Native DevTools:\n  ${base}/debugger-frontend/rn_fusebox.html?ws=${encodeURIComponent(wsPath)}&sources.hide_add_folder=true&unstable_enableNetworkPanel=true\n`,
@@ -131,9 +131,28 @@ async function printDebuggerUrl() {
 }
 
 console.log(
-	`[proxy] listening on ${PROXY_HOST}:${PROXY_PORT}, forwarding to 127.0.0.1:${METRO_PORT}`,
+	`[proxy] listening on ${PROXY_HOST}:${PROXY_PORT}, forwarding to ${METRO_HOST}:${METRO_PORT}`,
 )
 
+async function fetchUpstream(
+	upstream: string,
+	method: string,
+	headers: Headers,
+	body: ArrayBuffer | undefined,
+) {
+	try {
+		return await fetch(upstream, {
+			method,
+			headers,
+			body,
+			redirect: "manual",
+		})
+	} catch {
+		console.error(`[proxy] ${method} ${upstream} failed; Metro is not reachable`)
+		return null
+	}
+}
+
 function isDebugTarget(value: unknown): value is DebugTarget {
 	if (!isRecord(value) || typeof value.webSocketDebuggerUrl !== "string") return false
 
@@ -149,6 +168,11 @@ function isDebugTarget(value: unknown): value is DebugTarget {
 	return prefersFuseboxFrontend === undefined || typeof prefersFuseboxFrontend === "boolean"
 }
 
+function getProxyWebSocketPath(webSocketDebuggerUrl: string) {
+	const url = new URL(webSocketDebuggerUrl)
+	return `${tsIp}:${PROXY_PORT}${url.pathname}${url.search}`
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
 	return typeof value === "object" && value !== null
 }

apps/freya-client/scripts/open-debugger.ts

@@ -4,7 +4,6 @@
 import { $ } from "bun"
 
 const PROXY_PORT = process.env.PROXY_PORT || "8080"
-const METRO_PORT = process.env.METRO_PORT || "8081"
 const tsIp = (await $`tailscale ip -4`.text()).trim()
 const base = `http://${tsIp}:${PROXY_PORT}`
 
@@ -37,9 +36,7 @@ if (!target) {
 	process.exit(1)
 }
 
-const wsUrl = target.webSocketDebuggerUrl
-	.replace(/^ws:\/\//, "")
-	.replace(`127.0.0.1:${METRO_PORT}`, `${tsIp}:${PROXY_PORT}`)
+const wsUrl = getProxyWebSocketPath(target.webSocketDebuggerUrl)
 
 const url = `${base}/debugger-frontend/rn_fusebox.html?ws=${encodeURIComponent(wsUrl)}&sources.hide_add_folder=true&unstable_enableNetworkPanel=true`
 
@@ -71,6 +68,11 @@ function isDebugTarget(value: unknown): value is DebugTarget {
 	return prefersFuseboxFrontend === undefined || typeof prefersFuseboxFrontend === "boolean"
 }
 
+function getProxyWebSocketPath(webSocketDebuggerUrl: string) {
+	const url = new URL(webSocketDebuggerUrl)
+	return `${tsIp}:${PROXY_PORT}${url.pathname}${url.search}`
+}
+
 function isRecord(value: unknown): value is Record<string, unknown> {
 	return typeof value === "object" && value !== null
 }

apps/freya-client/scripts/run-dev-server.sh

@@ -1,14 +1,47 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
-PROXY_PORT=8080
-METRO_PORT=8081
+PROXY_PORT=${PROXY_PORT:-8080}
+METRO_HOST=${METRO_HOST:-localhost}
+METRO_PORT=${METRO_PORT:-8081}
 TS_IP=$(tailscale ip -4)
 
-# Start a reverse proxy so Metro sees all requests as loopback.
-# This makes debugger endpoints (/debugger-frontend, /json, /open-debugger)
-# accessible through the Tailscale IP.
-PROXY_PORT=$PROXY_PORT METRO_PORT=$METRO_PORT bun run scripts/dev-proxy.ts &
+port_is_open() {
+	(: >"/dev/tcp/$1/$2") >/dev/null 2>&1
+}
+
+ensure_port_available() {
+	local port=$1
+	local name=$2
+
+	if port_is_open localhost "$port"; then
+		echo "$name port $port is already in use." >&2
+		echo "Stop the existing process or set ${name}_PORT to another value." >&2
+		exit 1
+	fi
+}
+
+wait_for_metro() {
+	for _ in {1..120}; do
+		if port_is_open "$METRO_HOST" "$METRO_PORT"; then
+			return 0
+		fi
+		sleep 0.5
+	done
+
+	echo "Metro did not start on ${METRO_HOST}:${METRO_PORT}." >&2
+	return 1
+}
+
+ensure_port_available "$PROXY_PORT" PROXY
+ensure_port_available "$METRO_PORT" METRO
+
+# Start the proxy only after Metro is listening. Otherwise an iOS client can hit
+# the proxy during Expo startup and get a misleading upstream connection error.
+(
+	wait_for_metro
+	exec env PROXY_PORT=$PROXY_PORT METRO_HOST=$METRO_HOST METRO_PORT=$METRO_PORT bun run scripts/dev-proxy.ts
+) &
 PROXY_PID=$!
 trap "kill $PROXY_PID 2>/dev/null" EXIT