Page MenuHomePhabricator

Give us some errors or something when the LESS parsing fails
Closed, ResolvedPublic

Description

When using LESS in the skins and stuff the parsing can fail for a lot of reasons, including version mismatches (something fine with one version of the parser may not work in a later/earlier one), typos, and missing mixins. It would be nice to have some info on this. Anything. Please?

Event Timeline

Isarra raised the priority of this task from to Needs Triage.
Isarra updated the task description. (Show Details)
Isarra added a project: MediaWiki-General.
Isarra subscribed.

Doesn't the browser console already output any errors related to parsing LESS files?

Maybe it's specific to my development environment, but when I made an "accidental" error in one of the less files I saw this in the console:

Screen Shot 2016-09-28 at 07.42.52.png (518×2 px, 189 KB)

I applied these two mistakes locally in my MediaWiki checkout, to observe the behaviour as of today:

--- a/resources/src/jquery/jquery.makeCollapsible.less
+++ b/resources/src/jquery/jquery.makeCollapsible.less
@@ -8,6 +8,7 @@
 
 /* See also jquery.makeCollapsible.js */
 .mw-collapsible-toggle {
+   .bla();
    float: right;
    -moz-user-select: none;
    -webkit-user-select: none;
diff --git a/resources/src/mediawiki.special/comparepages.less b/resources/src/mediawiki.special/comparepages.less
index ec10192d29..917683face 100644
--- a/resources/src/mediawiki.special/comparepages.less
+++ b/resources/src/mediawiki.special/comparepages.less
@@ -3,6 +3,7 @@
  */
 
 .mw-special-ComparePages {
+   .bla();
    .mw-htmlform-ooui-wrapper {
        width: 100%;
    }

The first one will load on any wiki page where e.g. <div class="mw-collapsible"><div> exists, which you could edit and save on your Main_Page to try. This is loaded through the jquery.makeCollapsible general JavaScript+CSS module.

The second one will load on Special:ComparePages via the mediawiki.special styles-only module.

Either of these will cause an uncaught Less_Exception_Compiler on the server-side in the load.php response. This uncaught exception, along with a detail stack trace, is printed by by default to the terminal tab where you run composer serve (if using https://www.mediawiki.org/wiki/Quickstart). It is also written to the mw-error.log file, which is enabled by default in WMF CI (printed at the end of relevant Jenkins jobs), and also enabled by default in Quickstart, MediaWiki-Docker, and any other dev environment where you either include DevelopmentSettings.php in LocalSettings.php, or otherwise enable $wgDebugLogFile or $wgDebugLogGroups['exception'], as per https://www.mediawiki.org/wiki/Manual:How_to_debug.

mw-error.log
[87044] [Fri Mar 29 18:18:26 2024] [resourceloader] Generating module package failed: [Exception Less_Exception_Compiler( /Users/krinkle/Development/mediawiki/vendor/wikimedia/less.php/lib/Less/Tree/Mixin/Call.php:137) .bla is undefined in /Users/krinkle/Development/mediawiki/resources/src/jquery/jquery.makeCollapsible.less]
#0 /Users/krinkle/Development/mediawiki/vendor/wikimedia/less.php/lib/Less/Tree/Ruleset.php(149): Less_Tree_Mixin_Call->compile(Less_Environment)
#1 /Users/krinkle/Development/mediawiki/vendor/wikimedia/less.php/lib/Less/Tree/Ruleset.php(91): Less_Tree_Ruleset->EvalMixinCalls(Less_Tree_Ruleset, Less_Environment, integer)
#2 /Users/krinkle/Development/mediawiki/vendor/wikimedia/less.php/lib/Less/Tree/Ruleset.php(96): Less_Tree_Ruleset->compile(Less_Environment)
#3 /Users/krinkle/Development/mediawiki/vendor/wikimedia/less.php/lib/Less/Parser.php(188): Less_Tree_Ruleset->compile(Less_Environment)
#4 /Users/krinkle/Development/mediawiki/includes/ResourceLoader/FileModule.php(1127): Less_Parser->getCss()
#5 /Users/krinkle/Development/mediawiki/includes/ResourceLoader/FileModule.php(1019): MediaWiki\ResourceLoader\FileModule->compileLessString(string, string, MediaWiki\ResourceLoader\Context)

It is also reachable in the browser, in a comment prepended to the top of any load.php response. Both for CSS-only repsonses, and for combined JS/CSS responses, like so:

Screenshot 2024-03-29 at 18.29.44.png (1×2 px, 724 KB)

Lastly, for cases where the Less stylesheet is part of a combined JS+CSS module, or otherwise when the stylesheet is lazy-loaded, it is also printed to the browser's console.error channel:

Screenshot 2024-03-29 at 18.31.45.png (1×2 px, 648 KB)

I'd love for CSS-only errors to also be printed to the browser console, but I'm not sure there's a way to do that from an HTTP response with a text/css content type. If there is, let me know! In general though, I recommend developing with Quickstart or otherwise with mw-error.log tailed, so that you're always but one glance away from seeing any uncaught errors and other helpful warnings.

Krinkle claimed this task.
Krinkle triaged this task as Medium priority.
Krinkle edited projects, added MediaWiki-ResourceLoader; removed MediaWiki-General.

Change #1015614 had a related patch set uploaded (by Krinkle; author: Krinkle):

[mediawiki/core@master] ResourceLoader: Remove url/reqId noise from CSS/JS exception comments

https://gerrit.wikimedia.org/r/1015614

Change #1015614 merged by jenkins-bot:

[mediawiki/core@master] ResourceLoader: Remove url/reqId noise from CSS/JS exception comments

https://gerrit.wikimedia.org/r/1015614

I'd love for CSS-only errors to also be printed to the browser console, but I'm not sure there's a way to do that from an HTTP response with a text/css content type. If there is, let me know!

The content type could be arbitrary (by the time the server sets it, it knows there was an error) but I doubt something loaded via a <link> or <style> tag would ever be executed as JS code. A script in the main document could look through the CSS tags and find ones with errors, though. I don't think Javascript can access the content of URLs in <link> tags, but it has access to the CSS syntax tree so the error could be encoded there (e.g. #nosuchthing { content: "<stack trace>"; }). Probably too hacky to be worth it though.