CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolstranspilergoogle-developer-tools
user13004812
user13004812

Reputation:

get sourcemapped source place in browser

I have window.onerror and catching some exceptions. But the problem is that the stack trace is in JS that is compiled from another language (ClojureScript). So stack traces with line numbers are in compiled form. The question is: how to convert the stack to the original source in browser? As we can see browser is already able to use mapped sources in debugger. (We only use Chrome)

Upvotes: 2

Views: 545

Answers (1)

Geoffrey Gaillard
Geoffrey Gaillard

Reputation: 293

ClojureScript does support source maps. By default, the ClojureScript compiler will emit source maps files for development builds only. Based on your description, your ClojureScript file has been compiled for production. There are two ways to solve your issue:

  • generating source maps for the production build,
  • enable debug mode for the production build (recommended).

Generating source maps for the production build

Since you are asking for source maps, here is how to get them. If you have access to the source code, you can set the appropriate compiler option to enable source maps for the production build too:

  • if you use shadow-cljs, you can find an example in Compiler Options documentation.
  • if you use cljsbuild, you can find an example in Source Maps documentation.

Here is a minimal configuration for enabling source maps in production mode :

  • For shadow-cljs
{:builds {:app {:target  :browser
                :release {:compiler-options {:source-map true}}}}}
  • For cljsbuild
{:cljsbuild {:builds [{:id       "production"
                       :compiler {:optimizations :advanced
                                  :source-map    true}}]}}

Enabling debug mode for the production build (recommended)

The ClojureScript compiler also got a feature called :pseudo-names meant to solve this specific issue. From the ClojureScript documentation:

Change your production build to use two additional (compiler) options :pseudo-names true and :pretty-print true. Now your error will show a name that corresponds to the name in the original source.

Same as above, here is an example:

  • For cljsbuild
{:cljsbuild {:builds [{:id       "production-debug"
                       :compiler {:optimizations :advanced
                                  :pseudo-names  true
                                  :pretty-print  true}}]}}
  • For shadow-cljs, you can directly run:
shadow-cljs release app --debug

If you don't have access to the source code, it would be wiser to ask the maintainer for assistance directly. The ClojureScript production build mode produces compact code that is intended to be as small and as fast as possible, not to be read or debugged by humans.

Upvotes: 2

Related Questions