TypeError: this.button is undefined / TypeError: Cannot read properties of undefined (reading 'isVisible')
Closed, ResolvedPublicPRODUCTION ERROR
Actions

Assigned To

Authored By

	Jdlrobson
	May 26 2022, 4:37 PM

Description

Two error messages with same stacktrace:

this.button: 448 in last 7 days. Polish Wikipedia only. This bug should be considered a blocker before rolling the feature out to other wikis (see https://wikitech.wikimedia.org/wiki/Deployments/Holding_the_train#Issues_that_hold_the_train)
Cannot read: 261 in last 7 days

Error

mwversion: undefined
reqId: undefined
Find reqId in Logstash

normalized_message

TypeError: this.button is undefined

exception.trace

at realtimepreview/RealtimePreview.js/RealtimePreview.prototype.enableFeatureWhenScreenIsWideEnough https://pl.wikipedia.org/w/load.php?lang=pl&modules=ext.CodeMirror%2Ccharinsert%7Cext.CodeMirror.data%7Cext.wikiEditor.images%2Crealtimepreview%7Cjquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cjquery.makeCollapsible.styles%7Cjquery.ui%7Cmediawiki.diff.styles%7Cmediawiki.language.specialCharacters%7Cmediawiki.page.preview%7Cmediawiki.template%2Cwidgets%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.icons-content%2Cicons-editing-advanced%2Cicons-editing-citation%2Cicons-editing-core%2Cicons-editing-list%2Cicons-editing-styling%2Cicons-media%2Cindicators&skin=vector&version=17gik:24:169
at dispatch https://pl.wikipedia.org/w/load.php?lang=pl&modules=ext.CodeMirror%2Ccharinsert%7Cext.CodeMirror.data%7Cext.wikiEditor.images%2Crealtimepreview%7Cjquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cjquery.makeCollapsible.styles%7Cjquery.ui%7Cmediawiki.diff.styles%7Cmediawiki.language.specialCharacters%7Cmediawiki.page.preview%7Cmediawiki.template%2Cwidgets%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.icons-content%2Cicons-editing-advanced%2Cicons-editing-citation%2Cicons-editing-core%2Cicons-editing-list%2Cicons-editing-styling%2Cicons-media%2Cindicators&skin=vector&version=17gik:102:260
at add/elemData.handle https://pl.wikipedia.org/w/load.php?lang=pl&modules=ext.CodeMirror%2Ccharinsert%7Cext.CodeMirror.data%7Cext.wikiEditor.images%2Crealtimepreview%7Cjquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cjquery.makeCollapsible.styles%7Cjquery.ui%7Cmediawiki.diff.styles%7Cmediawiki.language.specialCharacters%7Cmediawiki.page.preview%7Cmediawiki.template%2Cwidgets%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.icons-content%2Cicons-editing-advanced%2Cicons-editing-citation%2Cicons-editing-core%2Cicons-editing-list%2Cicons-editing-styling%2Cicons-media%2Cindicators&skin=vector&version=17gik:98:877

Impact

Notes

Details

	Subject	Repo	Branch	Lines +/-
	Realtime Preview: only add window-resize handler if toolbar button is used	mediawiki/extensions/WikiEditor	master	+3 -2
	Realtime preview: allow loading as a gadget	mediawiki/extensions/WikiEditor	master	+10 -2

Customize query in gerrit

Related Objects

Mentioned In: T308176: CodeEditor is broken with realtime preview enabled
Mentioned Here: T313210: Uncaught TypeError: this.pagePreview.doPreview(...) is undefined
rEWED8a6a40292fb8: Localisation updates from https://translatewiki.net.
rEWED9f3d4f0fd991: Realtime Preview: hide onboarding popup when screen is too narrow

Event Timeline

Jdlrobson triaged this task as High priority.May 26 2022, 4:37 PM

Jdlrobson created this task.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 26 2022, 4:37 PM

Jdlrobson renamed this task from TypeError: this.button is undefined to TypeError: this.button is undefined / TypeError: Cannot read properties of undefined (reading 'isVisible').May 26 2022, 4:38 PM

Jdlrobson updated the task description. (Show Details)

I've not looked into it yet, but this might be because on plwiki Realtime Preview is loaded as a gadget rather than in the usual way.

Umherirrender added a project: JavaScript.Jun 1 2022, 7:23 PM

• JMcLeod_WMF moved this task from New & TBD Tickets to Maintenance Backlog on the Community-Tech board.Jun 6 2022, 2:12 PM

• JMcLeod_WMF moved this task from Maintenance Backlog to Needs Discussion on the Community-Tech board.

Change 804273 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Realtime preview: allow loading as a gadget

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

gerritbot added a project: Patch-For-Review.Jun 9 2022, 9:29 AM

Samwilson claimed this task.Jun 9 2022, 9:30 AM

Samwilson edited projects, added Community-Tech (CommTech-Sprint-26); removed Community-Tech.

Samwilson moved this task from Ready 🎬 to Review/Feedback 💬 on the Community-Tech (CommTech-Sprint-26) board.Jun 9 2022, 10:01 AM

Change 804273 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime preview: allow loading as a gadget

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Jun 9 2022, 1:00 PM

Maintenance_bot removed a project: Patch-For-Review.Jun 9 2022, 1:30 PM

thcipriani moved this task from Untriaged to May 2022 on the Wikimedia-production-error board.Jun 9 2022, 4:09 PM

Samwilson moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Sprint-26) board.Jun 10 2022, 2:25 AM

