Fix misaligned lines in debugger

packages/vscode-extension/lib/metro_helpers.js

@@ -42,15 +42,14 @@ function adaptMetroConfig(config) {
  }
  } else if (module.path === "__env__") {
  // this handles @expo/env plugin, which is used to inject environment variables
- // the code below instantiates a global variable __EXPO_ENV_PRELUDE_LINES__ that stores
- // the number of lines in the prelude. This is used to calculate the line number offset
- // when reporting line numbers from the JS runtime. The reason why this is needed, is that
+ // the code below exposes the number of lines in the prelude.
+ // This is used to calculate the line number offset
+ // when reporting line numbers from the JS runtime, breakpoints
+ // and uncaught exceptions. The reason why this is needed, is that
  // metro doesn't include __env__ prelude in the source map resulting in the source map
- // transformation getting shifted by the number of lines in the prelude.
- const expoEnvCode = module.output[0].data.code;
- if (!expoEnvCode.includes("__EXPO_ENV_PRELUDE_LINES__")) {
- module.output[0].data.code = `${expoEnvCode};var __EXPO_ENV_PRELUDE_LINES__=${module.output[0].data.lineCount};`;
- }
+ // transformation getting shifted by the number of lines in the expo generated prelude.
+ process.stdout.write(JSON.stringify({ type: "RNIDE_expo_env_prelude_lines", lineOffset: module.output[0].data.lineCount }));
+ process.stdout.write("\n");
  }
  return origProcessModuleFilter(module);
  };

packages/vscode-extension/lib/runtime.js

@@ -25,8 +25,7 @@ function wrapConsole(consoleFunc) {
  const stack = parseErrorStack(new Error().stack);
  const expoLogIndex = stack.findIndex((frame) => frame.methodName === "__expoConsoleLog");
  const location = expoLogIndex > 0 ? stack[expoLogIndex + 1] : stack[1];
- const lineOffset = global.__EXPO_ENV_PRELUDE_LINES__ || 0;
- args.push(location.file, location.lineNumber - lineOffset, location.column);
+ args.push(location.file, location.lineNumber, location.column);
  return consoleFunc.apply(console, args);
  };
 }

packages/vscode-extension/src/builders/buildAndroid.ts

@@ -143,7 +143,7 @@ export async function buildAndroid(
  ),
  ];
  // configureReactNativeOverrides init script is only necessary for RN versions older then 0.74.0 see comments in configureReactNativeOverrides.gradle for more details
