Connect debugger before loading bundle

packages/react-native/ReactCxxPlatform/react/runtime/ReactHost.cpp

@@ -240,6 +240,10 @@ void ReactHost::createReactInstance() {
   auto jsInvoker = std::make_shared<RuntimeSchedulerCallInvoker>(
       reactInstance_->getRuntimeScheduler());
 
+  if (inspector_ != nullptr) {
+    inspector_->connectDebugger(devServerHelper_->getInspectorUrl());
+  }
+
   auto liveReloadCallback = [this]() { reloadReactInstance(); };
   reactInstance_->initializeRuntime(
       {
@@ -451,9 +455,6 @@ bool ReactHost::loadScriptFromDevServer() {
     auto script = std::make_unique<JSBigStdString>(response);
     reactInstance_->loadScript(
         std::move(script), devServerHelper_->getBundleUrl());
-    if (inspector_ != nullptr) {
-      inspector_->connectDebugger(devServerHelper_->getInspectorUrl());
-    }
     devServerHelper_->setupHMRClient();
     return true;
   } catch (...) {

private/react-native-fantom/runner/global-setup/globalSetup.js

@@ -11,6 +11,7 @@
 import {isOSS, validateEnvironmentVariables} from '../EnvironmentOptions';
 import build from './build';
 import Metro from 'metro';
+import {Server} from 'net';
 import path from 'path';
 
 export default async function globalSetup(
@@ -33,26 +34,38 @@ async function startMetroServer() {
     config: path.resolve(__dirname, '..', '..', 'config', 'metro.config.js'),
   });
 
+  if (process.env.__FANTOM_METRO_PORT__ == null) {
+    const availablePort = await findAvailablePort();
+    process.env.__FANTOM_METRO_PORT__ = String(availablePort);
+  }
+
   // We need to reuse the same port across runs because can only set environment
   // variables for workers in the first one.
   // $FlowExpectedError[cannot-write]
-  metroConfig.server.port =
-    process.env.__FANTOM_METRO_PORT__ != null
-      ? Number(process.env.__FANTOM_METRO_PORT__)
-      : // Any available port
-        0;
+  metroConfig.server.port = Number(process.env.__FANTOM_METRO_PORT__);
 
   const server = await Metro.runServer(metroConfig, {
     waitForBundler: true,
     watch: true,
   });
 
-  if (process.env.__FANTOM_METRO_PORT__ == null) {
-    process.env.__FANTOM_METRO_PORT__ = String(
-      server.httpServer.address().port,
-    );
-  }
-
   // $FlowExpectedError[prop-missing]
-  globalThis.__METRO_SERVER__ = server;
+  globalThis.__FANTOM_METRO_SERVER__ = server;
+}
+
+async function findAvailablePort(): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const server = new Server();
+    server.listen(0, 'localhost', undefined, () => {
+      const port = server.address().port;
+      server.close(error => {
+        if (error != null) {
+          reject(error);
+        } else {
+          resolve(port);
+        }
+      });
+    });
+    server.on('error', reject);
+  });
 }

private/react-native-fantom/runner/global-setup/globalTeardown.js

@@ -12,11 +12,12 @@ import type {RunServerResult} from 'metro';
 
 type MetroServer = $NonMaybeType<RunServerResult?.['httpServer']>;
 
-declare var __METRO_SERVER__: ?RunServerResult;
+declare var __FANTOM_METRO_SERVER__: ?RunServerResult;
 
 function getMetroServer(): ?MetroServer {
-  return typeof __METRO_SERVER__ !== 'undefined' && __METRO_SERVER__ != null
-    ? __METRO_SERVER__.httpServer
+  return typeof __FANTOM_METRO_SERVER__ !== 'undefined' &&
+    __FANTOM_METRO_SERVER__ != null
+    ? __FANTOM_METRO_SERVER__.httpServer
     : null;
 }