Add react devtools profiler support (#1117)

This PR adds a new tool – React Profiler

React Profiler integration allows controlling (starting/stopping) of the
profile via React Devtools and also to open the profiles in a standalone
editor panel.



https://github.com/user-attachments/assets/b525808b-6eb1-4fa4-95ac-de052121e7de


Below is an overview of the changes made in this PR:
- We use devtools-hedless package to access react devtools' profiler
store to control the profiling
- When profiling is finished, we use the export method exposed via
devtools-headless package to dump the profile into a file and save under
'.reactprofile' extension
- We're implementing a new editor provider that can open '.reactprofile'
files. The editor uses the devtools-inline package to present the UI and
uses the profile import method from devtools-headless package to process
the profile data.
- We're adding buttons to the tools menu to initiate the profiling and
use the CPU profiling style indicator when the profiler is running.
- We're updating vite configuration – for some reason after adding a new
input, vite in release mode started splitting CSS into more chunks.
Before it was just main chunk and theme chunk. Instead of adding more
dependencies I decided it will be easier to force it to not do chunking
at all and use single style.css for all the webviews.
- We are adding additional options to the webview CSP because devtools
use JS's eval and also boot up a worker thread using blob URL.

### How Has This Been Tested: 
1. Open IDE panel and wait for app to load
2. Click "Start React Profiler"
3. Observe a profiler indicator appear (similar as with the CPU
profiling)
4. Do something with the app
5. Click stop
6. The profiler will stop (indicator is gone) and a profile will be
automatically opened in a new editor tab
7. Run everything in release mode (DEV=false in weviewContentGenerator)
– check other panels like network to make sure vite changes didn't mess
something up

Author: kmagiera

packages/vscode-extension/assets/react.svg

@@ -680,6 +680,18 @@
         "description": "Get up-to-date answers related to React Native",
         "isSticky": true
       }
