Sentry's sourcemaps/artifacts don't work

Question

I'm building, minifying and generating sourcemaps of my app with webpack. Artifacts are sent to sentry.io with webpack-sentry-plugin.

The javascript code is run from localhost:8080/js/app.js. It contains //# sourceMappingURL=app.js.map at the end. Sourcemaps work correctly at Chrome devtools.

Sentry's Releases/Artifacts contain the following files:

js/app.js
js/app.js.map

Anyway, when Sentry logs an error, stacktrace is from the minified file. It's not using the sourcemaps.

What am I doing wrong in my setup? Or what other info should I give to get help?

Answer 1

I posted this question at forum.sentry.io and got the answer from a guy called @benvinegar.

Here is the thing: when sending a sourcemap/artifact, we provide the file and also a filename. The filename is meant to be the complete URL where the sourcemap would be located if it was uploaded to the host together with the minified JS files. That is: if our minified Javascript is located at www.example.com/js/app.js, then the sourcemap/artifact filename must be www.example.com/js/app.js.map. Otherwise, we can name it ~/js/app.js.map if we want the sourcemap to apply to other situations like running the app at localhost:8080/js/app.js.

As I'm using webpack-sentry-plugin, it was just a matter of adding the following property to the plugin:

{
  plugins: [
    new SentryPlugin({
      filenameTransform: filename => '~/' + filename
    })
  ]
}