Page MenuHomePhabricator

TypeError: document.querySelectorAll(...).forEach is not a function
Closed, ResolvedPublicBUG REPORT

Description

On 6th January, French Wikipedia started reporting the above error.
This is occurring predominately on Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.112 Safari/537.36 a browser which should have forEach support but doesn't have forEach support for NodeList API: forEach so I suspect that's to blame.

Given where this error is occurring I am pretty sure this relates to the sticky header deploy.
Possibly the line

userMenuStickyElementsWithIds.forEach( makeNodeTrackable );

Screen Shot 2022-01-10 at 11.22.30 AM.png (330×2 px, 70 KB)

Developer notes

Unable to replicate on browser stack using Windows 7 Chrome 49 due to an issue with browser stack date time.

Not able to replicate on browser stack using Windows 10/11 Chrome 49

Event Timeline

@Catrope @Krinkle, for ES6 modules/grade A experience do we test for browser support for NodeList.prototype.forEach ?
If not, do you think we should?

This is currently high priority given the volume of 13,284 a day (possibly even unbreak now). It blocks further roll out of the feature.

I can replicate this on browser stack Windows 7 Chrome 42 with the following steps:

  • Log in
  • Click preferences
  • See error.

(confirms my suspicion about the above line)

Change 752731 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Fix TypeError: document.querySelectorAll(...).forEach is not a function

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

Change 752731 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix TypeError: document.querySelectorAll(...).forEach is not a function

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

Change 752741 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Fix StickyHeader TypeError: document.querySelectorAll(...).forEach is not a function

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

Can be QAed via logstash on Thursday 17th.

Change 752766 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@wmf/1.38.0-wmf.16] Fix TypeError: document.querySelectorAll(...).forEach is not a function

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

Change 752741 abandoned by Nray:

[mediawiki/skins/Vector@master] Fix StickyHeader TypeError: document.querySelectorAll(...).forEach is not a function

Reason:

Not needed

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

Change 752766 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.38.0-wmf.16] Fix TypeError: document.querySelectorAll(...).forEach is not a function

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

Mentioned in SAL (#wikimedia-operations) [2022-01-11T00:24:29Z] <urbanecm@deploy1002> Synchronized php-1.38.0-wmf.16/skins/Vector/resources/skins.vector.js/dropdownMenus.js: 79b33f2: Fix TypeError: document.querySelectorAll(...).forEach is not a function (T298910) (duration: 00m 59s)

Jdlrobson claimed this task.
Jdlrobson moved this task from Untriaged to Jan 2022 on the Wikimedia-production-error board.

Screen Shot 2022-01-10 at 6.09.10 PM.png (1×2 px, 356 KB)

Seeing a clear drop.

@Catrope @Krinkle, for ES6 modules/grade A experience do we test for browser support for NodeList.prototype.forEach ?
If not, do you think we should?

Not explicitly, no. Here's what we check for:

  • Native promise support (Promise is a function, and Promise.prototype.finally exists)
  • RegExp.prototype.flags exists
  • Non-BMP variable names work (var 𐋀; executes without a parse error, where 𐋀 is U+102C0 CARIAN LETTER G)

The logic here is that native promise support is a pretty good proxy for the ES6 support we need, except that a few browsers support promises but not most of the other ES6 features. The other two checks serve to filter out those browsers (Edge 17 and 18 fail the RegExp check, Safari and iOS below 14 fail the non-BMP variable names check, and Android 4.4.4 and below fail both).

Looking at caniuse for NodeList forEach, it seems to me that all browsers that pass these checks also support NodeList forEach, so I don't think it's necessary to add a check for it.

Looking at caniuse for NodeList forEach, it seems to me that all browsers that pass these checks also support NodeList forEach, so I don't think it's necessary to add a check for it.

Evidently, Chrome/49 doesn't pass these checks given the existence of this error.

So I think we should test for this too.

I believe Chrome 49 should have failed the test, because we check for Promise.prototype.finally, which caniuse says is available from Chrome 63: https://caniuse.com/promise-finally .

Evidently, Chrome/49 doesn't pass these checks given the existence of this error.

Are we sure that Chrome 49 executed ES6 code here? The patch that was merged for this bug addressed a forEach call in ES5 code.

Are we sure that Chrome 49 executed ES6 code here

Sorry for the confusion here. No it was ES5 code that triggered the error. I'm requesting we drop it from grade A support. Maybe we should continue this conversation over at T298911 which will probably be less confusing.