+    ],
+    "customEditors": [
+      {
+        "viewType": "RadonIDE.reactDevtoolsProfiler",
+        "displayName": "React Profiler",
+        "selector": [
+          {
+            "filenamePattern": "*.reactprofile"
+          }
+        ],
+        "priority": "default"
+      }
     ]
   },
   "scripts": {
@@ -780,8 +792,10 @@
     "prettier": "3.5.3",
     "re-resizable": "^6.11.2",
     "react": "^19.1.0",
+    "react-devtools-inline": "^6.1.1",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.55.0",
+    "react-is": "^19.1.0",
     "react-scan": "https://github.com/software-mansion-labs/react-scan/releases/download/0.1.3-radon-2/react-scan-0.1.3-radon-2.tgz",
     "rollup": "^4.40.0",
     "rollup-plugin-license": "^3.6.0",

packages/vscode-extension/package-lock.json

@@ -139,6 +139,8 @@ export interface ProjectEventMap {
   replayDataCreated: MultimediaData;
   isRecording: boolean;
   isProfilingCPU: boolean;
+  isProfilingReact: boolean;
+  isSavingReactProfile: boolean;
 }
 
 export interface ProjectEventListener<T> {
@@ -189,6 +191,9 @@ export interface ProjectInterface {
   startProfilingCPU(): void;
   stopProfilingCPU(): void;
 
+  startProfilingReact(): void;
+  stopProfilingReact(): void;
+
   dispatchTouches(touches: Array<TouchPoint>, type: "Up" | "Move" | "Down"): void;
   dispatchKeyPress(keyCode: number, direction: "Up" | "Down"): void;
   dispatchWheel(point: TouchPoint, deltaX: number, deltaY: number): void;

packages/vscode-extension/package.json

@@ -33,6 +33,7 @@ import { IDE } from "./project/ide";
 import { registerChat } from "./chat";
 import { ProxyDebugSessionAdapterDescriptorFactory } from "./debugging/ProxyDebugAdapter";
 import { Connector } from "./connect/Connector";
+import { ReactDevtoolsEditorProvider } from "./react-devtools-profiler/ReactDevtoolsEditorProvider";
 
 const OPEN_PANEL_ON_ACTIVATION = "open_panel_on_activation";
 const CHAT_ONBOARDING_COMPLETED = "chat_onboarding_completed";
@@ -147,6 +148,7 @@ export async function activate(context: ExtensionContext) {
       { webviewOptions: { retainContextWhenHidden: true } }
     )
   );
+  context.subscriptions.push(ReactDevtoolsEditorProvider.register(context));
   context.subscriptions.push(
     commands.registerCommand("RNIDE.performBiometricAuthorization", performBiometricAuthorization)
   );

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

@@ -10,7 +10,8 @@ export function generateWebviewContent(
   extensionUri: Uri,
   webviewName: string,
   webviewDevPath: string,
-  wsEndpoint?: string
+  wsEndpoint?: string,
+  allowUnsafeEval?: boolean
 ) {
   const config = workspace.getConfiguration("RadonIDE");
   const useCodeTheme = config.get("themeType") === "vscode";
@@ -65,11 +66,11 @@ export function generateWebviewContent(
                       img-src vscode-resource: http: https: data:;
                       media-src vscode-resource: http: https:;
                       style-src ${webview.cspSource} 'unsafe-inline';
-                      script-src 'nonce-${nonce}';
+                      script-src 'nonce-${nonce}' ${allowUnsafeEval ? "'unsafe-eval'" : ""};
+                      worker-src 'self' blob:;
                       ${wsEndpoint ? `connect-src ws://${wsEndpoint} ${webview.cspSource};` : ""}
                       font-src vscode-resource: https:;" />
-        <link rel="stylesheet" type="text/css" href="theme.css" />
-        <link rel="stylesheet" type="text/css" href="${webviewName}.css" />
+        <link rel="stylesheet" type="text/css" href="style.css" />
         `
         }
       </head>

packages/vscode-extension/src/extension.ts

@@ -61,6 +61,8 @@ export type AppEvent = {
   navigationChanged: { displayName: string; id: string };
   fastRefreshStarted: undefined;
   fastRefreshComplete: undefined;
+  isProfilingReact: boolean;
+  isSavingReactProfile: boolean;
 };
 
 export type DeviceSessionDelegate = {
@@ -158,6 +160,9 @@ export class DeviceSession implements Disposable {
     devtools.onEvent("RNIDE_fastRefreshComplete", () => {
       this.deviceSessionDelegate.onAppEvent("fastRefreshComplete", undefined);
     });
+    devtools.onEvent("RNIDE_isProfilingReact", (isProfiling) => {
+      this.deviceSessionDelegate.onAppEvent("isProfilingReact", isProfiling);
+    });
     return devtools;
   }
 

packages/vscode-extension/src/panels/webviewContentGenerator.ts

@@ -1,15 +1,17 @@
 import http from "http";
-import { Disposable } from "vscode";
+import { commands, Disposable, Uri } from "vscode";
 import { WebSocketServer, WebSocket } from "ws";
 import { Logger } from "../Logger";
 import {
   createBridge,
   createStore,
   FrontendBridge,
+  prepareProfilingDataExport,
   Store,
   Wall,
 } from "../../third-party/react-devtools/headless";
 import path from "path";
+import fs from "fs";
 import os from "os";
 
 // Define event names as a const array to avoid duplication
@@ -23,6 +25,7 @@ export const DEVTOOLS_EVENTS = [
   "RNIDE_devtoolPluginsChanged",
   "RNIDE_rendersReported",
   "RNIDE_pluginMessage",
+  "RNIDE_isProfilingReact",
 ] as const;
 
 // Define the payload types for each event
@@ -36,6 +39,13 @@ export interface DevtoolsEvents {
   RNIDE_devtoolPluginsChanged: [{ plugins: string[] }];
   RNIDE_rendersReported: [any];
   RNIDE_pluginMessage: [{ scope: string; type: string; data: any }];
+  RNIDE_isProfilingReact: [boolean];
+}
+
+function filePathForProfile() {
+  const fileName = `profile-${Date.now()}.reactprofile`;
+  const filePath = path.join(os.tmpdir(), fileName);
+  return filePath;
 }
 
 export class Devtools implements Disposable {
@@ -44,6 +54,7 @@ export class Devtools implements Disposable {
   private socket?: WebSocket;
   private startPromise: Promise<void> | undefined;
   private listeners: Map<keyof DevtoolsEvents, Array<(...payload: any) => void>> = new Map();
+  private store: Store | undefined;
 
   public get port() {
     return this._port;
@@ -107,10 +118,16 @@ export class Devtools implements Disposable {
 
       const bridge = createBridge(wall);
       const store = createStore(bridge);
+      this.store = store;
 
       ws.on("close", () => {
-        this.socket = undefined;
+        if (this.socket === ws) {
+          this.socket = undefined;
+        }
         bridge.shutdown();
+        if (this.store === store) {
+          this.store = undefined;
+        }
       });
 
       // Register bridge listeners for ALL custom event types
@@ -119,6 +136,14 @@ export class Devtools implements Disposable {
           this.listeners.get(event)?.forEach((listener) => listener(payload));
         });
       }
+
+      // Register for isProfiling event on the profiler store
+      store.profilerStore.addListener("isProfiling", () => {
+        this.listeners
+          .get("RNIDE_isProfilingReact")
+          // @ts-ignore - isProfilingBasedOnUserInput exists but types are outdated
+          ?.forEach((listener) => listener(store.profilerStore.isProfilingBasedOnUserInput));
+      });
     });
 
     return new Promise<void>((resolve) => {
@@ -130,6 +155,33 @@ export class Devtools implements Disposable {
     });
   }
 
+  public async startProfilingReact() {
+    this.store?.profilerStore.startProfiling();
+  }
+
+  public async stopProfilingReact() {
+    const { resolve, reject, promise } = Promise.withResolvers<Uri>();
+    const saveProfileListener = async () => {
+      const isProcessingData = this.store?.profilerStore.isProcessingData;
+      if (!isProcessingData) {
+        this.store?.profilerStore.removeListener("isProcessingData", saveProfileListener);
+        const profilingData = this.store?.profilerStore.profilingData;
+        if (profilingData) {
+          const exportData = prepareProfilingDataExport(profilingData);
+          const filePath = filePathForProfile();
+          await fs.promises.writeFile(filePath, JSON.stringify(exportData));
+          resolve(Uri.file(filePath));
+        } else {
+          reject(new Error("No profiling data available"));
+        }
+      }
+    };
+
+    this.store?.profilerStore.addListener("isProcessingData", saveProfileListener);
+    this.store?.profilerStore.stopProfiling();
+    return promise;
+  }
+
   public dispose() {
     this.server.close();
   }

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

@@ -211,6 +211,12 @@ export class Project implements Disposable, ProjectInterface, DeviceSessionsMana
         }
         this.updateProjectState({ status: "running" });
         break;
+      case "isProfilingReact":
+        this.eventEmitter.emit("isProfilingReact", payload);
+        break;
+      case "isSavingReactProfile":
+        this.eventEmitter.emit("isSavingReactProfile", payload);
+        break;
     }
   };
   //#endregion
@@ -291,6 +297,23 @@ export class Project implements Disposable, ProjectInterface, DeviceSessionsMana
     }
   }
 
+  async startProfilingReact() {
+    await this.deviceSession?.devtools.startProfilingReact();
+  }
+
+  async stopProfilingReact() {
+    try {
+      this.eventEmitter.emit("isSavingReactProfile", true);
+      const uri = await this.deviceSession?.devtools.stopProfilingReact();
+      if (uri) {
+        // open profile file in vscode using our custom editor
+        commands.executeCommand("vscode.open", uri);
+      }
+    } finally {
+      this.eventEmitter.emit("isSavingReactProfile", false);
+    }
+  }
+
   onProfilingCPUStarted(event: DebugSessionCustomEvent): void {
     this.eventEmitter.emit("isProfilingCPU", true);
   }

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

@@ -0,0 +1,10 @@
+html,
+body,
+#root {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: var(--background);
+}