How to add sourcemap in React Native for Production?

Question

I received error log like the following while the app crashed:

Fatal Exception: com.facebook.react.modules.core.JavascriptException: onSelect index.

Answer 1

This is only for iOS.

step 1: Generate sourcemap.js file by using following command.

add this line in package.json file

 "bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js" 

Run this command, it will create sourcemap.js file under $PROJECT_DIR/ios/source-map/ folder

$ yarn bundle:ios

Step 2: Create a file sourcemap-decoder.js under $PROJECT_DIR/ios/source-map/

$ cd ios/source-map/

$ touch sourcemap-decoder.js

Content of sourcemap-decoder.js is

const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');

fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
  if (err) {
    console.log('err', err,);
  }
  const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));

  console.log(consumer.originalPositionFor({
    line: 1408,
    column: 7762
  }));
});

Step 3: execute the script for decoding

$ node ios/source-map/sourcemap-decoder.js