Add Support RAM Bundle Format for Javascript Errors

Platforms:

• Android
• iOS

Versions:

rollbar-react-native version: 0.9.1
react-native version: 0.61.5 (not using expo)

Problem:

Running into an issue when trying to integrate the Rollbar SDK into our React Native application and found that the stack traces being captured didn't match what was coming from the application. We'd receive a system error stating Possible source map configuration error: line and column number combination not found in source map whenever the line numbers didn't match up.

After digging into the issue, found the problem to be we're leveraging the RAM Bundle format for both Android and iOS, which appears to generate a different bundle format that does not appear to be supported by Rollbar during upload. For iOS this generates an indexed RAM bundle, while on Android we're leveraging the multiple Files RAM bundle type.

An example stack trace from iOS is below. Notice how the filename at then end is linking to one of the indexed RAM bundle modules:

(Notice how it's referencing the generated module file, instead of the deobfuscated file from source).

The example steps provided in the documentation don't have an example for generating the ram-bundle sourcemaps, only bundle (see here). When attempting to switch to generating a ram-bundle with sourcemaps, I received an error response from the curl upload command.

Steps to Reproduce:

0. Generate the iOS ram-bundle with sourcemaps using the following command in the React Native project root:

   > npx react-native ram-bundle \
        --platform ios \
        --dev false \
        --reset-cache \
        --entry-file index.js \
        --bundle-output "./build/index.ios.bundle" \
        --assets-dest "./build" \
        --sourcemap-output "./index.ios.bundle.map" \
        --sourcemap-sources-root ./
   

1. Upload the sourcemaps to Rollbar with the following command:

   > curl https://api.rollbar.com/api/1/sourcemap \
        -F access_token=<post_server_item token> \
        -F version=<app version>.ios \
        -F minified_url=http://reactnativehost/main.jsbundle \
        -F source_map=@build/index.ios.bundle.map \
        -F index.js=@build/index.ios.bundle
   

2. Notice the response you receive from the curl command will be the following:

   {
     "err": 1,
     "message": "Error: Source map missing property 'mappings'"
   }
   

• The configuration I was using when instantiating a new client in the project is below:

  import { Platform } from 'react-native'
  import { Client, Configuration } from 'rollbar-react-native'
  
  const config = new Configuration('<post_client_item token>', {
    appVersion: '<app version>',
    environment: 'production',
    captureUncaught: true,
    captureUnhandledRejections: true,
    payload: {
      client: {
        javascript: {
          source_map_enabled: true,
          code_version: `<app version>.${Platform.OS}`,
        },
      },
    },
  })
  const client = new Client(config)
  

Start with the React Native ram-bundle command and the Rollbar sourcemap upload request described in the issue, then inspect how RAM bundle maps are parsed and uploaded. Reproduce the Source map missing property 'mappings' response using the provided curl command. Done means indexed and multiple-files RAM bundles upload successfully and captured stack traces resolve to their original sources.