React Native - Building a reliable source map

Question

I think I created a source map correctly using Xcode. Need this for a production build.

I added:

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap/sourcemap.js

to Bundle React Native code and images in build phases, in Xcode to generate a sourcemap which seems to work.

However when trying to use the following code to analyse that source map with a line and column number I don't get a proper result

var sourceMap = require('source-map');
var fs = require('fs');

// read source-map, should be new for every build
fs.readFile('../my-app/src/sourcemap/sourcemap.js', 'utf8', function (err, data) {
    var smc = new sourceMap.SourceMapConsumer(data);

    // replace line and colum numbers with line/col from error output
    console.log(smc.originalPositionFor({
        line: 105132,
        column: 98
    }));
});

I am using the stack trace from Xcode as a test but I get null. Xcode partial output:

2016-04-26 17:50:00.631 [error][tid:com.facebook.React.JavaScript] Can't find variable: dummyVar
2016-04-26 17:50:00.650 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: dummyVar
2016-04-26 17:50:00.656 MyApp[311:84730] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Can't find variable: dummyVar', reason: 'Unhandled JS Exception: Can't find variable: dummyVar, stack:
render@105132:98

I have tried multiple combinations of line and column numbers. I know the JS script is looking at the sourcemap for sure because if I put in for example line: 20 column: 10 I will get a line from the react-native codebase returned in Navigator/NavigatorSceneConfigs.js

Will this only work for line numbers returned in index.ios.bundle?

Any thoughts that could point me in the right direction would be awesome

Thanks

Answer 1

you can use a library such as react-native-source-maps to help you process source-maps for your release builds. https://github.com/philipshurpik/react-native-source-maps

And to generate source-maps, you can use these settings:

For android, add this to your android/app/build.gradle file.

project.ext.react = [
    ...
    extraPackagerArgs: [
        "--sourcemap-output", "$buildDir/intermediates/assets/release/index.android.bundle.map",
        "--sourcemap-sources-root", "$rootDir/.."
    ]
]

And as of react-native 0.55, you can now do the same on iOS. In your XCode project file, update the Bundle React Native code and images build phase to this:

export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh