Add Support RAM Bundle Format for Javascript Errors

[leezumstein]

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)

[netshade]

We also are users of ram-bundle, curious if this and Hermes source map support are on the roadmap.