Fix breakpoints in RN 76 apps

packages/vscode-extension/lib/metro_helpers.js

@@ -133,6 +133,14 @@ function adaptMetroConfig(config) {
   const ReporterImpl = require("./metro_reporter");
   config.reporter = new ReporterImpl();
 
+  process.stdout.write(
+    JSON.stringify({
+      type: "RNIDE_watch_folders",
+      watchFolders: [config.projectRoot, ...config.watchFolders], // metro internally adds projectRoot as first entry to watch folders
+    })
+  );
+  process.stdout.write("\n");
+
   return config;
 }
 

packages/vscode-extension/src/debugging/DebugAdapter.ts

@@ -80,8 +80,7 @@
 export class DebugAdapter extends DebugSession {
   private variableStore: VariableStore = new VariableStore();
   private connection: WebSocket;
-  private absoluteProjectPath: string;
-  private projectPathAlias?: string;
+  private sourceMapAliases?: Array<[string, string]>;
   private threads: Array<Thread> = [];
   private sourceMaps: Array<[string, string, SourceMapConsumer]> = [];
 
@@ -93,8 +92,7 @@
 
   constructor(configuration: DebugConfiguration) {
     super();
-    this.absoluteProjectPath = configuration.absoluteProjectPath;
-    this.projectPathAlias = configuration.projectPathAlias;
+    this.sourceMapAliases = configuration.sourceMapAliases;
     this.connection = new WebSocket(configuration.websocketAddress);
 
     this.connection.on("open", () => {
@@ -107,7 +105,7 @@
       this.sendCDPMessage("Debugger.setPauseOnExceptions", { state: "none" });
       this.sendCDPMessage("Debugger.setAsyncCallStackDepth", { maxDepth: 32 }).catch(ignoreError);
       this.sendCDPMessage("Debugger.setBlackboxPatterns", { patterns: [] }).catch(ignoreError);
-      this.sendCDPMessage("Runtime.runIfWaitingForDebugger", {});
+      this.sendCDPMessage("Runtime.runIfWaitingForDebugger", {}).catch(ignoreError);
       this.sendCDPMessage("Runtime.evaluate", {
         expression: "__RNIDE_onDebuggerConnected()",
       });
@@ -254,6 +252,30 @@
     ]);
   }
 
+  private toAbsoluteFilePath(sourceMapPath: string) {
+    if (this.sourceMapAliases) {
+      for (const [alias, absoluteFilePath] of this.sourceMapAliases) {
+        if (sourceMapPath.startsWith(alias)) {
+          // URL may contain ".." fragments, so we want to resolve it to a proper absolute file path
+          return path.resolve(path.join(absoluteFilePath, sourceMapPath.slice(alias.length)));
+        }
+      }
+    }
+    return sourceMapPath;
+  }
+
+  private toSourceMapFilePath(sourceAbsoluteFilePath: string) {
+    if (this.sourceMapAliases) {
+      // we return the first alias from the list
+      for (const [alias, absoluteFilePath] of this.sourceMapAliases) {
+        if (absoluteFilePath.startsWith(absoluteFilePath)) {
+          return path.join(alias, path.relative(absoluteFilePath, sourceAbsoluteFilePath));
+        }
+      }
+    }
+    return sourceAbsoluteFilePath;
+  }
+
   private findOriginalPosition(
     scriptIdOrURL: string,
     lineNumber1Based: number,
@@ -276,24 +298,20 @@
           line: lineNumber1Based,
           column: columnNumber0Based,
         });
         if (pos.source != null) {
           sourceURL = pos.source;
         }
         if (pos.line != null) {
           sourceLine1Based = pos.line;
         }
         if (pos.column != null) {
           sourceColumn0Based = pos.column;
         }
       }
     });
