Source Maps to the rescue.! So you’ve set up Sentry for you javascript project & released it to production, excited about the first error that’ll come up & you got this! Uh oh, so “name of undefined”, oh I know, an is all I need. If check where again? — In: chatModule-322816772254.js h.e.uploadFile at line 1:27468. in Wait, where’s that? — Darn! That’s exactly what source maps help you fix, to map this error location to the line of code you typed before it became a mess while shipping to the client. The Approach Sentry provides multiple approaches from where it can read source maps: Host the source maps along with your minified files Push the source maps to sentry Hosting your source maps seems like the easiest task but it also exposes your un-minified code to the public, making it easier  to find security loopholes. One way to tackle this is to set up a VPN so these are not accessible anywhere else other than your company. Since we want the freedom to be able to read those sentry errors from anywhere, we’ll discuss the latter approach here. The articles originate from the problems I faced when trying to upload source maps to sentry & how I made it work in the end. The Steps Generating source maps Pushing them to sentry with a release tag Label the issues to tie up with the same release tag Generating source maps This step will vary based on your build system. If you’re using browserify, gulp, uglify, here’s how you should do it: Add in your browserify options debug:true Import & initialise the same before minifying the code gulp-sourcemaps Final code might look something like: sourcemaps   = ( );

browserify(path, { : [ ], debug: ,
}) .pipe(sourcemaps.init({ : }))
.pipe(uglify())
.pipe(sourcemaps.write( )) .pipe(gulp.dest( )); var require 'gulp-sourcemaps' paths './node_modules' // Enables source maps true // Any babel config may come here // --- // Initialises & writes source maps loadMaps true '.' // Used to export generated minified files & source maps './web/js' Pushing them to sentry with a release tag At this point we have our minified files & source maps generated in the folder like & which are hosted as & respectively. /web/js /web/js/file.min.js /web/js/file.js https://{your_domain}/js/file.min.js https://{your_domain}/js/file.js Here’s a script which uses to upload the javascript files from a folder to sentry & remove the source maps files post that: sentry-cli spawn = ( ).spawnSync; sentryHost, sentryAuthToken, sentryProjectName, sentryOrg, release; sourceMapsPath = ; jsUrlPrefix = ; sentryConfig = ( ) (sentryConfig) {
  sentryHost = sentryConfig[ ];
  sentryProjectName = sentryConfig[ ];
  sentryOrg = sentryConfig[ ];
  sentryAuthToken = sentryConfig[ ];
}
release = process.env.COMMIT_HASH; (!sentryAuthToken || !sentryHost || !sentryProjectName || !sentryOrg) { .log( .log( ));
  process.exit( );
} (!release) { .log( .log( ));
  process.exit( );
}

spawn( , 
  [ ,  sentryAuthToken, , sentryHost, , ,  sentryOrg, ,  sentryProjectName, , release, , sourceMapsPath, , jsUrlPrefix, ],
  { : }
);

spawn( , 
  [sourceMapsPath, , , , , ],
  { : }
); // Credit: https://github.com/supriya-raj var require 'child_process' var /*
  Change based on your requirement:
  sourceMapsPath: relative path to the folder that contains your minified scripts & source maps
  jsUrlPrefix:  ~ (tilde) -> Acts as your domain. Ex: if the source maps are hosted on domain.com/js/file.js.map
    this should be '~/js'
  release: source maps will be pushed under this release name
  sentryConfig: {
    org: 'dummyorg'
    project: 'my-js-project'
    host: 'https://sentry9.dummyorg.com'
    auth_token: ~
  }
  ^ Example configuration for the sentry url: https://sentry9.dummyorg.com/dummyorg/my-js-project
*/ var 'web/js' var '~/js' var require './sentry-config.js' if 'host' 'project' 'org' 'auth_token' if console console '[Error] One or more config parameters required for source map upload are missing!' 1 if console console '[Error] Environment variable COMMIT_HASH does not exist!' 1 './node_modules/.bin/sentry-cli' '--auth-token' '--url' 'releases' '--org' '--project' 'files' 'upload-sourcemaps' '--url-prefix' "--no-sourcemap-reference" stdio "inherit" 'find' '-type' 'f' '-iname' '\*.js.map' '-delete' stdio "inherit" Auth token can be generated by: Sentry Project -> -> Search (Auth Tokens) -> Create new token Settings For the above project, we’re using the latest commit hash to mark release tag so, that needs to be passed as an environment variable before executing the provided script: COMMIT_HASH= node ./upload-source-maps-to-sentry.js ${COMMIT_HASH} Verify the source maps in Sentry should now be available under: P R {C Artifacts -> roject -> eleases } -> ommit_Hash Label the issues to tie up with the same release tag At this point, the source maps are pushed to sentry but for a particular issue, sentry doesn’t know where to find them to un-minify & give you those pretty errors. To achieve that, send a attribute along with the sentry init configuration, Here’s a sample config for release @Sentry/browser 5.7.1 .Sentry.init({ : , : ,
}) window dsn '<sentry_dsn>' release '<COMMIT_HASH>' & Voila! There you have it, the same error but this time identifiable 👁, thanks to source maps. Troubleshooting Here’s a to detect what might have gone wrong with your implementation. good resource

Sentry

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Pinpoint Those Pesky Minified Javascript Errors With Sentry

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

25 Stories To Learn About Angularjs

15 Proven Optimization Tips For Angularjs Development To Speed Up Your Web App Performance

15 Best Web Development Tools To Use In 2021

5 Best JavaScript Frameworks in 2017

How does Angular2 work? Part 1 — Application Refs

25 Stories To Learn About Angularjs

15 Proven Optimization Tips For Angularjs Development To Speed Up Your Web App Performance

15 Best Web Development Tools To Use In 2021

5 Best JavaScript Frameworks in 2017

How does Angular2 work? Part 1 — Application Refs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps