JS source maps issue

Im using webpack and react for my project and have on dev server hidden source maps.
Both bundled js and map are fully accessible from browser, however, even if uploading bundle and sourcemap to sentry (into specific release), any errors logged by Sentry are still using minified snippets.

Ive tried both curl and sentry-cli for upload of sourcemap but non of them seem to work.

Any ideas ?

1 Like

@deko – have you seen the troubleshooting guide?

9 times out of 10 when people don’t see source maps applied, it’s because the name of the source map artifact (inside Sentry) isn’t set correctly.

If a hosted Sentry.io customer, and you’re still having difficulty after reading those sections, you can reach out to email support and we can take a look at your account to debug further.

hi @benvinegar

Yea ive worked my way thru it couple of times, i also take 4 steps extra to confirm im not missing anything before making a post.

Both the source and the map align in their names,
sourse as main.min.sj and main.min.js.map.
Maybe worth to mention, am using hidden sourcemaps, so theres no reference in main bundles to the maps.

Ive also tested to confirmthe map with mapvalidator.io, however i get timeout issues there. Map in roughly 4.5mb.

A side question, does the maps need to be uploaded everytime a new change is made or will any new upcomping “releases” be using old maps, if no new ones new maps/srcs were uploaded ?

Unfortunately am not yet paying customer, i got a task on my desk to find and evaluate js app debug analytics and am doing so with current project.

am using hidden sourcemaps, so theres no reference in main bundles to the maps.

You 100% need to have #sourceMappingURL present at the end of your final application files or source map processing won’t work.

I’m not sure what you mean by “hidden” source maps, but my guess is this is a factor.

Both the source and the map align in their names,

I think we’re on the same page, but to be 100% clear, Sentry doesn’t presume any filename relationship between source files/source maps. #sourceMappingURL needs to be present, and needs to point to the associated source map.

Ive also tested to confirmthe map with mapvalidator.io, however i get timeout issues there. Map in roughly 4.5mb.

Yeah it’s kind of janky and we need to update it.

A side question, does the maps need to be uploaded everytime a new change is made or will any new upcomping “releases” be using old maps, if no new ones new maps/srcs were uploaded ?

Every time you change your application code, the “release” property (defined in Raven.js) is expected to be updated. There should be a matching release and associated artifacts uploaded to Sentry.

Hm…
Think I’ve got wrong pic then.

Ive noe re-written this post couple of times and each time new questions appear so I just put questions here in hop for more clarity.

  1. When i publish new release of web app online,
    the bundle.min.js needs to contain #sourceMappingURL=bundle.min.js.map,
    but does the map need to be accessible from web ?
    So it would be accessible from www.my-app.com/bundle.min.js.map
  2. If point.1 is true, why need to upload .min.js.map and min.js into Sentry release ?
  3. If point.1 is false, does it mean the the #sourceMappingURL=bundle.min.js.map just needs to refer to that map, but Sentry would use uploaded .map for pretty-print ?
  4. When initiating Raven, think I’ve done it wrong, the release: xxxxx property, should refer the Sentry release-id, instead of self-defined string/numeric value ?
    I did defined that with GIT hash in me previous attempts :stuck_out_tongue:

Regarding point 1, id would prefer not to expose map-file for publics, like anyone would view js sources, see the map-url and append that in navigationbar and be able to download or whatever.
What i mean with hidden sourcemap was basically (and probably wrong approach), i did have map-file uploaded to live version, but the map was never referred in .min.js, so no one would see there is a map available. Kind of hoped Sentry would in that case (in some magic way with releases) get a indication, if getting in reports from live-web-app, and if heading over there to “parse/scrape” any files, it would also find map-file.

Am I on correct path or have i’ve got it all wrong ?

  1. When i publish new release of web app online,
    the bundle.min.js needs to contain #sourceMappingURL=bundle.min.js.map

Yes.

but does the map need to be accessible from web ?

That’s up to you. If it’s uploaded as an artifact, Sentry will use that. But if it can’t find a matching artifact, Sentry attempts to fetch from your public web server.

If point.1 is true, why need to upload .min.js.map and min.js into Sentry release ?

You don’t have to. But it’s recommended because:

  1. It reduces latency between Sentry receiving the event and processing source maps
  2. Privacy – your source maps don’t have to be public.
  3. It avoids version mismatches where the source code/source map differs (e.g. user is using outdated code cached in browser, but Sentry fetches newest source code/map).

When initiating Raven, think I’ve done it wrong, the release: xxxxx property, should refer the Sentry release-id, instead of self-defined string/numeric value ?

This should be your release version, which can be any string (Git hash is fine).

Regarding point 1, id would prefer not to expose map-file for publics

This is why you should use artifacts.

i did have map-file uploaded to live version, but the map was never referred in .min.js, so no one would see there is a map available.

Note that the browser doesn’t attempt to download source maps unless developer tools are open. So it’s fine if your .min.js file points to an inaccessible (via the web, at least) source map file – no regular user will attempt to download this, and for the few who do have developer tools open, they’ll just get a 404 and eveything will be fine.

If site was running in intranet server with virtualhost, does it still uploads the sourcemap. or it requires to have online domain for sentry to fetch the source maps?.

edit: i think i found my answer here: Making Source Maps Available to Sentry via Windows. i use windows and doc says about only linux and mac.

thanks

I don’t quite understand what I’m doing wrong

I have //# sourceMappingURL=app.js.map in my app.js file

I also uploaded app.js and app.js.map to sentry with the correct release version.

When I see the error, it still can’t find the source.

Note: I removed the file from the web after I uploaded it (i.e if you go to http://myapp.com/app.js.map you can’t find anything)
I did that so my code will not be shown to the public.
I also took out --url-prefix to accept multiple origins for now.

What can I be doing wrong here? @deko @benvinegar

I thought that even though I removed the .map file from the web that Sentry will still find them because I uploaded them to your servers.

So it turns out I had to specify the --url-prefix in this case

It had to be http://mydomain.com/dist/build/

my sourcemappingURL remained app.js

Also note that I removed app.js.map from my production server, to ensure that I am serving the one from Sentry

Hi guys,

Another source maps problem here. I am generating source maps with uglify and the result is:

  • project/dir/dist/js/file.min.js
  • project/dir/dist/js/file.min.js.map

The minified files end with //# sourceMappingURL=file.min.js.map and when I throw an error the browser shows me the content of the source file (it’s in the source map).

I uploaded the files with the cli tool:

$ sentry-cli releases -o <org> -p <project> files <release> upload-sourcemaps --url-prefix '~/dir/dist/js' dist/js --rewrite

and the result is:

Source Map Upload Report
  Minified Scripts
    ~/dir/dist/js/file.min.js (sourcemap at components.min.js.map)
  Source Maps
    ~/dir/dist/js/file.min.js.map

Also, files listing displays:

+-----------------------------------+--------------+-----------------+----------+
| Name                              | Distribution | Source Map      | Size     |
+-----------------------------------+--------------+-----------------+----------+
| ~/dir/dist/js/file.min.js         |              | file.min.js.map | <size>KB |
| ~/dir/dist/js/file.min.js.map     |              |                 | <size>KB |
+-----------------------------------+--------------+-----------------+----------+

So, I am throwing the same error again and the error is still visible in DevTools with unminified code, but in Sentry, only the minified trace is visible.

Additional info:

  • The project is tested locally
  • I am using virtual host
  • I testing with page http://host/dir/dist

What am I doing wrong?