Source map for MERGE functions

[joaomirandas]

Today i bring an discussion about how to track erros in front-end production.

I have been used a lot of MERGE functions, it's amazing for delivery content like a pro. Normally it's used in a stack with versions control to avoid cache of browsers and keep my end users up-to-date into function, buuut when something is miss coded i need to track that error, i already know about bundlers and other things but totalJS it's so amazing than i think not be necessary use anything more.

My primary issue is how to track erros on end-user browser, i connected Sentry solution to get erros but it's impossible to identify without an sourceMap for JS files, i put some eyes into MERGE function in core of totalJS (index of module) but i need to say, it's hard to understand. This sourceMaps can be usefull for a lot of other users of totalJS and make this amazing framework even better for production in larga scale.

Details about sourceMaps: Why use sourceMaps for .js files

Check how erros is captured by Sentry :

My question is, it's possible to create parameter on MERGE functions to embed sourceMap of files?

[petersirka]

I understand and personally we don't have any problem with debugging, because we use only one dependency our jComponent (in most cases). But I understand, but how do you imagine this feature? MERGE() only takes the files and join them. It's not a problem to skip comments with source-maps, but I don't know how the browser will work if the one file will contain multiple source-maps. MERGE() doesn't optimize/obfuscate the source-code, only compresses and merges it.

So my question is how do you imagine this needed functionality?

[joaomirandas]

Woow, thankyou for fast response.

I still searching here about that, probably generating just an sourceMap for entirely source merged file will be enough - something like:

MERGE({ 
 out: '/css/default.css', 
 sourceMap: true, 
 obfuscate:false, 
 ...anythingYouWant
}, 'fileOne.js', 'fileTwo.js', 'fileN.js');

So it's possible to keep compatibility with previous versions, just checking if first parameter is string or object, if object so become necessary to use at least out paramether.

On compressing files we need to check if parameter sourceMap exist and if is true, so when true at end of compressed file we just need to add route to sourceMaps like:

//# sourceMappingURL=/path/to/file.js.map

And for generate this sourceMap file i can suggest an library for ideas: uglify-js What do you think about this approach? Could i help in something?

[petersirka]

As I wrote, Total.js only compresses and merges files, nothing more. Uglify knows to analyse files and this is big difference. Adding of external dependecies to the Total.js is not my plan, Total.js must be without dependencies, so extending of MERGE() method by adding Uglify is not acceptable for me.

I can add only some exception for removing of comment with source-map e.g. //# sourceMappingURL=/path/to/file.js.map or maybe I can do somethig more, but as I wrote: Total.js works with files as they are, so the source-map can't be generated automatically by Total.js framework (maps must exist and Total.js can return them).

As I wrote in my previous post, we don't have any similar problem and we are providing more than 200 Total.js apps, but yes - we don't use external client-side dependencies with except jComponent (with jQuery) and CodeMirror, D3 or Apex Charts (in some projects). In most cases are bugs in our custom code, not in libraries.

[joaomirandas]

Yes, i understand and agree with your ideas to not embed anything more into totalJs - It's possible to create sourceMaps from previous generated files using CLI methods and another libraries, so to become possible we just need an callback for functions merge to when it's done, probably resolving with promise or something. When each merge it's done we call another module to generate sourceMaps and embed that. That is possible?

[petersirka]

Sorry for delay, I forgot on this thread. Adding a callback to merge method is possible, but it will be useless. You can create map files immediately after start. Maybe better solution is to disable mangle argument or obfuscating of the entire client-side code due to solving of further problems.

You need to count with:

• in debug mode the framework performs merging always for each request to resource
• in release mode the framework performs merging one-time for some period

So the callback could be executed serveral times. Therefore I suggest to create map files after start or disable obfuscating.