Page MenuHomePhabricator

Comments containing navbox partially removed by MobileFormatter
Closed, ResolvedPublicPRODUCTION ERROR

Description

Error
normalized_message
TypeError: Cannot read properties of null (reading 'parentNode')
stack_trace
at Object.ThreadItem.js.ThreadItem.static.newFromJSON  URL1:88:955
at Object.init  URL1:18:763
at mw.dt.init  URL1:4:463
at Object.add  URL1:760:696
at dt.init.js  URL1:4:629
at runScript  URL2:12:224
at Array.<anonymous>  URL2:12:872
at flushCssBuffer  URL2:4:876
Impact

~100 in last 12 hours

Affects ko, pl, hi, fr mobile sites

Notes

Filter for client errors 2/11/22 https://logstash.wikimedia.org/goto/bfd0cddd15b1e3bf81fcb0bb6c897a11

Reproducible - navigate to https://fr.m.wikipedia.org/wiki/Discussion:L%C3%A9onard_de_Vinci#Homosexualit%C3%A9_de_L%C3%A9onard and check console.

QA

When testing on non-Wikipedias, we will want to check community portal pages (e.g. https://en.wikivoyage.org/wiki/Wikivoyage:Community_portal) as these are pages projects depend on to communicate important information to readers and volunteers.

Event Timeline

Krinkle subscribed.

ThreadItem and mw.dt.init are part of DiscussionTools.

Krinkle triaged this task as High priority.Feb 11 2022, 6:50 PM
Krinkle moved this task from Untriaged to Feb 2022 on the Wikimedia-production-error board.

The exception occurs because one of the comments on the page contains a navbox (it's inside this collapsed section: https://fr.wikipedia.org/wiki/Discussion:Léonard_de_Vinci#information_douteuse so I can't link to it directly – search the HTML source for "c-Crijam-2021-05-18T10:38:00.000Z-Relecture_partie_par_partie"), and the mobile transformations delete it, making DiscussionTools confused about where the comment starts.

Esanders renamed this task from TypeError: Cannot read properties of null (reading 'parentNode') to Comments inside navbox removed by MobileFormatter.Mar 2 2022, 11:39 PM
Esanders renamed this task from Comments inside navbox removed by MobileFormatter to Comments containing navbox partially removed by MobileFormatter.Mar 3 2022, 12:25 AM

We have two general directions we can go:

  1. Accept that DOM corruption may happen, and live with it:
    • Replace the missing strart/end node with a best guess. This could break things like comment highlighting or future features that rely on the JS knowing the comment range.
    • Remove corrupted comments from the comment tree. This would disable the all reply tools features for such comments (e.g. the reply button)
  2. Try to fix any sources of corruption:
    • Fix MobileFrontend to not hide navboxes in certain contexts, e.g. when under a heading (q: is it even possible for MF to detemine when a navbox is really is navbox and when it is part of a comment?)
    • As MF transformations happen after DT, tell MF to never remove nodes that contain comment markers, or to re-parent the comment markers
      • On the page in this example, the real navboxes contain a signature which is treated as a small comment, so they also will contain comment markers. This could perhaps be solved by telling MF to never remove partial comment markers (e.g. only a start marker).

The MF transformation in question seems directed in terms of product purpose at content pages, not discussion pages. So omitting it from that context more generally might be a good option. Depending on whether there are other MF transformations that do specifically relate to discussion pages, it might then be easier to skip it altogether or make it conditional on some value of "is this a content page" (we have a content namespaces concept in MW) or "is not a discussion page" (there are various different ways to approximate this, including newsectionlink and Signature namespaces, and DTs own utility method for this).

Thanks. It looks like the rule that's removing this box is defined in the config:

"MFRemovableClasses": {
	"value": {
		"beta": [],
		"base": [
			".navbox",
			".vertical-navbox",
			".nomobile"
		]
	}
}

In our WMF config we also add .mbox-image to this list.

Talk page yellow boxes are removed by CSS only (.tmbox). Hiding content with CSS doesn't break our tools as badly.

So some aditional sub-approaches to (2) would be;

  • Reduce the number of elements removed by MFRemovableClasses (probably just to .nomobile) and replace navbox removal with CSS hides
  • As Timo suggests, teach MF to know when DT is enabled, and disable some/all of these rules

I slightly favour the first of these as it reduces the amount of DOM manipulation that MF is doing, which seems like a good thing in the long run (even if it results in shipping a few more bytes per page), and there is already plenty of precedent for MF just hiding unwanted content with CSS (cf talk page yellow boxes).

It also avoids adding even more complexity to the MF transformations.

This looks like less of an edge case:

The thread has a header template https://en.wikipedia.org/wiki/Template:Rfc which is also stripped by MobileFrontend. which contains an .mbox-image which is stripped by MobileFrontend.

The CSS solution above would stop DT from crashing, but also in the situation the template should probably not be hidden at all.

During the discussion the Editing and Web Teams had today, we decided on doing the following:

  • 1) @Esanders to confirm that no talk namespaces appear within the wgContentNamespaces config
  • 2) Assuming the wgContentNamespaces config does NOT contain any talk namespaces, the Editing Team will:
    • A) Expose navboxes on all Wikimedia projects and talk pages while excluding:
      • Pages within the main namespace on all Wikipedias
      • Pages that exist within any namespace that is included in the wgContentNamespaces config on any non-Wikipedia project

