@callstack/repack-dev-server 5.4.0-canary-20260822202143 → 5.4.0-canary-20260913161840

package/dist/plugins/devtools/devtoolsPlugin.js

@@ -27,8 +27,11 @@ async function devtoolsPlugin(instance, { delegate }) {
         url: '/open-stack-frame',
         handler: async (request, reply) => {
             const { file, lineNumber } = parseRequestBody(request.body);
-            const filepath = delegate.devTools?.resolveProjectPath(file) ?? file;
-            launchEditor(`${filepath}:${lineNumber}`, process.env.REACT_EDITOR);
+            const openedRemotely = await delegate.devTools?.openStackFrame?.(file, lineNumber);
+            if (!openedRemotely) {
+                const filepath = delegate.devTools?.resolveProjectPath(file) ?? file;
+                launchEditor(`${filepath}:${lineNumber}`, process.env.REACT_EDITOR);
+            }
             reply.send('OK');
         },
     });

package/dist/plugins/symbolicate/Symbolicator.d.ts

@@ -1,5 +1,4 @@
 import type { FastifyBaseLogger } from 'fastify';
-import { SourceMapConsumer } from 'source-map';
 import type { ReactNativeStackFrame, SymbolicatorDelegate, SymbolicatorResults } from './types.js';
 /**
  * Class for transforming stack traces from React Native application with using Source Map.
@@ -18,10 +17,6 @@ export declare class Symbolicator {
      * @returns Inferred platform or `undefined` if cannot infer.
      */
     static inferPlatformFromStack(stack: ReactNativeStackFrame[]): string | undefined;
