fix: source-map matching in React Native DevTools (#787)

jbroma · web-flow · commit acdd0c801ab6 · 2024-11-08T18:03:47.000+01:00
* fix: populate namespace in SourceMapDevToolPlugin

* chore: add TODO for fixing directory structure in dev tools

* fix: proper sourceUrl on iOS

* chore: add uniqueName to tester-app

* fix: proper sourceUrl on Android

* refactor: align both platforms handling of query param

* chore: add changeset

* chore: clang format

* refactor: review fixes
diff --git a/.changeset/cold-apes-swim.md b/.changeset/cold-apes-swim.md
@@ -0,0 +1,5 @@
+---
+"@callstack/repack": patch
+---
+
+Fix sourceURL of bundles so source maps can be matched in dev tools
diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs
@@ -43,6 +43,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
+      uniqueName: 'tester-app',
     },
     optimization: {
       minimize,
diff --git a/apps/tester-app/webpack.config.mjs b/apps/tester-app/webpack.config.mjs
@@ -56,6 +56,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
+      uniqueName: 'tester-app',
     },
     optimization: {
       minimize,
diff --git a/apps/tester-federation-v2/rspack.config.host-app.mjs b/apps/tester-federation-v2/rspack.config.host-app.mjs
@@ -42,7 +42,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
-      uniqueName: 'MF2-HostApp',
+      uniqueName: 'MF2Tester-HostApp',
     },
     optimization: {
       minimize,
diff --git a/apps/tester-federation-v2/rspack.config.mini-app.mjs b/apps/tester-federation-v2/rspack.config.mini-app.mjs
@@ -39,7 +39,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
-      uniqueName: 'MF2-MiniApp',
+      uniqueName: 'MF2Tester-MiniApp',
     },
     optimization: {
       minimize,
diff --git a/apps/tester-federation-v2/webpack.config.host-app.mjs b/apps/tester-federation-v2/webpack.config.host-app.mjs
@@ -42,7 +42,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
-      uniqueName: 'MFTester-HostApp',
+      uniqueName: 'MF2Tester-HostApp',
     },
     optimization: {
       minimize,
diff --git a/apps/tester-federation-v2/webpack.config.mini-app.mjs b/apps/tester-federation-v2/webpack.config.mini-app.mjs
@@ -36,7 +36,7 @@ export default (env) => {
       filename: 'index.bundle',
       chunkFilename: '[name].chunk.bundle',
       publicPath: Repack.getPublicPath({ platform, devServer }),
-      uniqueName: 'MFTester-MiniApp',
+      uniqueName: 'MF2Tester-MiniApp',
     },
     optimization: {
       minimize,
diff --git a/packages/repack/android/src/main/java/com/callstack/repack/FileSystemScriptLoader.kt b/packages/repack/android/src/main/java/com/callstack/repack/FileSystemScriptLoader.kt
@@ -12,12 +12,12 @@ class FileSystemScriptLoader(private val reactContext: ReactContext, private val
                 val path = config.url.path
                 val file = File(path)
                 val code: ByteArray = FileInputStream(file).use { it.readBytes() }
-                nativeLoader.evaluate(code, config.uniqueId, promise)
+                nativeLoader.evaluate(code, config.sourceUrl, promise)
             } else {
                 val assetName = config.url.file.split("/").last()
                 val inputStream = reactContext.assets.open(assetName)
                 val code: ByteArray = inputStream.use { it.readBytes() }
-                nativeLoader.evaluate(code, config.uniqueId, promise)
+                nativeLoader.evaluate(code, config.sourceUrl, promise)
             }
         } catch (error: Exception) {
             promise.reject(
diff --git a/packages/repack/android/src/main/java/com/callstack/repack/RemoteScriptLoader.kt b/packages/repack/android/src/main/java/com/callstack/repack/RemoteScriptLoader.kt
@@ -107,7 +107,7 @@ class RemoteScriptLoader(val reactContext: ReactContext, private val nativeLoade
                 throw Exception("Script file exists but could not be read: $file")
             }
 
-            nativeLoader.evaluate(code, config.uniqueId, promise)
+            nativeLoader.evaluate(code, config.sourceUrl, promise)
         } catch (error: Exception) {
             promise.reject(
                     ScriptLoadingError.ScriptEvalFailure.code,
diff --git a/packages/repack/android/src/main/java/com/callstack/repack/ScriptConfig.kt b/packages/repack/android/src/main/java/com/callstack/repack/ScriptConfig.kt
@@ -6,19 +6,21 @@ import okhttp3.MediaType.Companion.toMediaType
 import okhttp3.RequestBody
 import okhttp3.RequestBody.Companion.toRequestBody
 import java.net.URL
+import java.net.URI
 
 data class ScriptConfig(
-        val scriptId: String,
-        val url: URL,
-        val query: String?,
-        val fetch: Boolean,
-        val absolute: Boolean,
-        val method: String,
-        val body: RequestBody?,
-        val timeout: Int,
-        val headers: Headers,
-        val verifyScriptSignature: String,
-        val uniqueId: String
+    val scriptId: String,
+    val url: URL,
+    val query: String?,
+    val fetch: Boolean,
+    val absolute: Boolean,
+    val method: String,
+    val body: RequestBody?,
+    val timeout: Int,
+    val headers: Headers,
+    val verifyScriptSignature: String,
+    val uniqueId: String,
+    val sourceUrl: String
 ) {
     companion object {
         fun fromReadableMap(scriptId: String, value: ReadableMap): ScriptConfig {
@@ -33,13 +35,25 @@ data class ScriptConfig(
             val verifyScriptSignature = requireNotNull(value.getString("verifyScriptSignature"))
             val uniqueId = requireNotNull(value.getString("uniqueId"))
 
-            val url = URL(
-                    if (query != null) {
-                        "$urlString?$query"
-                    } else {
-                        urlString
-                    }
-            )
+            val initialUrl = URL(urlString)
+            val uri = initialUrl.toURI()
+
+            val sourceUrl = initialUrl.toString()
+
+            // overrides any existing query in the URL with config.query
+            val finalUri = if (query != null) {
+                URI(
+                    uri.scheme,
+                    uri.authority,
+                    uri.path,
+                    query,
+                    uri.fragment
+                )
+            } else {
+                uri
+            }
+
+            val url = finalUri.toURL()
 
             val headers = Headers.Builder()
             val keyIterator = headersMap?.keySetIterator()
@@ -55,17 +69,18 @@ data class ScriptConfig(
             val body = bodyString?.toRequestBody(contentType)
 
             return ScriptConfig(
-                    scriptId,
-                    url,
-                    query,
-                    fetch,
-                    absolute,
-                    method,
-                    body,
-                    timeout,
-                    headers.build(),
-                    verifyScriptSignature,
-                    uniqueId
+                scriptId,
+                url,
+                query,
+                fetch,
+                absolute,
+                method,
+                body,
+                timeout,
+                headers.build(),
+                verifyScriptSignature,
+                uniqueId,
+                sourceUrl
             )
         }
     }
diff --git a/packages/repack/ios/ScriptConfig.h b/packages/repack/ios/ScriptConfig.h
@@ -20,6 +20,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (readonly) NSNumber *timeout;
 @property (readonly) NSString *verifyScriptSignature;
 @property (readonly) NSString *uniqueId;
+@property (readonly) NSString *sourceUrl;
 
 #ifdef RCT_NEW_ARCH_ENABLED
 + (ScriptConfig *)fromConfig:(JS::NativeScriptManager::NormalizedScriptLocator &)config
@@ -38,7 +39,8 @@ NS_ASSUME_NONNULL_BEGIN
                         withBody:(nullable NSData *)body
                      withTimeout:(NSNumber *)timeout
        withVerifyScriptSignature:(NSString *)verifyScriptSignature
-                    withUniqueId:(NSString *)uniqueId;
+                    withUniqueId:(NSString *)uniqueId
+                   withSourceUrl:(NSString *)sourceUrl;
 
 NS_ASSUME_NONNULL_END
 
diff --git a/packages/repack/ios/ScriptConfig.mm b/packages/repack/ios/ScriptConfig.mm
@@ -14,16 +14,22 @@ @implementation ScriptConfig
 @synthesize timeout = _timeout;
 @synthesize verifyScriptSignature = _verifyScriptSignature;
 @synthesize uniqueId = _uniqueId;
+@synthesize sourceUrl = _sourceUrl;
 
 #ifdef RCT_NEW_ARCH_ENABLED
 + (ScriptConfig *)fromConfig:(JS::NativeScriptManager::NormalizedScriptLocator &)config
                 withScriptId:(nonnull NSString *)scriptId
 {
   NSDictionary *_Nullable headers = (NSDictionary *)config.headers();
+
   NSURLComponents *urlComponents = [NSURLComponents componentsWithString:config.url()];
+  NSString *sourceUrl = urlComponents.URL.absoluteString;
+
+  // overrides any existing query in the URL with config.query
   if (config.query() != nil) {
     urlComponents.percentEncodedQuery = config.query();
   }
+
   NSURL *url = urlComponents.URL;
 
   return [[ScriptConfig alloc] initWithScript:scriptId
@@ -36,7 +42,8 @@ + (ScriptConfig *)fromConfig:(JS::NativeScriptManager::NormalizedScriptLocator &
                                      withBody:[config.body() dataUsingEncoding:NSUTF8StringEncoding]
                                   withTimeout:[NSNumber numberWithDouble:config.timeout()]
                     withVerifyScriptSignature:config.verifyScriptSignature()
-                                 withUniqueId:config.uniqueId()];
+                                 withUniqueId:config.uniqueId()
+                                withSourceUrl:sourceUrl];
 }
 #else
 + (ScriptConfig *)fromConfig:(NSDictionary *)config withScriptId:(nonnull NSString *)scriptId
@@ -47,6 +54,9 @@ + (ScriptConfig *)fromConfig:(NSDictionary *)config withScriptId:(nonnull NSStri
   }
   NSURL *url = urlComponents.URL;
 
+  urlComponents.query = nil;
+  NSString *sourceUrl = urlComponents.URL.absoluteString;
+
   return [[ScriptConfig alloc] initWithScript:scriptId
                                       withURL:url
                                    withMethod:config[@"method"]
@@ -57,7 +67,8 @@ + (ScriptConfig *)fromConfig:(NSDictionary *)config withScriptId:(nonnull NSStri
                                      withBody:[config[@"body"] dataUsingEncoding:NSUTF8StringEncoding]
                                   withTimeout:config[@"timeout"]
                     withVerifyScriptSignature:config[@"verifyScriptSignature"]
-                                 withUniqueId:config[@"uniqueId"]];
+                                 withUniqueId:config[@"uniqueId"]
+                                withSourceUrl:sourceUrl];
 }
 #endif
 
@@ -80,6 +91,7 @@ - (ScriptConfig *)initWithScript:(NSString *)scriptId
                      withTimeout:(nonnull NSNumber *)timeout
        withVerifyScriptSignature:(NSString *)verifyScriptSignature
                     withUniqueId:(NSString *)uniqueId
+                   withSourceUrl:(nonnull NSString *)sourceUrl
 {
   _scriptId = scriptId;
   _url = url;
@@ -92,6 +104,7 @@ - (ScriptConfig *)initWithScript:(NSString *)scriptId
   _timeout = timeout;
   _verifyScriptSignature = verifyScriptSignature;
   _uniqueId = uniqueId;
+  _sourceUrl = sourceUrl;
   return self;
 }
 
diff --git a/packages/repack/ios/ScriptManager.mm b/packages/repack/ios/ScriptManager.mm
@@ -189,7 +189,7 @@ - (void)execute:(ScriptConfig *)config resolve:(RCTPromiseResolveBlock)resolve r
       @throw [NSError errorWithDomain:errorMessage code:0 userInfo:nil];
     }
 
-    [self evaluateJavascript:data url:config.uniqueId resolve:resolve reject:reject];
+    [self evaluateJavascript:data url:config.sourceUrl resolve:resolve reject:reject];
   } @catch (NSError *error) {
     reject(CodeExecutionFailure, error.domain, nil);
   }
@@ -304,7 +304,7 @@ - (void)executeFromFilesystem:(ScriptConfig *)config
       filesystemScriptUrl = [[NSBundle mainBundle] URLForResource:scriptName withExtension:scriptExtension];
     }
     NSData *data = [[NSData alloc] initWithContentsOfFile:[filesystemScriptUrl path]];
-    [self evaluateJavascript:data url:config.uniqueId resolve:resolve reject:reject];
+    [self evaluateJavascript:data url:config.sourceUrl resolve:resolve reject:reject];
   } @catch (NSError *error) {
     reject(CodeExecutionFailure, error.localizedDescription, nil);
   }
diff --git a/packages/repack/src/plugins/DevelopmentPlugin.ts b/packages/repack/src/plugins/DevelopmentPlugin.ts
@@ -83,6 +83,9 @@ export class DevelopmentPlugin implements RspackPluginInstance {
         module: true,
         columns: true,
         noSources: false,
+        namespace:
+          compiler.options.output.devtoolNamespace ??
+          compiler.options.output.uniqueName,
       }).apply(compiler);
 
       // setup React Refresh manually instead of using the official plugin
diff --git a/packages/repack/src/plugins/RepackPlugin.ts b/packages/repack/src/plugins/RepackPlugin.ts
@@ -178,13 +178,20 @@ export class RepackPlugin implements RspackPluginInstance {
     }).apply(compiler);
 
     if (this.config.sourceMaps) {
+      // TODO Fix sourcemap directory structure
+      // Right now its very messy and not every node module is inside of the node module
+      // like React Devtools backend etc or some symilinked module appear with relative path
+      // We should normalize this through a custom handler and provide an output similar to Metro
       new compiler.webpack.SourceMapDevToolPlugin({
         test: /\.(js)?bundle$/,
         filename: '[file].map',
         append: `//# sourceMappingURL=[url]?platform=${this.config.platform}`,
         module: true,
         columns: true,
         noSources: false,
+        namespace:
+          compiler.options.output.devtoolNamespace ??
+          compiler.options.output.uniqueName,
       }).apply(compiler);
     }
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@callstack/repack": patch
 +---
++
 +Fix sourceURL of bundles so source maps can be matched in dev tools
Original file line number	Diff line number	Diff line change
`@@ -107,7 +107,7 @@ class RemoteScriptLoader(val reactContext: ReactContext, private val nativeLoade`
`107`	`107`	`throw Exception("Script file exists but could not be read: $file")`
`108`	`108`	`}`
`109`	`109`
`110`		`- nativeLoader.evaluate(code, config.uniqueId, promise)`
	`110`	`+ nativeLoader.evaluate(code, config.sourceUrl, promise)`
`111`	`111`	`} catch (error: Exception) {`
`112`	`112`	`promise.reject(`
`113`	`113`	`ScriptLoadingError.ScriptEvalFailure.code,`