0

In a production environment, where my javascript assets are bundled, when there is a javascript error that I catch, I get with it the line and column, for example:

d86c04c8f3.js:2:9588

Now, since the file is minified, etc., it's difficult to reverse-engineer and find the problematic line in the source code. Do the rails assets bundler has a way to reverse engineer, given the line/col to find the original line? It should be possible, since the asset-builder has all the information it needs.

We need a simple option, to run the bundle exec rake assets:precompile RAILS_ENV=production again, but this time specify line+col, and then the rake will output what is the source file + line which corresponds to that asset line+col. This way we can easily debug exceptions that are being catched on the client side (and that are sent to the server for monitoring purposes).

EDIT1

All the solution regarding doing something on the client side are infeasible, since we don't have access to the client - we're talking about exceptions that were discovered in production mode, live mode, and that are being sent to the server for monitoring purposes.

Nathan B
  • 1,625
  • 1
  • 17
  • 15
  • this might not be a proper solution but, you can use chrome debug tools `pause on exception` to debug it. It might give you an idea where the exception is raised. – uday Apr 22 '19 at 09:20
  • Rails via Sprockets source mapping (https://stackoverflow.com/a/21007408/18706), but you may need to configure it for use in production. – mahemoff Apr 22 '19 at 10:23
  • Chrome dev tools has a "prettify" option for your assets (when you open a file on the Source tab, there's a "{ }" button with "pretty print" title). – arieljuod Apr 22 '19 at 13:39
  • @UdAY, arieljuod see the edit - it's a live production mode, we don't have access to the client's browser. mahemoff - is this solution for live production mode? I don't want to change the bundled javascript asset. I want to keep it lean. The development environment has all the information to do this task. – Nathan B Apr 23 '19 at 10:16

1 Answers1

1

For debugging minified scripts there're sourcemaps, once loaded in browser - you can see unminified code there.

Sprockets planned support for sourcemaps in 4.0, which is still not released yet (only a beta).

Webpack does support sourcemaps and rails 6 switched to webpacker by default, so converting scripts to packs seems logical, albeit being a massive task for large projects

Update: once you have source map for your build, you can use a tool like:

npx source-map-cli resolve d86c04c8f3.js.map 2 9588

This will tell you where in your code that position in minified file maps in the form of:

Maps to webpack:///app/javascript/components/CountrySelector.jsx:14:0

    fetch(`/control/autocomplete/countries`).then(r => r.json()).then(countries => this.setState({countries}))
    ^
Vasfed
  • 18,013
  • 10
  • 47
  • 53
  • see my edit. We don't have access to the client's browser, since the problem occurs in production/live mode. The solution should be very easy - the code that creates the bundle, can have the option to stop when reaching preknown line/col and output the source file it's currently in - that's an easy solution, the question is how to patch the asset builder. – Nathan B Apr 23 '19 at 10:18
  • @NadavB key here is the sourcemap, once you have it - you can map that location to original source, see update – Vasfed Apr 23 '19 at 11:21
  • thank you, you mentioned Rails 6, but it is not released yet too, right? – Nathan B Apr 29 '19 at 11:54
  • 1
    @NadavB rails 6 is in release candidate stage, you can already use it, but webpacker can be used well with rails 5, it's just not the default – Vasfed Apr 29 '19 at 11:58