to confirm that no talk namespaces appear within the wgContentNamespaces config

The following namespaces have wgExtraSignatures (and so have DiscussionTools) as well as being in wgContentNamespaces:

Main namespace on:

  • incubatorwiki
  • labswiki
  • labtestwiki
  • mediawikiwiki
  • metawiki
  • outreachwiki
  • wikimania
  • wikimedia
  • private

Help namespace on:

  • metawiki
  • wikitext

Change 779042 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/MobileFrontend@master] Only apply MFRemovableClasses in content namespaces

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

@Esanders will editing handle code review for this one, or do you need web team input (if the latter please tag Web-Team-Backlog (Kanbanana-FY-2021-22) , if not I'll assume you have that all under control)?

Change 779042 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Only apply MFRemovableClasses in content namespaces

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

Checked on the page mentioned on the task description, the navbox is now showing up on the mobile version of that talk page and also the error is gone from the console.

Screen Shot 2022-04-17 at 9.13.42 PM.png (1×2 px, 495 KB)

I also checked for this error on Logstash and it seems after this fix was deployed to all production wikis on Thursday, the number of occurrences for this error has drastically reduced.

~57 in last 4 days.
~4 in last 2 days.

Screen Shot 2022-04-17 at 8.29.05 PM.png (1×2 px, 232 KB)

Screen Shot 2022-04-17 at 9.41.52 PM.png (1×2 px, 291 KB)

@ppelberg : I am not sure I understand what you stated in the task description under "QA" section. The page you linked to does not contain any navbox and neither the talk page. Did you put a wrong link by any chance?

Checked on the page mentioned on the task description, the navbox is now showing up on the mobile version of that talk page and also the error is gone from the console.

Screen Shot 2022-04-17 at 9.13.42 PM.png (1×2 px, 495 KB)

I also checked for this error on Logstash and it seems after this fix was deployed to all production wikis on Thursday, the number of occurrences for this error has drastically reduced.

~57 in last 4 days.
~4 in last 2 days.

Screen Shot 2022-04-17 at 8.29.05 PM.png (1×2 px, 232 KB)

Screen Shot 2022-04-17 at 9.41.52 PM.png (1×2 px, 291 KB)

@ppelberg : I am not sure I understand what you stated in the task description under "QA" section. The page you linked to does not contain any navbox and neither the talk page. Did you put a wrong link by any chance?

I think I did :)

Let's consider this resolved.

(For future reference: that was actually caused by T219420)