From 8ef807bfb2e596bd70f0c8b17f1b6f698d98ae2a Mon Sep 17 00:00:00 2001
From: Cedric van Putten <me@bycedric.com>
Date: Thu, 7 Dec 2023 08:30:03 -0800
Subject: [PATCH] feature(dev-middleware): add `enableNetworkInspector`
 experiment (#41787)

Summary:
This enables the network panel/inspector by passing the `unstable_enableNetworkPanel=true` to the React Native JS Inspector. (See https://github.com/facebookexperimental/rn-chrome-devtools-frontend/pull/2)

By setting this inside the `experiments`, we can enable/disable network related CDP handlers within the proxy.

## Changelog:

[GENERAL] [ADDED] - Add `enableNetworkInspector` experiment to enable Network panel and CDP handlers in inspector proxy

Pull Request resolved: https://github.com/facebook/react-native/pull/41787

Test Plan: TBD, will provide a repository using an Expo canary / RN 0.73.0-rc release.

Reviewed By: NickGerleman

Differential Revision: D51811892

Pulled By: huntie

fbshipit-source-id: 541d96b6f0735104a4050a24a152e1158871ed1d
---
 packages/dev-middleware/src/createDevMiddleware.js       | 1 +
 .../src/middleware/openDebuggerMiddleware.js             | 3 +++
 packages/dev-middleware/src/types/Experiments.js         | 5 +++++
 .../dev-middleware/src/utils/getDevToolsFrontendUrl.js   | 9 ++++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/dev-middleware/src/createDevMiddleware.js b/packages/dev-middleware/src/createDevMiddleware.js
index 12892521e32c67..e6c9dc1f7d93e2 100644
--- a/packages/dev-middleware/src/createDevMiddleware.js
+++ b/packages/dev-middleware/src/createDevMiddleware.js
@@ -126,5 +126,6 @@ function getExperiments(config: ExperimentsConfig): Experiments {
   return {
     enableNewDebugger: config.enableNewDebugger ?? false,
     enableOpenDebuggerRedirect: config.enableOpenDebuggerRedirect ?? false,
+    enableNetworkInspector: config.enableNetworkInspector ?? false,
   };
 }
diff --git a/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js b/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
index 0fbf49337083dc..c2aaded070ab04 100644
--- a/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
+++ b/packages/dev-middleware/src/middleware/openDebuggerMiddleware.js
@@ -64,6 +64,7 @@ export default function openDebuggerMiddleware({
         app =>
           app.title === 'React Native Experimental (Improved Chrome Reloads)',
       );
+
       let target;
 
       const launchType: 'launch' | 'redirect' =
@@ -117,6 +118,7 @@ export default function openDebuggerMiddleware({
               frontendInstanceId,
               await browserLauncher.launchDebuggerAppWindow(
                 getDevToolsFrontendUrl(
+                  experiments,
                   target.webSocketDebuggerUrl,
                   serverBaseUrl,
                 ),
@@ -127,6 +129,7 @@ export default function openDebuggerMiddleware({
           case 'redirect':
             res.writeHead(302, {
               Location: getDevToolsFrontendUrl(
+                experiments,
                 target.webSocketDebuggerUrl,
                 // Use a relative URL.
                 '',
diff --git a/packages/dev-middleware/src/types/Experiments.js b/packages/dev-middleware/src/types/Experiments.js
index 9f15d94c8ef3d7..c5c2c9af439b07 100644
--- a/packages/dev-middleware/src/types/Experiments.js
+++ b/packages/dev-middleware/src/types/Experiments.js
@@ -23,6 +23,11 @@ export type Experiments = $ReadOnly<{
    * interface.
    */
   enableOpenDebuggerRedirect: boolean,
+
+  /**
+   * Enables the Network panel when launching the custom debugger frontend.
+   */
+  enableNetworkInspector: boolean,
 }>;
 
 export type ExperimentsConfig = Partial<Experiments>;
diff --git a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
index 0178c4db2d3f73..76b497e04db814 100644
--- a/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
+++ b/packages/dev-middleware/src/utils/getDevToolsFrontendUrl.js
@@ -9,10 +9,13 @@
  * @oncall react_native
  */
 
+import type {Experiments} from '../types/Experiments';
+
 /**
  * Get the DevTools frontend URL to debug a given React Native CDP target.
  */
 export default function getDevToolsFrontendUrl(
+  experiments: Experiments,
   webSocketDebuggerUrl: string,
   devServerUrl: string,
 ): string {
@@ -22,5 +25,9 @@ export default function getDevToolsFrontendUrl(
     webSocketDebuggerUrl.replace(/^wss?:\/\//, ''),
   );
 
-  return `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
+  const devToolsUrl = `${appUrl}?${scheme}=${webSocketUrlWithoutProtocol}&sources.hide_add_folder=true`;
+
+  return experiments.enableNetworkInspector
+    ? `${devToolsUrl}&unstable_enableNetworkPanel=true`
+    : devToolsUrl;
 }