feat: network inspector - add launch configuration for new inspector

packages/vscode-extension/package.json

@@ -877,6 +877,10 @@
               "disableNativeBuildStaleChecks": {
                 "type": "boolean",
                 "description": "When set to true, Radon will not run fingerprint checks on reloads and after file changes that would detect whether the native code needs to be rebuilt."
+              },
+              "useNativeNetworkInspector": {
+                "type": "boolean",
+                "description": "When set to true, Radon will use the Native (\"Fusebox\") Network Inspector implementation introduced in 0.83.0. Note, that this requires at least React Native 0.83.0 and it will not intercept network messages for earlier versions."
               }
             }
           }

packages/vscode-extension/src/common/LaunchConfig.ts

@@ -33,6 +33,7 @@ export interface LaunchOptions {
   useCustomJSDebugger?: boolean;
   metroPort?: number;
   disableNativeBuildStaleChecks?: boolean;
+  useNativeNetworkInspector?: boolean;
 }
 
 export const LAUNCH_OPTIONS_KEYS = [
@@ -50,6 +51,7 @@ export const LAUNCH_OPTIONS_KEYS = [
   "preview",
   "usePrebuild",
   "useOldDevtools",
+  "useNativeNetworkInspector",
   "useCustomJSDebugger",
   "metroPort",
   "disableNativeBuildStaleChecks",

packages/vscode-extension/src/plugins/network/network-plugin.ts

@@ -1,23 +1,16 @@
 import { commands, Disposable, window } from "vscode";
-import { SemVer } from "semver";
 import { RadonInspectorBridge } from "../../project/inspectorBridge";
 import { NetworkBridge } from "../../project/networkBridge";
 import { ToolKey, ToolPlugin } from "../../project/tools";
 import { extensionContext } from "../../utilities/extensionContext";
 import { Logger } from "../../Logger";
 import { NetworkDevtoolsWebviewProvider } from "./NetworkDevtoolsWebviewProvider";
 import { WebviewMessage } from "../../network/types/panelMessageProtocol";
-
 import InspectorBridgeNetworkInspector from "./strategies/InspectorBridgeNetworkInspector";
 import DebuggerNetworkInspector from "./strategies/DebuggerNetworkInspector";
 
 export const NETWORK_PLUGIN_ID = "network";
 
-/**
- * Minimum React Native minor version that includes debugger network inspector support
- */
-const MINIMUM_RN_DEBUGGER_INSPECTOR_VERSION = 83;
-
 export type BroadcastListener = (message: WebviewMessage) => void;
 
 export interface NetworkInspector {
@@ -61,9 +54,9 @@ export class NetworkPlugin implements ToolPlugin {
     inspectorBridge: RadonInspectorBridge,
     networkBridge: NetworkBridge,
     metroPort: number,
-    reactNativeVersion: SemVer | null
+    useNativeNetworkInspectorFlag: boolean
   ) {
-    this.networkInspector = this.checkDebuggerNetworkInspectorSupport(reactNativeVersion)
+    this.networkInspector = useNativeNetworkInspectorFlag
       ? new DebuggerNetworkInspector(inspectorBridge, networkBridge, metroPort)
       : new InspectorBridgeNetworkInspector(inspectorBridge, metroPort);
     initialize();
@@ -73,14 +66,6 @@ export class NetworkPlugin implements ToolPlugin {
     return this.networkInspector.pluginAvailable;
   }
 
-  private checkDebuggerNetworkInspectorSupport(reactNativeVersion: SemVer | null): boolean {
-    // using SemVer.compare does not work because it evaluates 0 to false in its implementation
-    if (!reactNativeVersion || reactNativeVersion.minor < MINIMUM_RN_DEBUGGER_INSPECTOR_VERSION) {
-      return false;
-    }
-    return true;
-  }
-
   public enable(): void {
     this.networkInspector.enable();
   }

packages/vscode-extension/src/project/ApplicationContext.ts

@@ -61,6 +61,15 @@ function checkFuseboxSupport(appRoot: string): boolean {
   return supportsFusebox;
 }
 
+function checkNativeNetworkInspectorSupport(appRoot: string): boolean {
+  const reactNativeVersion = getReactNativeVersion(appRoot);
+  if (reactNativeVersion === null) {
+    return false;
+  }
+  const supportsNativeNetworkInspector = reactNativeVersion.compare("0.83.0") >= 0;
+  return supportsNativeNetworkInspector;
+}
+
 function resolveLaunchConfig(configuration: LaunchConfiguration): ResolvedLaunchConfig {
   const appRoot = configuration.appRoot;
   const absoluteAppRoot = path.resolve(workspace.workspaceFolders![0].uri.fsPath, appRoot);
@@ -106,6 +115,9 @@ function resolveLaunchConfig(configuration: LaunchConfiguration): ResolvedLaunch
     },
     usePrebuild: configuration.usePrebuild,
     useOldDevtools: configuration.useOldDevtools ?? !checkFuseboxSupport(absoluteAppRoot),
+    useNativeNetworkInspector:
+      configuration.useNativeNetworkInspector ??
+      checkNativeNetworkInspectorSupport(absoluteAppRoot),
   };
 }
 

packages/vscode-extension/src/project/tools.ts

@@ -1,6 +1,5 @@
 import { Disposable } from "vscode";
 import _ from "lodash";
-import { SemVer } from "semver";
 import { RadonInspectorBridge } from "./inspectorBridge";
 import { NetworkBridge } from "./networkBridge";
 import { extensionContext } from "../utilities/extensionContext";
@@ -28,7 +27,7 @@ import {
   APOLLO_PLUGIN_ID,
   ApolloClientDevtoolsPlugin,
 } from "../plugins/apollo-client-devtools-plugin/apollo-client-devtools-plugin";
-import { ApplicationContext } from "./ApplicationContext";
+import { ApplicationContext, ResolvedLaunchConfig } from "./ApplicationContext";
 
 const TOOLS_SETTINGS_KEY = "tools_settings";
 
@@ -69,7 +68,8 @@ export class ToolsManager implements Disposable {
   private activePlugins: Set<ToolPlugin> = new Set();
   private disposables: Disposable[] = [];
   private readonly workspaceConfigState: StateManager<WorkspaceConfiguration>;
-  private readonly reactNativeVersion: SemVer | null;
+  private readonly launchConfig: ResolvedLaunchConfig;
+  private readonly useNativeNetworkInspectorFlag: boolean;
 
   public constructor(
     private readonly stateManager: StateManager<ToolsState>,
@@ -79,7 +79,8 @@ export class ToolsManager implements Disposable {
     public readonly metroPort: number
   ) {
     this.workspaceConfigState = this.applicationContext.workspaceConfigState;
-    this.reactNativeVersion = this.applicationContext.reactNativeVersion;
+    this.launchConfig = this.applicationContext.launchConfig;
+    this.useNativeNetworkInspectorFlag = this.launchConfig.useNativeNetworkInspector ?? false;
 
     this.toolsSettings = Object.assign({}, extensionContext.workspaceState.get(TOOLS_SETTINGS_KEY));
     for (const plugin of createExpoDevPluginTools()) {
@@ -105,7 +106,12 @@ export class ToolsManager implements Disposable {
     this.plugins.set(APOLLO_PLUGIN_ID, new ApolloClientDevtoolsPlugin(inspectorBridge));
     this.plugins.set(
       NETWORK_PLUGIN_ID,
-      new NetworkPlugin(inspectorBridge, networkBridge, metroPort, this.reactNativeVersion)
+      new NetworkPlugin(
+        inspectorBridge,
+        networkBridge,
+        metroPort,
+        this.useNativeNetworkInspectorFlag
+      )
     );
     this.plugins.set(
       RENDER_OUTLINES_PLUGIN_ID,

packages/vscode-extension/src/webview/views/LaunchConfigurationView.tsx

@@ -89,6 +89,7 @@ function serializeLaunchConfig(formData: FormData, defaultAppRoot: string) {
     isExpo: valueAsBoolean(data.isExpo),
     env: data.env ? JSON.parse(data.env) : {},
     usePrebuild: valueAsBoolean(data.usePrebuild),
+    useNativeNetworkInspector: valueAsBoolean(data.useNativeNetworkInspector),
   };
 
   for (const platform of ["ios", "android"] as const) {
@@ -300,6 +301,39 @@ function LaunchConfigurationView({
           </SingleSelect>
         </FormGroup>
 
+        <FormGroup variant="settings-group">
+          <Label>Use Native Network Inspector Implementation</Label>
+          <FormHelper>
+            {launchConfigAttrs?.properties?.useNativeNetworkInspector?.description}
+          </FormHelper>
+          <SingleSelect
+            data-testid="launch-configuration-use-native-network-inspector-select"
+            name="useNativeNetworkInspector"
+            initialValue={
+              launchConfig?.useNativeNetworkInspector === undefined
+                ? ""
+                : launchConfig.useNativeNetworkInspector
+                  ? "true"
+                  : "false"
+            }>
+            <Option
+              value=""
+              data-testid="launch-configuration-use-native-network-inspector-select-detect-automatically">
+              Detect automatically
+            </Option>
+            <Option
+              value="true"
+              data-testid="launch-configuration-use-native-network-inspector-select-yes">
+              Yes
+            </Option>
+            <Option
+              value="false"
+              data-testid="launch-configuration-use-native-network-inspector-select-no">
+              No
+            </Option>
+          </SingleSelect>
+        </FormGroup>
+
         <FormGroup variant="settings-group">
           <Label>Environment Variables</Label>
           <FormHelper>{launchConfigAttrs?.properties?.env?.description}</FormHelper>