dom_walden mentioned this in T308176: CodeEditor is broken with realtime preview enabled.Jun 13 2022, 7:27 AM

I loaded the WikiEditor/CodeEditor for pages in various namespaces on beta wikisource (where RTP is loaded as a gadget).

I did not see any errors in the browser console on Firefox. Nor were there any errors in beta's logstash.

However, it may be worth keeping an eye on the errors logs when this gets deployed to production.

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-27); removed Community-Tech (CommTech-Sprint-26).Jun 21 2022, 1:41 PM

• JMcLeod_WMF moved this task from Ready 🎬 to Product sign-off 🤘 on the Community-Tech (CommTech-Sprint-27) board.Jun 21 2022, 1:42 PM

• NRodriguez moved this task from Backlog to 🌟Top Priority on the Realtime Preview board.Jun 30 2022, 5:28 PM

• NRodriguez closed this task as Resolved.Jul 5 2022, 5:51 PM

• JMcLeod_WMF moved this task from Product sign-off 🤘 to Done 🏁 on the Community-Tech (CommTech-Sprint-27) board.Jul 6 2022, 1:18 PM

It appears this bug is still happening consistently on test2.wikipedia.org when resizing the window, e.g. at https://test2.wikipedia.org/w/index.php?title=Main_Page

I've confirmed that the above linked git commit has been merged and made it to production, including on this particular wiki.

The problem appears to be that this.button is undefined. I realize that's literally the native error message, but it seems genuine and expected, and not addressed by the commit in question.

The constructor is run on every page load, and sets up a global window event handler. This callback then makes reference to something this constructor has neither directly nor indirectly created, thus can be undefined.

In order to uphold the same separation of concerns that the realtime preview has today (that is, it leaves it up to WikiEditor to decide whether to invoke addToTolbar and thus does not concern itself with which URLs and page models use or don't use the editor), I would imagine that we'd have to defer the entire construction of it. Not just the getToolbarButton method call.

At that point, mw.config.get( 'wgPageContentModel' ) !== 'wikitext' ) should become redundant, not even as optimisation, since presumably the majority of cases worth optimising for are already taken care of by virtue of the JS payload itself not being requested on unrelated pages. Plus there is the mw.hook( 'wikiEditor.toolbarReady' ) handler wrapping it all which I would expect not to fire unless WikiEditor is also going to emit addToToolbar, and thus is gurauanteed to be an edit form for a wikitext content model.

Something isn't adding up. I'm not sure what yet :)

Another quick fix might be to defer the new RealtimePreview() ctor to the same callback where getToolbarButton is called if the rest isn't needed outside that context anyway.

Change 811801 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/WikiEditor@master] Realtime Preview: only add window-resize handler if toolbar button is used

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

gerritbot added a project: Patch-For-Review.Jul 7 2022, 5:21 AM

Good point. The constructor shouldn't be adding any event handlers; that should only happen in getToolbarButton(), because that's effectively the entry point for RTP.

I think one issue on test2wiki is that the gadget is being loaded incorrectly. It's got:

* realtimePreview[ResourceLoader|default|dependencies=ext.wikiEditor.realtimepreview]|realtimePreview.js

but should have

* realtimePreview[ResourceLoader|default|dependencies=ext.wikiEditor.realtimepreview|actions=edit]|realtimePreview.js

The bug should of course be fixed in the extension, but avoiding loading the gadget at all for non-edit actions would be good.

handler wrapping it all which I would expect not to fire unless WikiEditor is also going to emit addToToolbar, and thus is gurauanteed to be an edit form for a wikitext content model.

addToToolbar is fired for non-wikitext content models as well, such as JSON, so it does need to check (although we could probably look deeper into that, because I imaging that some non-wikitext pages would benefit from previewing! that's a separate issue though).

dom_walden edited projects, added Community-Tech (CommTech-Sprint-28); removed Community-Tech (CommTech-Sprint-27).Jul 7 2022, 6:27 AM

dom_walden moved this task from Ready 🎬 to In Development 💻 on the Community-Tech (CommTech-Sprint-28) board.

Change 811801 merged by jenkins-bot:

[mediawiki/extensions/WikiEditor@master] Realtime Preview: only add window-resize handler if toolbar button is used

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

Maintenance_bot removed a project: Patch-For-Review.Jul 11 2022, 4:30 AM

ReleaseTaggerBot edited projects, added MW-1.39-notes (1.39.0-wmf.21; 2022-07-18); removed MW-1.39-notes (1.39.0-wmf.16; 2022-06-13).Jul 12 2022, 6:02 AM

Samwilson moved this task from In Development 💻 to QA 🐛 on the Community-Tech (CommTech-Sprint-28) board.Jul 15 2022, 5:22 AM

• JMcLeod_WMF edited projects, added Community-Tech (CommTech-Sprint-29); removed Community-Tech (CommTech-Sprint-28).Jul 18 2022, 5:34 PM

• JMcLeod_WMF moved this task from Ready 🎬 to QA 🐛 on the Community-Tech (CommTech-Sprint-29) board.Jul 18 2022, 5:35 PM

• NRodriguez moved this task from 🌟Top Priority to P2s on the Realtime Preview board.Jul 20 2022, 12:24 PM