Conflict Between javascript-obfuscator and Sentry Settings in Metro Configuration for React Native

[zzzkasper-1995]

When integrating Sentry into a React Native project alongside javascript-obfuscator, there appears to be a conflict in the Metro configuration settings. This leads to inaccurate source map line numbers when attempting to trace errors through stack traces.

Environment

React Native Version: 0.70.10 Sentry Version: 5.15.2 obfuscator-io-metro-plugin: 2.1.1 Hermes Enabled: Yes

Steps to Reproduce:

Integrate Sentry according to their documentation by adding settings to metro.config.js. Integrate javascript-obfuscator using obfuscator-io-metro-plugin. Run the project build. Generate an error and observe the source map line numbers in Sentry.

Expected Behavior:

Accurate line number mapping in source maps when using Sentry and javascript-obfuscator together.

Actual Behavior:

The line numbers in the source maps do not correspond accurately, hindering debugging efforts.

Metro Configuration (metro.config.js):

const {getDefaultConfig} = require('metro-config');
const {createSentryMetroSerializer} = require('@sentry/react-native/dist/js/tools/sentryMetroSerializer');
const jsoMetroPlugin = require("obfuscator-io-metro-plugin")(
    {
        compact: true,
    },
    {
        runInDev: false,
        logObfuscatedFiles: false,
    }
);

module.exports = (async () => {
    const {resolver: {sourceExts, assetExts}} = await getDefaultConfig();
    const sentrySerializer = createSentryMetroSerializer();

    return {
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: true,
                },
            }),
            babelTransformerPath: require.resolve('react-native-svg-transformer'),

        },
        resolver: {
            assetExts: assetExts.filter((ext) => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg'],
        },
        ...jsoMetroPlugin,
		serializer: {
			customSerializer: sentrySerializer,
		},
    };})();