-    /**
-     * Cache with initialized `SourceMapConsumer` to improve symbolication performance.
-     */
-    sourceMapConsumerCache: Record<string, SourceMapConsumer>;
     /**
      * Constructs new `Symbolicator` instance.
      *

package/dist/plugins/symbolicate/Symbolicator.js

@@ -1,6 +1,7 @@
 import { URL } from 'node:url';
 import { codeFrameColumns } from '@babel/code-frame';
 import { SourceMapConsumer } from 'source-map';
+import { isGeneratedBundleFrame, isSymbolicatableFrame, normalizeInvalidWebpackSourceUrls, } from '../../utils/symbolication.js';
 /**
  * Class for transforming stack traces from React Native application with using Source Map.
  * Raw stack frames produced by React Native, points to some location from the bundle
@@ -40,10 +41,6 @@ export class Symbolicator {
      */
     constructor(delegate) {
         this.delegate = delegate;
-        /**
-         * Cache with initialized `SourceMapConsumer` to improve symbolication performance.
-         */
-        this.sourceMapConsumerCache = {};
     }
     /**
      * Process raw React Native stack frames and transform them using Source Maps.
@@ -59,72 +56,78 @@ export class Symbolicator {
      */
     async process(logger, stack) {
         logger.debug({ msg: 'Filtering out unnecessary frames' });
-        const frames = [];
-        for (const frame of stack) {
-            const { file } = frame;
-            if (file?.startsWith('http')) {
-                frames.push(frame);
-            }
-        }
+        const frames = stack.filter(isSymbolicatableFrame);
+        // A Symbolicator instance is shared by the route. Keep consumers local to
+        // one request so concurrent call-stack and component-stack requests cannot
+        // destroy or read each other's source maps.
+        const sourceMapConsumers = new Map();
         try {
             logger.debug({ msg: 'Processing frames', frames });
             const processedFrames = [];
             for (const frame of frames) {
-                if (!this.sourceMapConsumerCache[frame.file]) {
+                try {
+                    if (!sourceMapConsumers.has(frame.file)) {
+                        logger.debug({
+                            msg: 'Loading raw source map data',
+                            fileUrl: frame.file,
+                        });
+                        const rawSourceMap = await this.delegate.getSourceMap(frame.file);
+                        logger.debug({
+                            msg: 'Creating source map instance',
+                            fileUrl: frame.file,
+                            sourceMapLength: rawSourceMap.length,
+                        });
+                        const sourceMapConsumer = await new SourceMapConsumer(normalizeInvalidWebpackSourceUrls(rawSourceMap));
+                        logger.debug({
+                            msg: 'Saving source map instance into cache',
+                            fileUrl: frame.file,
+                        });
+                        sourceMapConsumers.set(frame.file, sourceMapConsumer);
+                    }
                     logger.debug({
-                        msg: 'Loading raw source map data',
-                        fileUrl: frame.file,
+                        msg: 'Symbolicating frame',
+                        frame,
                     });
-                    const rawSourceMap = await this.delegate.getSourceMap(frame.file);
+                    const processedFrame = this.processFrame(frame, sourceMapConsumers);
                     logger.debug({
-                        msg: 'Creating source map instance',
-                        fileUrl: frame.file,
-                        sourceMapLength: rawSourceMap.length,
+                        msg: 'Finished symbolicating frame',
+                        frame,
                     });
-                    const sourceMapConsumer = await new SourceMapConsumer(rawSourceMap.toString());
+                    processedFrames.push(processedFrame);
+                }
+                catch (error) {
+                    // Match Metro's best-effort behavior: one unavailable or malformed
+                    // source map must not discard frames that can still be symbolicated.
                     logger.debug({
-                        msg: 'Saving source map instance into cache',
+                        msg: 'Failed to symbolicate frame',
                         fileUrl: frame.file,
+                        error: error.message,
                     });
-                    this.sourceMapConsumerCache[frame.file] = sourceMapConsumer;
+                    processedFrames.push({ ...frame, collapse: false });
                 }
-                logger.debug({
-                    msg: 'Symbolicating frame',
-                    frame,
-                });
-                const processedFrame = this.processFrame(frame);
-                logger.debug({
-                    msg: 'Finished symbolicating frame',
-                    frame,
-                });
-                processedFrames.push(processedFrame);
             }
-            const codeFrame = (await this.getCodeFrame(logger, processedFrames)) ?? null;
+            const codeFrame = (await this.getCodeFrame(logger, processedFrames, frames, sourceMapConsumers)) ?? null;
             logger.debug({
                 msg: 'Finished symbolicating frames',
                 processedFrames,
                 codeFrame,
             });
-            return {
-                stack: processedFrames,
-                codeFrame,
-            };
+            return { stack: processedFrames, codeFrame };
         }
         finally {
-            for (const key in this.sourceMapConsumerCache) {
-                this.sourceMapConsumerCache[key].destroy();
-                delete this.sourceMapConsumerCache[key];
+            for (const consumer of sourceMapConsumers.values()) {
+                consumer.destroy();
             }
         }
     }
-    processFrame(frame) {
-        if (!frame.lineNumber || !frame.column) {
+    processFrame(frame, sourceMapConsumers) {
+        if (frame.lineNumber == null || frame.column == null) {
             return {
                 ...frame,
                 collapse: false,
             };
         }
-        const consumer = this.sourceMapConsumerCache[frame.file];
+        const consumer = sourceMapConsumers.get(frame.file);
         if (!consumer) {
             return {
                 ...frame,
@@ -152,16 +155,19 @@ export class Symbolicator {
             };
         }
         return {
-            lineNumber: lookup.line || frame.lineNumber,
-            column: lookup.column || frame.column,
+            lineNumber: lookup.line ?? frame.lineNumber,
+            column: lookup.column ?? frame.column,
             file: lookup.source,
             methodName: lookup.name || frame.methodName,
             collapse: false,
         };
     }
-    async getCodeFrame(logger, processedFrames) {
-        for (const frame of processedFrames) {
-            if (frame.collapse || !frame.lineNumber || !frame.column) {
+    async getCodeFrame(logger, processedFrames, inputFrames, sourceMapConsumers) {
+        for (const [index, frame] of processedFrames.entries()) {
+            if (frame.collapse || frame.lineNumber == null || frame.column == null) {
+                continue;
+            }
+            if (isGeneratedBundleFrame(frame)) {
                 continue;
             }
             if (!this.delegate.shouldIncludeFrame(frame)) {
@@ -172,8 +178,12 @@ export class Symbolicator {
                 frame,
             });
             try {
+                const consumer = sourceMapConsumers.get(inputFrames[index]?.file);
+                const embeddedSource = consumer?.sourceContentFor(frame.file, true);
+                const source = embeddedSource ??
+                    (await this.delegate.getSource(frame.file)).toString();
                 return {
-                    content: codeFrameColumns((await this.delegate.getSource(frame.file)).toString(), {
+                    content: codeFrameColumns(source, {
                         start: { column: frame.column, line: frame.lineNumber },
                     }, { forceColor: true }),
                     location: {

package/dist/plugins/symbolicate/logSymbolicatedStackFrame.d.ts

@@ -0,0 +1,3 @@
+import type { FastifyBaseLogger } from 'fastify';
+import type { ReactNativeStackFrame, SymbolicatorResults } from './types.js';
+export declare function logSymbolicatedStackFrame(logger: FastifyBaseLogger, inputStack: ReactNativeStackFrame[], results: SymbolicatorResults): void;

package/dist/plugins/symbolicate/logSymbolicatedStackFrame.js

@@ -0,0 +1,42 @@
+import { isGeneratedBundleFrame, isSymbolicatableFrame, } from '../../utils/symbolication.js';
+const RUNTIME_ERROR_METHODS = new Set([
+    'react-stack-bottom-frame',
+    'renderWithHooks',
+    'beginWork',
+    'performUnitOfWork',
+]);
+function isRuntimeErrorStack(stack) {
+    return stack.some((frame) => RUNTIME_ERROR_METHODS.has(frame.methodName));
+}
+const REMOTE_SOURCE_PATH_PREFIX = '/__repack_source__/';
+function getRemoteName(file) {
+    if (!file) {
+        return undefined;
+    }
+    const filename = new URL(file, 'file://').pathname.split('/').pop() ?? '';
+    return filename.match(/\.([^.]+)\.chunk\.bundle$/)?.[1];
+}
+function getPrintableFile(file, inputFile) {
+    const sourceUrl = new URL(file, 'file://');
+    if (sourceUrl.pathname.startsWith(REMOTE_SOURCE_PATH_PREFIX)) {
+        const source = decodeURIComponent(sourceUrl.pathname.slice(REMOTE_SOURCE_PATH_PREFIX.length)).replace(/^\[projectRoot(?:\^\d+)?\][\\/]/, '');
+        return `${getRemoteName(inputFile) ?? sourceUrl.host}/${source}`;
+    }
+    return file.replace(/^\[projectRoot(?:\^\d+)?\][\\/]/, '');
+}
+export function logSymbolicatedStackFrame(logger, inputStack, results) {
+    if (!isRuntimeErrorStack(inputStack)) {
+        return;
+    }
+    const frameIndex = results.stack.findIndex((stackFrame) => !isGeneratedBundleFrame(stackFrame));
+    const frame = results.stack[frameIndex];
+    if (!frame?.file || frame.lineNumber == null) {
+        return;
+    }
+    const inputFrames = inputStack.filter(isSymbolicatableFrame);
+    const file = getPrintableFile(frame.file, inputFrames[frameIndex]?.file);
+    logger.info({
+        msg: `Symbolicated stack frame: ${file}:${frame.lineNumber}:${frame.column ?? 0}`,
+        methodName: frame.methodName,
+    });
+}

package/dist/plugins/symbolicate/sybmolicatePlugin.js

@@ -1,4 +1,5 @@
 import fastifyPlugin from 'fastify-plugin';
+import { logSymbolicatedStackFrame } from './logSymbolicatedStackFrame.js';
 import { Symbolicator } from './Symbolicator.js';
 function getStackFromRequestBody(request) {
     let body;
@@ -25,6 +26,7 @@ async function symbolicatePlugin(instance, { delegate, }) {
             else {
                 request.log.debug({ msg: 'Starting symbolication', platform, stack });
                 const results = await symbolicator.process(request.log, stack);
+                logSymbolicatedStackFrame(request.log, stack, results);
                 reply.send(results);
             }
         }

package/dist/types.d.ts

@@ -127,6 +127,12 @@ export declare namespace Server {
          * @returns The resolved project path.
          */
         resolveProjectPath: (filepath: string) => string;
+        /**
+         * Open a stack frame owned by another development server.
+         *
+         * @returns Whether the frame was handled remotely.
+         */
+        openStackFrame?: (filepath: string, lineNumber: number) => boolean | Promise<boolean>;
     }
     /**
      * Delegate with implementation for messages used in route handlers.

package/dist/utils/symbolication.d.ts

@@ -0,0 +1,10 @@
+import type { RawIndexMap, RawSourceMap } from 'source-map';
+interface StackFrameLike {
+    file: string | null;
+}
+export declare function normalizeInvalidWebpackSourceUrls(rawSourceMap: string | Buffer): string | RawSourceMap | RawIndexMap;
+export declare function isGeneratedBundleFrame(frame: StackFrameLike): boolean;
+export declare function isSymbolicatableFrame<T extends StackFrameLike>(frame: T): frame is T & {
+    file: string;
+};
+export {};

package/dist/utils/symbolication.js

@@ -0,0 +1,51 @@
+import { URL } from 'node:url';
+export function normalizeInvalidWebpackSourceUrls(rawSourceMap) {
+    const sourceMapText = rawSourceMap.toString();
+    if (!sourceMapText.includes('webpack://')) {
+        return sourceMapText;
+    }
+    const sourceMap = JSON.parse(sourceMapText);
+    let invalidSourceIndex = 0;
+    const normalize = (map) => {
+        if (!map || typeof map !== 'object') {
+            return;
+        }
+        const current = map;
+        if (Array.isArray(current.sources)) {
+            current.sources = current.sources.map((source) => {
+                if (typeof source !== 'string') {
+                    return source;
+                }
+                const normalizedSource = source.replace(/^webpack:\/\/([^/|]+)\|\/?/, 'webpack://$1/');
+                if (!normalizedSource.startsWith('webpack://')) {
+                    return normalizedSource;
+                }
+                try {
+                    new URL(normalizedSource);
+                    return normalizedSource;
+                }
+                catch {
+                    // Some generated Module Federation runtime modules use their source
+                    // text as a webpack URL. A single invalid URL makes source-map reject
+                    // the complete map, including otherwise valid application sources.
+                    return `webpack://invalid-source/${invalidSourceIndex++}`;
+                }
+            });
+        }
+        for (const section of current.sections ?? []) {
+            normalize(section.map);
+        }
+    };
+    normalize(sourceMap);
+    // SourceMapConsumer accepts parsed maps. Returning the object avoids
+    // serializing it here only for the consumer to parse it again.
+    return sourceMap;
+}
+export function isGeneratedBundleFrame(frame) {
+    return Boolean(frame.file &&
+        (frame.file.includes('.bundle') || frame.file.includes('.hot-update.js')));
+}
+export function isSymbolicatableFrame(frame) {
+    return Boolean(frame.file &&
+        (frame.file.startsWith('http') || isGeneratedBundleFrame(frame)));
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@callstack/repack-dev-server",
   "description": "A bundler-agnostic development server for React Native applications as part of @callstack/repack.",
   "license": "MIT",
-  "version": "5.4.0-canary-20260822202143",
+  "version": "5.4.0-canary-20260913161840",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",