JENKINS-62473 Add source maps

[95jonpet]

See JENKINS-62473.

Adds source maps for built JS and CSS using reasonable settings from the available options. Production source maps are generated optimized for quality, whereas development source maps are of lower quality and faster to produce.

The solution uses the mode value passed to webpack from package.json:

"scripts": {
    "dev": "webpack --config webpack.config.js",
    "prod": "webpack --config webpack.config.js --mode=production"
},

Proposed changelog entries

• Developer: Add source maps for CSS and JS.

Proposed upgrade guidelines

N/A

Submitter checklist

• (If applicable) Jira issue is well described
• Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change). Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• Appropriate autotests or explanation to why this change has no tests
• For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@timja

Maintainer checklist

Before the changes are marked as ready-for-merge:

• There are at least 2 approvals for the pull request and no outstanding requests for change
• Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• Changelog entries in the PR title and/or Proposed changelog entries are correct
• Proper changelog labels are set so that the changelog can be generated automatically
• If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[oleg-nenashev]

LGTM, thanks! I'd guess we will need to test it with the CSS update effort

[timja]

JavaScript seems to be working, but the less => css sourcemaps don't seem to be working, would you be able to take a look please?

[95jonpet]

I will check it. It produces separate files in production, but should be inlined when developing. Perhaps there is no change that needs to be mapped? Right now it should just give line numbers in dev.

[timja]

I will check it. It produces separate files in production, but should be inlined when developing. Perhaps there is no change that needs to be mapped? Right now it should just give line numbers in dev.

possibly I didn't check the production mode but its definitely giving the css files rather than the less files in chrome developer tools and if I check the css files I can't see any mention of a mapping file or inline mapping

[fqueiruga]

I think I'm testing this all wrong. Maybe I'm missing something here. I'm not able to have this working.

[95jonpet]

I will check this again and fix it.

[95jonpet]

Source maps are generated in the .js-files för development, but seem to use absolute file paths:

eval("// extracted by mini-css-extract-plugin//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvbWFpbi9qcy9hZGQtaXRlbS5sZXNzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vc3JjL21haW4vanMvYWRkLWl0ZW0ubGVzcz82YmNjIl0sInNvdXJjZXNDb250ZW50IjpbIi8vIGV4dHJhY3RlZCBieSBtaW5pLWNzcy1leHRyYWN0LXBsdWdpbiJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/main/js/add-item.less\n");

/***/ }),

/***/ 3:
/*!*******************************************************************!*\
  !*** multi ./src/main/js/add-item.js ./src/main/js/add-item.less ***!
  \*******************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(/*! C:\Dev\Git\jenkins\war\src\main\js\add-item.js */"./src/main/js/add-item.js");
module.exports = __webpack_require__(/*! C:\Dev\Git\jenkins\war\src\main\js\add-item.less */"./src/main/js/add-item.less");

This could be problematic when running in Docker.

[95jonpet]

I can see them when running the built PR in Docker using the following command:

docker run --rm -ti -p 8080:8080 -e ID=4753 jenkins/core-pr-tester

The "base-styles-v2.less:99" reference works. Clicking on it reveals the .less file:

[timja]

Weird I tested this again in development and production mode and I still don't see source maps for less =/

[fqueiruga]

Me neither

[timja]

@95jonpet would you be able to see if it works for you in a local setup please?

Here's the documentation for frontend work:
https://github.com/jenkinsci/jenkins/blob/master/CONTRIBUTING.md#building-frontend-assets

[95jonpet]

Sure thing.

[95jonpet]

@timja, thank you for linking relevant documentation.

I have changed implementation during development to inline-cheap-module-source-map. They work when testing your scenario. My previous "solution" messed up the includes and only listed the final .less-files such as base-styles-v2.less. This is now fixed, resulting in the includes, such as typography.less being shown instead.

Clicking on typography.less reveals the source code:

[timja]

Thanks, I've tested in both production and development mode and it's working now

[timja]

This PR is now ready for merge, and will merged after ~24 hours if there's no negative feedback

[timja]

Unmarking as ready-for-merge

I've been running this locally and after making a change it seems to crash my Mac,
I get a complete lock up of my machine, the only way to fix it is to reboot the mac, or very slowly get a terminal and kill the java process that's running at 800% CPU

I took a photo of the log from my phone as the computer was completely unresponsive:

I was editing less files in development mode at the time,

Would be good to know if this is affecting anyone else before we merge this

[timja]

I'm seeing similar-ish behaviour in the logs without this change but while my computer gets slower it doesn't fully lock up:

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/timja/projects/jenkinsci/jenkins/war/node/node',
1 verbose cli   '/Users/timja/.nvm/versions/node/v12.14.1/bin/npm',
1 verbose cli   'run',
1 verbose cli   'mvnbuild'
1 verbose cli ]
2 info using npm@6.13.4
3 info using node@v12.14.1
4 verbose stack Error: missing script: mvnbuild
4 verbose stack
4 verbose stack Did you mean this?
4 verbose stack     build
4 verbose stack     at run (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack     at /Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack     at /Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack     at /Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack     at checkBinReferences_ (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack     at final (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack     at then (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack     at ReadFileContext.<anonymous> (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/read-package-json/read-json.js:350:20)
4 verbose stack     at ReadFileContext.callback (/Users/timja/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:115:16)
4 verbose stack     at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:239:13)
5 verbose cwd /Users/timja/projects/jenkinsci/jenkins/war
6 verbose Darwin 19.3.0
7 verbose argv "/Users/timja/projects/jenkinsci/jenkins/war/node/node" "/Users/timja/.nvm/versions/node/v12.14.1/bin/npm" "run" "mvnbuild"
8 verbose node v12.14.1
9 verbose npm  v6.13.4
10 error missing script: mvnbuild
10 error
10 error Did you mean this?
10 error     build
11 verbose exit [ 1, true ]

[timja]

Seems to be fixed by either adding blueocean.features.BUNDLE_WATCH_SKIP or not having the blue ocean plugin installed in the development instance

https://github.com/jenkinsci/blueocean-plugin/blob/77960a8dc21840ae5f6df784a26f91e09d7da621/blueocean-web/src/main/java/io/jenkins/blueocean/dev/RunBundleWatches.java#L82

cc @halkeye if you've seen something similar before