I'm working on a React Native project, and I’m trying to symbolicate JavaScript crash stack traces to get human-readable file names using metro-symbolicate. However, when I pass the stack trace to metro-symbolicate, it still returns index.android.bundle instead of the actual source file names like App.js or HomeScreen.js.

I’m capturing JavaScript errors in my React Native app using ErrorUtils.setGlobalHandler, and I’m trying to symbolicate the stack trace using metro-symbolicate to get readable file names instead of index.android.bundle.

However, when I pass the stack trace to metro-symbolicate, it still returns index.android.bundle instead of actual source file names like App.js or HomeScreen.js.

The code where I get the global JS Errors:

ErrorUtils.setGlobalHandler(async (error: Error, isFatal: boolean) => {
      Logger.instance.log(`JS Runtime Error: ${error.message}`);

      if (!error.stack) {
        Logger.instance.log('No stack trace available.');
        return;
      }
      this.logError(error.message, error.stack, isFatal);
    });

Backend Code where I handle the request for "symbolicate" route.

app.post('/symbolicate', async (req, res) => {
    const { stack } = req.body;

    if (!stack || !Array.isArray(stack)) {
        return res.status(400).json({ error: 'Invalid stack trace format' });
    }

    try {
        await fs.access(SOURCE_MAP_PATH);

        const stackJson = JSON.stringify({ stack });

        const symbolicateProcess = spawn('npx', ['metro-symbolicate', SOURCE_MAP_PATH]);

        let output = '';
        let errorOutput = '';

        symbolicateProcess.stdin.write(stackJson);
        symbolicateProcess.stdin.end();

        symbolicateProcess.stdout.on('data', (data) => {
            output += data.toString();
        });

        symbolicateProcess.stderr.on('data', (data) => {
            errorOutput += data.toString();
        });

        symbolicateProcess.on('close', (code) => {
            if (code === 0) {
                try {
                    const parsedOutput = JSON.parse(output);
                    return res.json({ readableStack: parsedOutput.stack });
                } catch (jsonError) {
                    return res.status(500).json({ error: 'Failed to parse symbolicated stack trace' });
                }
            } else {
                return res.status(500).json({ error: 'Failed to symbolicate stack trace', details: errorOutput });
            }
        });

    } catch (error) {
        return res.status(500).json({ error: 'Failed to process request' });
    }
});

What I Expect After Symbolication

{
  "readableStack": [
    {
      "file": "App.js",
      "lineNumber": 123,
      "column": 20
    }
  ]
}

This is what I actually get:

{
  "stack": [
    {
      "file": "index.android.bundle",
      "lineNumber": 123199,
      "column": 20
    }
  ]
}