-    if (this.projectPathAlias) {
-      // URL may contain ".." fragments, so we want to resolve it to a proper absolute file path
-      sourceURL = path.resolve(sourceURL.replace(this.projectPathAlias, this.absoluteProjectPath));
-    }
 
     return {
-      sourceURL,
+      sourceURL: this.toAbsoluteFilePath(sourceURL),
       lineNumber1Based: sourceLine1Based,
       columnNumber0Based: sourceColumn0Based,
       scriptURL,
@@ -431,27 +449,17 @@
   }
 
   private toGeneratedPosition(file: string, lineNumber1Based: number, columnNumber0Based: number) {
-    let genFileName = file;
-    if (this.projectPathAlias) {
-      // we first convert the file path to be relative to project:
-      const fileRelative = path.relative(this.absoluteProjectPath, file);
-      // no we append the project path alias that represents the root of the project
-      genFileName = path.join(this.projectPathAlias, fileRelative);
-    }
+    let sourceMapFilePath = this.toSourceMapFilePath(file);
     let position: NullablePosition = { line: null, column: null, lastColumn: null };
     let originalSourceURL: string = "";
     this.sourceMaps.forEach(([sourceURL, scriptId, consumer]) => {
-      const sources = [];
-      consumer.eachMapping((mapping) => {
-        sources.push(mapping.source);
-      });
       const pos = consumer.generatedPositionFor({
-        source: genFileName,
+        source: sourceMapFilePath,
         line: lineNumber1Based,
         column: columnNumber0Based,
         bias: SourceMapConsumer.LEAST_UPPER_BOUND,
       });
       if (pos.line != null) {
         originalSourceURL = sourceURL;
         position = pos;
       }
@@ -489,21 +497,21 @@
     // this method gets called after we are informed that a new script has been parsed. If we
     // had breakpoints set in that script, we need to let the runtime know about it
 
-    const pathsToUpdate = new Set<string>();
-    consumer.eachMapping((mapping) => {
-      if (this.breakpoints.has(mapping.source)) {
-        pathsToUpdate.add(mapping.source);
-      }
-    });
+    // the number of consumer mapping entries can be close to the number of symbols in the source file.
+    // we optimize the process by collecting unique source URLs which map to actual individual source files.
+    // note: apparently despite the TS types from the source-map library, mapping.source can be null
+    const uniqueSourceMapPaths = new Set<string>();
+    consumer.eachMapping((mapping) => mapping.source && uniqueSourceMapPaths.add(mapping.source));
 
-    pathsToUpdate.forEach((pathToUpdate) => {
-      const breakpoints = this.breakpoints.get(pathToUpdate) || [];
+    uniqueSourceMapPaths.forEach((sourceMapPath) => {
+      const absoluteFilePath = this.toAbsoluteFilePath(sourceMapPath);
+      const breakpoints = this.breakpoints.get(absoluteFilePath) || [];
       breakpoints.forEach(async (bp) => {
         if (bp.verified) {
           this.sendCDPMessage("Debugger.removeBreakpoint", { breakpointId: bp.getId() });
         }
         const newId = await this.setCDPBreakpoint(
-          pathToUpdate,
+          sourceMapPath,
           this.linesStartAt1 ? bp.line : bp.line + 1,
           this.columnsStartAt1 ? (bp.column || 1) - 1 : bp.column || 0
         );

packages/vscode-extension/src/debugging/DebugSession.ts

@@ -47,15 +47,23 @@ export class DebugSession implements Disposable {
       return false;
     }
 
+    let sourceMapAliases: Array<[string, string]> = [];
+    if (this.metro.isUsingNewDebugger && this.metro.watchFolders.length > 0) {
+      // first entry in watchFolders is the project root
+      sourceMapAliases.push(["/[metro-project]/", this.metro.watchFolders[0]]);
+      this.metro.watchFolders.forEach((watchFolder, index) => {
+        sourceMapAliases.push([`/[metro-watchFolders]/${index}/`, watchFolder]);
+      });
+    }
+
     const debugStarted = await debug.startDebugging(
       undefined,
       {
         type: "com.swmansion.react-native-debugger",
         name: "Radon IDE Debugger",
         request: "attach",
         websocketAddress: websocketAddress,
-        absoluteProjectPath: getAppRootFolder(),
-        projectPathAlias: this.metro.isUsingNewDebugger ? "/[metro-project]" : undefined,
+        sourceMapAliases,
       },
       {
         suppressDebugStatusbar: true,

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

@@ -8,7 +8,7 @@
 import { shouldUseExpoCLI } from "../utilities/expoCli";
 import { Devtools } from "./devtools";
 import { getLaunchConfiguration } from "../utilities/launchConfiguration";
 import WebSocket from "ws";
 
 export interface MetroDelegate {
   onBundleError(): void;
@@ -50,6 +50,10 @@
       type: "RNIDE_initialize_done";
       port: number;
     }
+  | {
+      type: "RNIDE_watch_folders";
+      watchFolders: string[];
+    }
   | {
       type: "client_log";
       level: "error";
@@ -64,6 +68,7 @@
 export class Metro implements Disposable {
   private subprocess?: ChildProcess;
   private _port = 0;
+  private _watchFolders: string[] | undefined = undefined;
   private startPromise: Promise<void> | undefined;
   private usesNewDebugger?: Boolean;
 
@@ -80,6 +85,13 @@
     return this._port;
   }
 
+  public get watchFolders() {
+    if (this._watchFolders === undefined) {
+      throw new Error("Attempting to read watchFolders before metro has started");
+    }
+    return this._watchFolders;
+  }
+
   public dispose() {
     this.subprocess?.kill(9);
   }
@@ -224,6 +236,10 @@
               Logger.info(`Metro started on port ${this._port}`);
               resolve();
               break;
+            case "RNIDE_watch_folders":
+              this._watchFolders = event.watchFolders;
+              Logger.info("Captured metro watch folders", this._watchFolders);
+              break;
             case "bundle_build_failed":
               this.delegate.onBundleError();
               break;