- if (semver.lt(await getReactNativeVersion(), "0.74.0")) {
+ if (semver.lt(getReactNativeVersion(), "0.74.0")) {
  gradleArgs.push(
  "--init-script", // configureReactNativeOverrides init script is used to patch React Android project, see comments in configureReactNativeOverrides.gradle for more details
  path.join(

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

@@ -14,6 +14,8 @@
  Source,
  StackFrame,
 } from "@vscode/debugadapter";
+import { getReactNativeVersion } from "../utilities/reactNative";
+import semver from "semver";
 import { DebugProtocol } from "@vscode/debugprotocol";
 import WebSocket from "ws";
 import { NullablePosition, SourceMapConsumer } from "source-map";
@@ -83,8 +85,8 @@
  private absoluteProjectPath: string;
  private projectPathAlias?: string;
  private threads: Array<Thread> = [];
- private sourceMaps: Array<[string, string, SourceMapConsumer]> = [];
-
+ private sourceMaps: Array<[string, string, SourceMapConsumer, number]> = [];
+ private lineOffset: number;
  private linesStartAt1 = true;
  private columnsStartAt1 = true;
 
@@ -96,6 +98,7 @@
  this.absoluteProjectPath = configuration.absoluteProjectPath;
  this.projectPathAlias = configuration.projectPathAlias;
  this.connection = new WebSocket(configuration.websocketAddress);
+ this.lineOffset = configuration.lineOffset;
 
  this.connection.on("open", () => {
  // the below catch handler is used to ignore errors coming from non critical CDP messages we
@@ -150,7 +153,31 @@
  const decodedData = Buffer.from(base64Data, "base64").toString("utf-8");
  const sourceMap = JSON.parse(decodedData);
  const consumer = await new SourceMapConsumer(sourceMap);
- this.sourceMaps.push([message.params.url, message.params.scriptId, consumer]);
+
+ // This is a heuristic that checks if the source map should contain __env__
+ // module that is added by expo, but not reported in the source map
+ const isFileWithOffset = sourceMap.sources.includes("__prelude__");
+
+ // This line is here because of a problem with sourcemaps for expo projects,
+ // that was addressed in this PR https://github.com/expo/expo/pull/29463,
+ // unfortunately it still requires changes to metro that were attempted here
+ // https://github.com/facebook/metro/pull/1284 we should monitor the situation
+ // in upcoming versions and if the changes are still not added bump the version below.
+ const shouldApplyOffset =
+ semver.lte(getReactNativeVersion(), "0.76.0") && isFileWithOffset;
+ if (this.lineOffset !== 0 && shouldApplyOffset) {
+ Logger.debug(
+ "Expo prelude lines were detected and an offset was set to:",
+ this.lineOffset
+ );
+ }
+
+ this.sourceMaps.push([
+ message.params.url,
+ message.params.scriptId,
+ consumer,
+ shouldApplyOffset ? this.lineOffset : 0,
+ ]);
  this.updateBreakpointsInSource(message.params.url, consumer);
  }
 
@@ -264,7 +291,7 @@
  let sourceLine1Based = lineNumber1Based;
  let sourceColumn0Based = columnNumber0Based;
 
- this.sourceMaps.forEach(([url, id, consumer]) => {
+ this.sourceMaps.forEach(([url, id, consumer, lineOffset]) => {
  // when we identify script by its URL we need to deal with a situation when the URL is sent with a different
  // hostname and port than the one we have registered in the source maps. The reason for that is that the request
  // that populates the source map (scriptParsed) is sent by metro, while the requests from breakpoints or logs
@@ -273,16 +300,16 @@
  if (id === scriptIdOrURL || compareIgnoringHost(url, scriptIdOrURL)) {
  scriptURL = url;
  const pos = consumer.originalPositionFor({
- line: lineNumber1Based,
+ line: lineNumber1Based - lineOffset,
  column: columnNumber0Based,
  });
  if (pos.source != null) {
  sourceURL = pos.source;
  }
  if (pos.line != null) {
  sourceLine1Based = pos.line;
  }
  if (pos.column != null) {
  sourceColumn0Based = pos.column;
  }
  }
@@ -440,7 +467,7 @@
  }
  let position: NullablePosition = { line: null, column: null, lastColumn: null };
  let originalSourceURL: string = "";
- this.sourceMaps.forEach(([sourceURL, scriptId, consumer]) => {
+ this.sourceMaps.forEach(([sourceURL, scriptId, consumer, lineOffset]) => {
  const sources = [];
  consumer.eachMapping((mapping) => {
  sources.push(mapping.source);
@@ -451,9 +478,9 @@
  column: columnNumber0Based,
  bias: SourceMapConsumer.LEAST_UPPER_BOUND,
  });
  if (pos.line != null) {
  originalSourceURL = sourceURL;
- position = pos;
+ position = { ...pos, line: pos.line + lineOffset };
  }
  });
  if (position.line === null) {

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

@@ -56,6 +56,7 @@ export class DebugSession implements Disposable {
  websocketAddress: websocketAddress,
  absoluteProjectPath: getAppRootFolder(),
  projectPathAlias: this.metro.isUsingNewDebugger ? "/[metro-project]" : undefined,
+ lineOffset: this.metro.expoPreludeLineOffset,
  },
  {
  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;
@@ -46,6 +46,7 @@
  transformedFileCount: number;
  totalFileCount: number;
  }
+ | { type: "RNIDE_expo_env_prelude_lines"; lineOffset: number }
  | {
  type: "RNIDE_initialize_done";
  port: number;
@@ -66,6 +67,7 @@
  private _port = 0;
  private startPromise: Promise<void> | undefined;
  private usesNewDebugger?: Boolean;
+ private _expoPreludeLineOffset: number = 0;
 
  constructor(private readonly devtools: Devtools, private readonly delegate: MetroDelegate) {}
 
@@ -80,6 +82,10 @@
  return this._port;
  }
 
+ public get expoPreludeLineOffset() {
+ return this._expoPreludeLineOffset;
+ }
+
  public dispose() {
  this.subprocess?.kill(9);
  }
@@ -207,6 +213,10 @@
  }
 
  switch (event.type) {
+ case "RNIDE_expo_env_prelude_lines":
+ this._expoPreludeLineOffset = event.lineOffset;
+ Logger.debug("Expo prelude line offset was set to: ", this._expoPreludeLineOffset);
+ break;
  case "RNIDE_initialize_done":
  this._port = event.port;
  Logger.info(`Metro started on port ${this._port}`);

packages/vscode-extension/src/utilities/reactNative.ts

@@ -1,7 +1,7 @@
 import path from "path";
 import { getAppRootFolder } from "./extensionContext";
 
-export async function getReactNativeVersion() {
+export function getReactNativeVersion() {
  const workspacePath = getAppRootFolder();
  const reactNativeRoot = path.dirname(require.resolve("react-native", { paths: [workspacePath] }));
  const packageJsonPath = path.join(reactNativeRoot, "package.json");