use Sentry (Raven) on PhoneGap

normalize-filenames.js

Raven.config(dsn, {
  dataCallback(data) {
    const normalize = filename => filename.split('/www/', 2)[1]

    data.exception.values[0].stacktrace.frames.forEach(frame => {
      frame.filename = normalize(frame.filename)
    })

    data.culprit = data.exception.values[0].stacktrace.frames[0].filename

    return data
  }
})

• minified source is at www/bundle.js
• source map is at www/bundle.js.map

As part of the build process, we’re creating a new release, then uploading both the built/minified source & the source map.

Sentry require you to name the files you’re uploading after the full URL they’d be accessed at. This raises issues with PhoneGap/Cordova where on Android the the full URL is file:///android_asset/www/bundle.js and on iOS it is file:///var/mobile/Applications/7D6D107B-D9DC-479B-9E22-4847F0CA0C40/YourApplication.app/www/bundle.js

Instead, we upload the files named relatively to the www/ directory. We then configure Raven to “normalise” the full filenames in a stacktrace before it's sent to Sentry.

So in a Sentry release, you’ll have two files named bundle.js and bundle.js.map

var execSync = require('child_process').execSync;

var SENTRY_URL = 'https://app.getsentry.com/api/0/projects/ORG/PROJECT/releases/';
var SENTRY_API_KEY = process.env.SENTRY_API_KEY;
var RELEASE_VERSION = process.env.CIRCLE_SHA1;

// create release
execSync(`curl ${SENTRY_URL} -u ${SENTRY_API_KEY} -X POST -d ${JSON.stringify({ version: RELEASE_VERSION })} -H 'Content-Type: application/json'`);

// upload bundle.js
execSync(`curl ${SENTRY_URL}${RELEASE_VERSION}/files/ -u ${SENTRY_API_KEY} -X POST -F file=@www/bundle.js -F name=bundle.js`)

// upload bundle.js.map
execSync(`curl ${SENTRY_URL}${RELEASE_VERSION}/files/ -u ${SENTRY_API_KEY} -X POST -F file=@www/bundle.js.map -F name=bundle.js.map`)

Thanks.. This was very helpful!

Super helpful -- thank you!

One thing to note for onlookers is that if you do have any dynamically-loaded JS (e.g., off the local filesystem), this script will error, since filename.split('/www/', 2)[1] will return undefined. You can add a guard to check for /www/ before splitting to work around it.

Thanks!

Hey for those interested the authentication part has changed:

curl 'https://app.getsentry.com/api/0/projects/MY_ORG/MY_PROJECT/releases/' -H 'Authorization: Bearer API_TOKEN' -X POST -d '{ "version": "TEST_RELEASE" }' -H 'Content-Type: application/json'

I trying to get this working with Ionic 2. However I'm getting this error when displaying the issue on sentry:
Source code was not found for /Users/filipsuk/IonicProjects/faviApp/www/build/main.js
This probably comes from the sources part of .map file where I have this path.
Do you modify the source map before uploading? Or when exactly do you upload the source map? I upload it right after production build of the app.

Very helpful! Thanks!

Thanks, @danharper.

I have forked and made a little change because sometimes the filename is [native code] and does not have the www path, so it was appearing as undefined in the Sentry.

You can see the changes here https://gist.github.com/ronaldozanoni/ff1c3d714c2c18219a9587b4d7cc7af8