Webpack traces don't trace back to actual React components

[zachfeldman]

Hi there, I was told to file this issue by Rollbar support. I finally was able to get Source Maps working with my setup - I prefer not to put source maps into production, but only have them in development, so I'm uploading them myself for now. I'm trying to use the example that support referred me to:

https://github.com/rollbar/rollbar.js/tree/master/examples/webpack

but my traces look like this:

Last line of the trace:

It's not tracing back to an actual component file. My components are in files like Single.jsx or BookingWidget.jsx.

Any ideas on how to make the trace more accurate?

[brianr]

@zachfeldman Frame number 1 in your stack trace looks like it is still minified. I suspect that's the frame that has the actual component.

The source map is being applied (you can tell because the filename is webpack://... and not https://...), so this means the source map you're uploading has lost the original source information. That can happen if you have a multi-step build process (i.e. transpiling before webpack gets involved) and aren't passing the source map through.

Does that sound right? You should be able to fix that by having the first step generate a source map, and pass that as the input source map to the next step.

[zachfeldman]

@brianr I'm not sure I get what you're saying.

To clarify, my process probably isn't typical. I'm trying to not have source maps in production because I'd prefer to obfuscate our code there.

Our build process is run on Heroku, not locally - so we build on Heroku whenever new code is pushed. We don't pushed already compiled code to production.

The source maps I have were generated by setting the devtool option to source-map and running the prod build locally, then uploading those to Rollbar.

Am I just doing this in the wrong way? Is it possible to not have to build locally on every push and still get detailed stack traces? Is it possible to have detailed stack traces without having source mapping on production for end users?

[zachfeldman]

Also thanks for your help!

[zachfeldman]

Just a little bump :) We'd love to know what's causing these errors if you have a moment to look at this today.

[zachfeldman]

Some additional research I did on this:
vercel/next.js#1903
rails/webpacker#769

Would nosources-source-map or hidden-source-map options work with Rollbar and still obfuscate my code to site visitors? Could they still guess my sourcemap URLs if they have the same hash as my front-end JS files, I guess? Perhaps combining one of these source map options with https://github.com/thredup/rollbar-sourcemap-webpack-plugin would be a good option?

[rokob]

I am not entirely sure what information one gets from the nosources-source-map, so I couldn't say either way without trying it. It should work to locally build your source maps using your production configuration, provided the code is minimized deterministically. However, getting those source maps generated properly with multiple different transpilation steps is the tricky part, but is highly dependent on the individual setup.