Skip to content

Instantly share code, notes, and snippets.

@danharper
Forked from dcramer/normalize-filenames.js
Last active August 17, 2018 19:32
Show Gist options
  • Save danharper/a89685cc1028759345b8 to your computer and use it in GitHub Desktop.
Save danharper/a89685cc1028759345b8 to your computer and use it in GitHub Desktop.
use Sentry (Raven) on PhoneGap
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
}
})
@danharper
Copy link
Author

  • 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

image

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`)

@nicolaidahl
Copy link

Thanks.. This was very helpful!

@charliermarsh
Copy link

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.

@slorber
Copy link

slorber commented Feb 1, 2017

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'

@filipsuk
Copy link

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.

@yuichiro-yoshida
Copy link

Very helpful! Thanks!

@ronaldozanoni
Copy link

ronaldozanoni commented Apr 10, 2018

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.

image

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment