Page MenuHomePhabricator

Fix Javascript source maps in SVGTranslate
Open, NormalPublic3 Story Points

Description

It's pretty crucial, when debugging something in the browser, to have source maps on the JavaScript files as they are minified.
It seems that symfony and Encore, while allowing for source maps, are not really working very well when JS files are combined.

We have the setting enabled (see https://symfony.com/doc/4.1/frontend/encore/sourcemaps.html ) but the source map is still not working, probably because we have multiple files concatenated into one.

Brief search on StackOverflow showed this point: https://stackoverflow.com/questions/24172391/source-mapping-with-assetic-in-symfony2
Assetic, at least, has a problem where the source maps need to be in the same production directory, and there seems to be a way to attach individual source maps per file even if the files are then concatenated. This is a potential solution?

Another solution (fastest, most straight forward!) -- Remove the optimization (do not concat at all) so we can debug while we build the tool. When we go into maintenance mode on the tool (and are moving on to other projects) we can bring back the minification/concatenation.

Event Timeline

Restricted Application added a project: Community-Tech. ยท View Herald TranscriptFeb 14 2019, 10:34 PM
Restricted Application added a subscriber: Aklapper. ยท View Herald Transcript
Mooeypoo updated the task description. (Show Details)Feb 14 2019, 10:39 PM
Mooeypoo moved this task from Untriaged to To be estimated/discussed on the Community-Tech board.
MusikAnimal added a subscriber: MusikAnimal.EditedFeb 15 2019, 11:54 PM

I assume you'd only be using the source maps in development, right? In that case you can run Encore in dev mode with ./node_modules/.bin/encore dev, and the source will be unminified/unuglified. I think if you set it up right it will generate each file individually instead of concatenating into one, too.

Yeah I always develop with ./node_modules/.bin/encore dev --watch running, which seems to work fine with regard to accurately locating JS errors in their actual source locations. It's also faster than building the whole production assets on every change. I've had a couple of issues at times with things like images (although I think that's been in conjunction with OOUI updates, because I can't replicate that now).

Niharika triaged this task as Normal priority.Feb 27 2019, 12:10 AM
Niharika set the point value for this task to 3.
Niharika moved this task from To be estimated/discussed to Estimated on the Community-Tech board.
This comment was removed by Mooeypoo.

This task is about making it possible to debug JS in production (and on the staging site) isn't it? Or @Mooeypoo is the dev asset build not working for you locally?

I had a temporary issue with the dev asset build but it seemed to have been fixed. The original idea here is to make it possible to debug in staging and production. If we can do that easily with source maps, we can put those in both staging and production.

If source maps turn out to be a problem, then maybe we can consider having non minified version on staging? There was a theoretical idea about building *on* the server, but that might be best to explore on a larger-scoped ticket. The ticket here was to see whether it was straight forward to fix this with source maps, or with something relatively quick. If not, we can re-assess the options.