Page MenuHomePhabricator

[XS] Quickview error: this.$refs.aside is undefined
Closed, ResolvedPublicBUG REPORT

Description

List of steps to reproduce (step by step, including full links if applicable):

  • Using the mobile skin, click an image or video result to trigger the quickview
  • The JS console will show the following error: TypeError: this.$refs.aside is undefined

What happens?:
No user-facing error actually happens but we should fix this so it doesn't clutter the logs.
This error only happens in the mobile view.

What should have happened instead?:
User should be able to open/close the quickview in both desktop and mobile skins without any errors.

Notes:

  • there are numerous errors, >1,000 (wmf.15)
normalized_message
Cannot read property 'scrollIntoView' of undefined
exception.trace
$schema
/mediawiki/client/error/1.0.0
@timestamp Jul 21, 2021 @ 22:54:12.740
@version 1
_id  djJGy3oBmhjHfZRTzTmj
_index logstash-2021.07.21
_score - 
_type
_doc
error_class TypeError
file_url https://commons.m.wikimedia.org/w/load.php?lang=en&modules=jquery%2Cmediasearch&skin=minerva&version=sj2da
http.request_headers.user-agent
Mozilla/5.0 (Linux; U; Android 6.0.1; en-us; Nexus 4 Build/JOP24G) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Chrome/47.0.2526.27 Mobile Safari/534.30
level ERROR
message Cannot read property 'scrollIntoView' of undefined
	
meta.domain
commons.m.wikimedia.org
	
meta.dt
2021-07-21T22:54:11.678Z
	
meta.id
c1786b6a-0b05-4627-946e-346d95708076
	
meta.request_id
3f9a1358-6628-4f99-ae1b-715011c6b166
	
meta.stream
mediawiki.client.error
	
normalized_message
Cannot read property 'scrollIntoView' of undefined
	
stack_trace
at a.<anonymous>  https://commons.m.wikimedia.org/w/load.php?lang=en&modules=jquery%2Cmediasearch&skin=minerva&version=sj2da:212:473
at Array.<anonymous>  <anonymous>:210:313
at qe  <anonymous>:209:714
	
tags
input-kafka-clienterror-codfw, kafka, es, es, throttle-exempt, normalized_message_untrimmed
	
type
clienterror
	
url
https://commons.m.wikimedia.org/wiki/Special:MediaSearch?search=%D8%B3%D9%83%D8%B3&title=Special:MediaSearch&type=image

Event Timeline

This (minor/silent) error has a simple cause – the showDetails method in SearchResults.vue (which gets called every time the user clicks an image or video thumbnail in the search results) includes code to ensure that the sidebar Quickview panel is scrolled into view properly (it's possible the quickview element will be taller than the current viewport, and we want the user to always see the top of it when it first expands).

The problem is, the sidebar (<aside> element) only exists in desktop view, not in mobile. So we need to check for the appropriate $ref before trying to programmatically scroll it into view.

Will upload a patch for this shortly.

Change 704577 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[mediawiki/extensions/MediaSearch@master] Quickview: don't use "aside" $ref on mobile skin

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

egardner renamed this task from Quickview error: this.$refs.aside is undefined to [XS] Quickview error: this.$refs.aside is undefined.Jul 14 2021, 5:20 PM

Change 704577 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] SearchResults: don't call on "aside" ref when it doesn't exist

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

There are still errors: undefined is not an object (evaluating 'this.$refs.aside.scrollIntoView') on Special:MediaSearch dashboard, the latest timestamp =Jul 29, 2021 @ 00:33:34.057

exception.trace
$schema /mediawiki/client/error/1.0.0
@timestamp Jul 29, 2021 @ 00:33:34.057
@version 1
_id TqSu73oBmhjHfZRTUCkA
_index logstash-2021.07.29
_score - 
_type
_doc
error_class TypeError
file_url https://commons.m.wikimedia.org/w/load.php?lang=en&modules=jquery%2Cmediasearch&skin=minerva&version=sj2da
http.request_headers.user-agent
Mozilla/5.0 (iPhone; CPU iPhone OS 13_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Mobile/15E148 Safari/604.1
level ERROR
message undefined is not an object (evaluating 'this.$refs.aside.scrollIntoView')
meta.domain commons.m.wikimedia.org
meta.dt 2021-07-29T00:33:32.995Z
meta.id 0d63b43b-df1e-4887-ac2e-c24b59a70fc2
meta.request_id df3ebee2-e4af-48e7-adcc-d797ab9293c2
meta.stream
mediawiki.client.error
normalized_message undefined is not an object (evaluating 'this.$refs.aside.scrollIntoView')
stack_trace
at https://commons.m.wikimedia.org/w/load.php?lang=en&modules=jquery%2Cmediasearch&skin=minerva&version=sj2da:212:472
at https://commons.m.wikimedia.org/w/index.php?search=speed&title=Special:MediaSearch&type=video&haslicense=unrestricted:210:317
at qe https://commons.m.wikimedia.org/w/index.php?search=speed&title=Special:MediaSearch&type=video&haslicense=unrestricted:209:714
tags input-kafka-clienterror-codfw, kafka, es, es, throttle-exempt, normalized_message_untrimmed
type clienterror
url https://commons.m.wikimedia.org/wiki/Special:MediaSearch?search=fire&title=Special:MediaSearch&type=video&haslicense=unrestricted

There are also similar (identical?) error reports:
normalized_message Cannot read property 'scrollIntoView' of undefined

ping @egardner I checked again - the last timestamp:

@timestamp Jul 29, 2021 @ 19:53:16.412

Re-checked:
logstash error: Cannot read property 'scrollIntoView' of undefined - the last timestamp -Aug 3, 2021 @ 05:38:26.102. All errors (total count - 9) for the last 24 hours) are coming from mobile.

logstash error:undefined is not an object (evaluating 'this.$refs.aside.scrollIntoView') - the last timestamp - Aug 2, 2021 @ 23:26 All errors (total count - 6) for the last 24 hours are coming from mobile.

Checked commons wmf.18 - after deployment wmf.18, the error is not present.