Use indexed watch folder paths for external assets

packages/metro-symbolicate/src/Symbolication.js

@@ -165,7 +165,7 @@ class SymbolicationContext<ModuleIdsT> {
   //  IOS: foo.js:57:foo, Android: bar.js:75:bar
   symbolicate(stackTrace: string): string {
     return stackTrace.replace(
-      /(?:([^@: \n(]+)(@|:))?(?:(?:([^@: \n(]+):)?(\d+):(\d+)|\[native code\])/g,
+      /(?:([^@: \n(]+)(@|:))?(?:(?:([^@: \n(]+):)?(\d+):(\d+)|\[native code\](?::\d+:\d+)?)/g,
       (match, func, delimiter, fileName, line, column) => {
         if (delimiter === ':' && func && !fileName) {
           fileName = func;
@@ -694,10 +694,25 @@ class SingleMapSymbolicationContext extends SymbolicationContext<SingleMapModule
       }
       moduleLineOffset = moduleOffsets[localId];
     }
-    const original = metadata.consumer.originalPositionFor({
-      line: Number(lineNumber) + moduleLineOffset,
-      column: Number(columnNumber),
-    });
+    const line = Number(lineNumber) + moduleLineOffset;
+    const column = Number(columnNumber);
+
+    // Crash reporters normalise frames that have no JS location - native
+    // frames in particular - to line 0, column 0. `originalPositionFor` throws
+    // on an out-of-range position, so report these as unresolved instead,
+    // matching what we already do for a bare `[native code]` frame.
+    if (line <= 0 || column < 0) {
+      return {
+        line: null,
+        column: null,
+        source: null,
+        functionName: null,
+        name: null,
+        isIgnored: false,
+      };
+    }
+
+    const original = metadata.consumer.originalPositionFor({line, column});
     if (metadata.sourceFunctionsConsumer) {
       original.functionName =
         metadata.sourceFunctionsConsumer.functionNameFor(original) || null;

packages/metro-symbolicate/src/__tests__/__fixtures__/testfile.crashreporter.stack

@@ -0,0 +1,6 @@
+Non-fatal Exception: JavaScriptError
+0  ???  0x0 <unknown> (some message with no frame)
+1  ???  0x0 throws6 + 1 (thrower.min.js:1:161)
+2  ???  0x0 o + 1 (thrower.min.js:1:464)
+3  ???  0x0 <unknown> ([native code]:0:0)
+4  ???  0x0 <unknown> ([native code]:0:0)

packages/metro-symbolicate/src/__tests__/__snapshots__/symbolicate-test.js.snap

@@ -216,6 +216,16 @@ Array [
 ]
 `;
 
+exports[`symbolicating a crash reporter stack trace with 0:0 native frames 1`] = `
+"Non-fatal Exception: JavaScriptError
+0  ???  0x0 <unknown> (some message with no frame)
+1  ???  0x0 throws6 + 1 (thrower.js:18:null)
+2  ???  0x0 o + 1 (thrower.js:30:arguments)
+3  ???  0x0 <unknown> (null:null:null)
+4  ???  0x0 <unknown> (null:null:null)
+"
+`;
+
 exports[`symbolicating a profiler map 1`] = `
 "JS_0000_xxxxxxxxxxxxxxxxxxxxxx throws0::thrower.js:48:11
 JS_0001_xxxxxxxxxxxxxxxxxxxxxx throws6::thrower.js:35:38

packages/metro-symbolicate/src/__tests__/symbolicate-test.js

@@ -215,6 +215,11 @@ test('symbolicating a stack trace in Node format', async () =>
     execute([TESTFILE_MAP], read('testfile.node.stack')),
   ).resolves.toMatchSnapshot());
 
+test('symbolicating a crash reporter stack trace with 0:0 native frames', async () =>
+  await expect(
+    execute([TESTFILE_MAP], read('testfile.crashreporter.stack')),
+  ).resolves.toMatchSnapshot());
+
 test('symbolicating a single entry', async () =>
   await expect(execute([TESTFILE_MAP, '1', '161'])).resolves.toEqual(
     'thrower.js:18:null\n',

packages/metro-transform-worker/API.md

@@ -74,7 +74,14 @@ export type MinifierOptions = {
 
 export type MinifierResult = {code: string; map?: BasicSourceMap | undefined};
 
-export const transform: (config: JsTransformerConfig, projectRoot: string, projectRelativePath: string, data: Buffer, options: JsTransformOptions) => Promise<TransformResponse>;
+export const transform: (
+config: JsTransformerConfig,
+projectRoot: string,
+projectRelativePath: string,
+data: Buffer,
+options: JsTransformOptions,
+assetUrlPath?: string,
+) => Promise<TransformResponse>;
 
 export type transform = typeof transform;
 

packages/metro-transform-worker/src/__tests__/index-test.js

@@ -135,6 +135,27 @@ test('transforms a simple module', async () => {
   expect(result.dependencies).toEqual([]);
 });
 
+test('uses the indexed watch folder path for asset URLs', async () => {
+  fs.mkdirSync('/root/external', {recursive: true});
+  fs.writeFileSync('/root/external/test.mp4', 'asset data');
+
+  const result = await Transformer.transform(
+    baseConfig,
+    '/root',
+    'external/test.mp4',
+    Buffer.from('asset data'),
+    {
+      ...baseTransformOptions,
+      type: 'asset',
+    },
+    '[metro-watchFolders]/1/test.mp4',
+  );
+
+  expect(result.output[0].data.code).toContain(
+    '"httpServerLocation": "/assets/[metro-watchFolders]/1"',
+  );
+});
+
 test('transforms a module with dependencies', async () => {
   const contents = [
     '"use strict";',

packages/metro-transform-worker/src/index.js

@@ -162,6 +162,7 @@ type JSONFile = {
 };
 
 type TransformationContext = Readonly<{
+  assetUrlPath?: string,
   config: JsTransformerConfig,
   projectRoot: AbsolutePath,
   options: JsTransformOptions,
@@ -537,6 +538,7 @@ async function transformAsset(
     getBabelTransformArgs(file, context),
     assetRegistryPath,
     assetPlugins,
+    context.assetUrlPath,
   );
 
   const jsFile = {
@@ -677,8 +679,10 @@ export const transform = async (
   projectRelativePath: string,
   data: Buffer,
   options: JsTransformOptions,
+  assetUrlPath?: string,
 ): Promise<TransformResponse> => {
   const context: TransformationContext = {
+    assetUrlPath,
     config,
     options,
     projectRoot,

packages/metro-transform-worker/src/utils/assetTransformer.js

@@ -20,6 +20,7 @@ export async function transform(
   {filename, options, src}: BabelTransformerArgs,
   assetRegistryPath: string,
   assetDataPlugins: ReadonlyArray<string>,
+  assetUrlPath?: string,
 ): Promise<{ast: File, ...}> {
   options = options || {
     platform: '',
@@ -32,7 +33,7 @@ export async function transform(
 
   const data = await getAssetData(
     absolutePath,
-    filename,
+    assetUrlPath ?? filename,
     assetDataPlugins,
     options.platform,
     options.publicPath,

packages/metro/src/Assets.js

@@ -243,6 +243,41 @@ export async function getAssetData(
   return await applyAssetDataPlugins(assetDataPlugins, assetData);
 }
 
+/**
+ * Returns the path used to identify an asset in its development server URL.
+ * Assets outside projectRoot use an indexed watch folder prefix so that the
+ * URL unambiguously identifies their configured root.
+ */
+export function getAssetUrlPath(
+  assetPath: string,
+  projectRoot: string,
+  watchFolders: ReadonlyArray<string>,
+): string {
+  const projectRelativePath = path.relative(projectRoot, assetPath);
+  if (isPathInsideRoot(projectRelativePath)) {
+    return normalizePathSeparatorsToPosix(projectRelativePath);
+  }
+
+  for (let i = 0; i < watchFolders.length; i++) {
+    const watchFolderRelativePath = path.relative(watchFolders[i], assetPath);
+    if (isPathInsideRoot(watchFolderRelativePath)) {
+      return normalizePathSeparatorsToPosix(
+        path.join('[metro-watchFolders]', String(i), watchFolderRelativePath),
+      );
+    }
+  }
+
+  return normalizePathSeparatorsToPosix(projectRelativePath);
+}
+
+function isPathInsideRoot(relativePath: string): boolean {
+  return (
+    relativePath !== '..' &&
+    !relativePath.startsWith('..' + path.sep) &&
+    !path.isAbsolute(relativePath)
+  );
+}
+
 async function applyAssetDataPlugins(
   assetDataPlugins: ReadonlyArray<string>,
   assetData: AssetData,

packages/metro/src/DeltaBundler/Serializers/__tests__/getAssets-test.js

@@ -10,14 +10,17 @@
 
 jest.mock('../../../Assets');
 
-import {getAssetData} from '../../../Assets';
+import {getAssetData, getAssetUrlPath} from '../../../Assets';
 import getAssets from '../getAssets';
 
 beforeEach(() => {
   getAssetData.mockImplementation(async (path, localPath) => ({
     path,
     localPath,
   }));
+  getAssetUrlPath.mockImplementation(
+    jest.requireActual('../../../Assets').getAssetUrlPath,
+  );
 });
 
 test('should return the bundle assets', async () => {
@@ -82,16 +85,32 @@ test('should return the bundle assets', async () => {
         ],
       },
     ],
+    [
+      '/external/6.png',
+      {
+        path: '/external/6.png',
+        output: [
+          {
+            type: 'js/module/asset',
+            data: {code: '//', lineCount: 1, map: [], functionMap: null},
+          },
+        ],
+      },
+    ],
   ]);
 
   expect(
     await getAssets(dependencies, {
       projectRoot: '/tmp',
-      watchFolders: ['/tmp'],
+      watchFolders: ['/tmp', '/external'],
       processModuleFilter: () => true,
     }),
   ).toEqual([
     {path: '/tmp/3.png', localPath: '3.png'},
     {path: '/tmp/5.mov', localPath: '5.mov'},
+    {
+      path: '/external/6.png',
+      localPath: '[metro-watchFolders]/1/6.png',
+    },
   ]);
 });

packages/metro/src/DeltaBundler/Serializers/getAssets.js

@@ -12,7 +12,7 @@
 import type {AssetData} from '../../Assets';
 import type {Module, ReadOnlyDependencies} from '../types';
 
-import {getAssetData} from '../../Assets';
+import {getAssetData, getAssetUrlPath} from '../../Assets';
 import {getJsOutput, isJsModule} from './helpers/js';
 import path from 'node:path';
 
@@ -22,6 +22,7 @@ type Options = {
   platform: ?string,
   projectRoot: string,
   publicPath: string,
+  watchFolders: ReadonlyArray<string>,
 };
 
 export default async function getAssets(
@@ -41,7 +42,11 @@ export default async function getAssets(
       promises.push(
         getAssetData(
           module.path,
-          path.relative(options.projectRoot, module.path),
+          getAssetUrlPath(
+            module.path,
+            options.projectRoot,
+            options.watchFolders,
+          ),
           options.assetPlugins,
           options.platform,
           options.publicPath,

packages/metro/src/DeltaBundler/Transformer.js

@@ -13,6 +13,7 @@ import type {TransformResult, TransformResultWithSource} from '../DeltaBundler';
 import type {TransformerConfig, TransformOptions} from './Worker';
 import type {ConfigT} from 'metro-config';
 
+import {getAssetUrlPath} from '../Assets';
 import {normalizePathSeparatorsToPosix} from '../lib/pathUtils';
 import getTransformCacheKey from './getTransformCacheKey';
 import WorkerFarm from './WorkerFarm';
@@ -112,6 +113,14 @@ export default class Transformer {
       this._config.projectRoot,
       filePath,
     );
+    const assetUrlPath =
+      type === 'asset'
+        ? getAssetUrlPath(
+            filePath,
+            this._config.projectRoot,
+            this._config.watchFolders,
+          )
+        : null;
 
     const partialKey = stableHash([
       // This is the hash related to the global Bundler config.
@@ -121,6 +130,9 @@ export default class Transformer {
       // addition to content hash because transformers receive path as an
       // input, and may apply e.g. extension-based logic.
       normalizePathSeparatorsToPosix(projectRelativePath),
+      assetUrlPath == null
+        ? null
+        : normalizePathSeparatorsToPosix(assetUrlPath),
       customTransformOptions,
       dev,
       experimentalImportSupport,
@@ -170,7 +182,9 @@ export default class Transformer {
       ? {result, sha1}
       : await this._workerFarm.transform(
           projectRelativePath,
-          transformerOptions,
+          assetUrlPath == null
+            ? transformerOptions
+            : {...transformerOptions, unstable_assetUrlPath: assetUrlPath},
           content,
         );
 

packages/metro/src/DeltaBundler/Worker.flow.js

@@ -21,7 +21,12 @@ import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 
-export type {JsTransformOptions as TransformOptions} from 'metro-transform-worker';
+export type TransformOptions = Readonly<{
+  ...JsTransformOptions,
+  // Passed separately to the default transformer and not exposed to custom
+  // Babel transformers.
+  unstable_assetUrlPath?: string,
+}>;
 
 type TransformerInterface = {
   transform(
@@ -30,6 +35,7 @@ type TransformerInterface = {
     string,
     Buffer,
     JsTransformOptions,
+    ?string,
   ): Promise<TransformResult<>>,
 };
 
@@ -68,7 +74,7 @@ function asDeserializedBuffer(value: any): Buffer | null {
 
 export const transform = (
   filename: string,
-  transformOptions: JsTransformOptions,
+  transformOptions: TransformOptions,
   projectRoot: string,
   transformerConfig: TransformerConfig,
   fileBuffer?: Buffer,
@@ -97,7 +103,7 @@ export type Worker = {
 async function transformFile(
   projectRelativePath: string,
   data: Buffer,
-  transformOptions: JsTransformOptions,
+  transformOptions: TransformOptions,
   projectRoot: string,
   transformerConfig: TransformerConfig,
 ): Promise<Data> {
@@ -117,12 +123,15 @@ async function transformFile(
 
   const sha1 = crypto.createHash('sha1').update(data).digest('hex');
 
+  const {unstable_assetUrlPath: assetUrlPath, ...publicTransformOptions} =
+    transformOptions;
   const result = await Transformer.transform(
     transformerConfig.transformerConfig,
     projectRoot,
     projectRelativePath,
     data,
-    transformOptions,
+    publicTransformOptions,
+    assetUrlPath,
   );
 
   // The babel cache caches scopes and pathes for already traversed AST nodes.