Page MenuHomePhabricator

document.body.append is not a function / undefined is not a function when mounting in Special:MediaSearch in ES5 browsers
Closed, ResolvedPublic

Description

https://commons.m.wikimedia.org/wiki/Special:MediaSearch?search=&type=video

I noticed a large amount of errors from ES5 browser (> 100 a day)

It's not an ES6 browser, so you might want to consider dropping support for ES5 browsers in the search experience using the new ES6 ResourceLoader module support that @Catrope introduced.

https://logstash.wikimedia.org/goto/a8c100294e507e87896bfeede6c1a454
resources/lib/vue/vue.common.prod.js

message
undefined is not a function
trace
at module.exports.mounted  URL1:486:835
at He  <anonymous>:370:244
at Yt  <anonymous>:384:197
at Object.jt.insert  <anonymous>:379:221
at k  <anonymous>:419:754
at wn.zi.nodeOps [as __patch__]  <anonymous>:421:112
at wn.e._update  <anonymous>:393:412
at wn.r  <anonymous>:427:736
at fn.get  <anonymous>:385:628
at new fn  <anonymous>:385:546

URL1: https://commons.m.wikimedia.org/w/load.php?lang=en&modules=jquery%2Coojs-ui-core%2Coojs-ui-widgets%7Cmobile.init%7Cskins.minerva.scripts%7Cwikibase.mediainfo.mediasearch.vue%7Cwikibase.mediainfo.search&skin=minerva&version=xd0jf

Event Timeline

Krinkle added a subscriber: Krinkle.

Apart from the top of the stack, the call path does not appear to belong to anything we host. There is no Yt or He identifier anywhere in production, including pre-mangled/minified assets.

Best I can tell, this is a browser extenson with a viewport content script injected that is traversing all objects and doing something broken with our module. It happens from an event/timeout stack and thus doesnt' affect anything else.

It doesn't seem to be related to ES6 methods or syntax from what I can tell. And at this low rate, it's probably not worth anyone's time to look into. Bolding declining for now on that basis.

Jdlrobson renamed this task from undefined is not a function when mounting in Special:MediaSearch to document.body.append is not a function / undefined is not a function when mounting in Special:MediaSearch in ES5 browsers.EditedApr 1 2021, 3:35 PM
Jdlrobson reopened this task as Open.
Jdlrobson updated the task description. (Show Details)

The stack trace comes from the minified Vue production code: resources/lib/vue/vue.common.prod.js - Yt and He both appear inside that file.

There are quite a lot of these errors today, all from ES5 browsers (> 100 in 12 hrs).
My recommendation would be to disable MediaSearch for ES5 browsers.
(note if using the client error dashboard make sure you disable the browser filter to see them as we filter ES5 browsers out by default)

Here's another example: https://logstash.wikimedia.org/app/dashboards#/doc/logstash-*/logstash-2021.04.01?id=gntFjXgBg_6mGHGhqwVq

given this is coming from Vue we may even want to consider dropping ES5 support in Vue library itself.

Change 676406 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] resources: Mark Vue as ES6-only (!)

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

Ok, I found the offending code and it's not in the Vue 2 library itself (Vue2 is good about using appendChild everywhere).

The append call lives in our MediaSearch code instead: https://gerrit.wikimedia.org/g/mediawiki/extensions/WikibaseMediaInfo/+/be9fe334a0728cb257f8e42e9a08c942a10724f7/resources/mediasearch-vue/components/base/Dialog.vue#223

We should be able to update this to appendChild without any issues in our own code. Vue2 is ES5 compatible so there is no need to add the es6: true flag to the module.

Change 676411 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/extensions/WikibaseMediaInfo@master] Use appendChild() instead of append()

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

FYI, The giveaway that this was in our component code as opposed to part of the Vue library itself was this line in the first part of the stack trace:

at module.exports.mounted

module.exports.mounted means the mounted lifecycle hook of a single-file component, which means it's part of our UI code. Vue has a handful of built-in components like Transition but almost all of this is authored by us.

Change 676406 abandoned by Jforrester:

[mediawiki/core@master] resources: Mark Vue as ES6-only (!)

Reason:

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

Change 676421 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/extensions/WikibaseMediaInfo@wmf/1.36.0-wmf.37] Use appendChild() instead of append()

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

Change 676411 merged by jenkins-bot:

[mediawiki/extensions/WikibaseMediaInfo@master] Use appendChild() instead of append()

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

Change 676421 merged by jenkins-bot:

[mediawiki/extensions/WikibaseMediaInfo@wmf/1.36.0-wmf.37] Use appendChild() instead of append()

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

Mentioned in SAL (#wikimedia-operations) [2021-04-01T18:33:24Z] <urbanecm@deploy1002> Synchronized php-1.36.0-wmf.37/extensions/WikibaseMediaInfo/resources/mediasearch-vue/components/base/Dialog.vue: e77f2b98a4fcb7d9cf74c45caeb7cfbc68a063d0: Use appendChild() instead of append() (T278448) (duration: 01m 09s)

Fix has been deployed, but I'll keep an eye on the logs for a while before closing this.

This is resolved, although there are some errors popping up in logstash related to the change (9 in the past day): Unable to get property 'appendChild' of undefined or null reference

See here.

appendChild relates to the new code. This is a new error, side-effect of the new code.

It may be a pre-existing underlying issue, that would previously have manifested in modern browsers as "append of undefined or null" (meaning, the method is fine, but the subject doesn't exist).

I've opened T279469 to track the new issue.

Etonkovidova claimed this task.