Username selection dropdown in chat freezes intermittently

[shanaqui]

Benjamin, the Avid Reader @loverofbooks (fc6bd8d5-94a2-462b-ac7f-9b03bc446d45): "Hey, I've been having frequent problems with the mention autocompletion on the website. I start typing someone's username and the autocomplete dropdown freezes. Once it's frozen, the return key and the up and down arrows don't work and the navigation won't go away.

There are errors in the developer console, they're just so vague that I can't figure out which ones are relevant."

I triggered this myself, and I'm not entirely sure how -- possibly because I typed most of the username myself? I think that's what I did. I grabbed the console errors at the time, though I hadn't cleared it first so there may be irrelevant errors. Pastebin of the errors: https://pastebin.com/LMmU2pLB

[paglias]

The relevant error seems to be

r.default.config.errorHandler @ app.4d3ee2bf.js:1
app.4d3ee2bf.js:1 Error: TypeError: Cannot read property 'key' of undefined
    at Ei (chunk-vendors.62e710bc.js:7)
    at C (chunk-vendors.62e710bc.js:7)
    at P (chunk-vendors.62e710bc.js:7)
    at a.__patch__ (chunk-vendors.62e710bc.js:7)
    at a.In.t._update (chunk-vendors.62e710bc.js:7)
    at a.r (chunk-vendors.62e710bc.js:7)
    at nr.get (chunk-vendors.62e710bc.js:7)
    at nr.run (chunk-vendors.62e710bc.js:7)
    at Kn (chunk-vendors.62e710bc.js:7)
    at Array.<anonymous> (chunk-vendors.62e710bc.js:7)
r.default.config.errorHandler @ app.4d3ee2bf.js:1

but it doesn't show the correct location in the source map...

[benjaminbhollon]

It just froze again for me, and the error @paglias reference is also present.

These two errors occurred right after that one, so they were probably also caused by it:

[citrusella]

I just had what seems like this happen without the dropdown freezing by pasting something immediately after an @ (thereby telling the dropdown to go away). I couldn't press enter, anyway. Might just be a separate but related bug (i.e. mention dropdown keeps enter (and up/down?) key from being pressed if it's not specifically/directly dismissed via interacting with it), since I didn't get an error in the console for that particular thing.

(In this case, though, doing a second @ and selecting something from the new dropdown restored functionality. Dunno if that workaround would work for the original bug because I've only had that bug happen once (and when it didn't happen again I'd chalked it up to my browser being weird since my computer's been growing more and more unhealthy).)

[paglias]

Which browser are you using?

It would be extremely useful if we can identify a pattern to replicate it, otherwise if you could open the console when the issue appears, click on the app.xxxxxx.js link next to the error and take a screenshot of what appears

Thanks!

[citrusella]

At the time with the not-quite-identical/might-only-be-tangentially-related one I was on SlimBrowser (Gecko (Firefox) based, was playing around with it and have actually just uninstalled it), but I just reproduced that one just now on Vivaldi (by typing @ and then pasting something immediately after it (anything that makes it get rid of the dropdown (so, like, anything other than a full or partial username on its own)). Neither of those produce an error.

I was on Vivaldi when the actual freeze one described in the OP happened the one time as well but because I thought it was something on my end causing it, I didn't even think to open the console. (But would if it reoccurred. It just hasn't for me.)

[Alys]

_Another report of this by @AcornSprout (2a5618da-d8c4-4530-a943-3fa871ef4859) referring to a post attempted in the Report a Bug guild (I'll ask for console log data if it happens again):

"when I started typing "@Alys" the name pop-up appeared, but the highlighting didn't work. I couldn't navigate on it, and nothing would get rid of it short of refreshing the page. Even using the sync button didn't work. FTR this is with Firefox 77.0.1 (64-bit) on Windows 10 Home v. 10.0.17763

Interesting: I just tested again. The pop-up DOES work in the middle or end of a paragraph, but does not work at the beginning of any line, whether at the beginning or end of the document or between paragraphs.

Ooh! And yet more interestingness: After typing the last paragraph I was unable to type anything further without (carefully copying and then) refreshing."

[benjaminbhollon]

If it helps, I've found it to happen more often in smaller guilds, especially when I'm trying to type the name of someone not in the guild (happens a lot in the private guild I use to communicate with my guild's officers)

[Alys]

_Here's some more details from @AcornSprout (2a5618da-d8c4-4530-a943-3fa871ef4859):

"Here's what was in my JS log:

--the above was cut-and-pasted because that page's screen froze* after the names pop-up appeared---

• Actually, no, the text box isn't completely frozen. I can delete and add text, but can not add carriage returns, although I can delete them.

Ooh! Am I lucky, or what? bats eyes innocently As I typed your name again I got the persistent pop-up again (though it was below the textbox so I didn't notice it right away). I initially had used the @ before your name, realized I'd already done so in this message and so didn't need to use it again, and deleted the @. The additional bit of javascript is:

NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIHangReport.terminateScript] ProcessHangMonitor.jsm:156 [Exception... "Favicon at "https://i.snipboard.io/favicon.ico" failed to load: Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no] FaviconLoader.jsm:227:22 onStopRequest resource:///modules/FaviconLoader.jsm:227 "

[paglias]

The errors @Acorn_Sprout has all seem to come from extensions not from Habitica code, the ones posted here seems more promising.

Without being able to reproduce it's not possible to see exactly where this is happening but looking online it could be a Vue issue with duplicate keys or some missing data around here https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/chat/autoComplete.vue with the result from this function https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/chat/autoComplete.vue

[paglias]

Regarding

Actually, no, the text box isn't completely frozen. I can delete and add text, but can not add carriage returns, although I can delete them.

Looks like if you type @ + something and the autocomplete does not show any username the carriage return doesn't work until you press the spacebar so the (invisible) autocomplete is removed

[citrusella]

This is a case of maybe the same bug or perhaps a different one, but I was typing a message with an @ near the front and some @ s at the end and decided to revise the first @ while the one at the end was sitting with nothing after it... the autocomplete worked and replaced both @ signs with the same user, then I went to add the name I wanted to the final @ and then it froze.

Possibly-relevant errors:

Unhandled error in Vue.js code. logging.js:30:12
    errorHandler logging.js:30
    VueJS 4
    it es.promise.js:114
    r microtask.js:26
Error: TypeError: "t is undefined"
    VueJS 11
    it es.promise.js:114
    r microtask.js:26
logging.js:31:12
Component where it occurred: undefined logging.js:32:12
    errorHandler logging.js:32
    VueJS 4
    it es.promise.js:114
    r microtask.js:26
Info: nextTick logging.js:33:12
    errorHandler logging.js:33
    VueJS 4
    it es.promise.js:114
    r microtask.js:26

[Alys]

@Nakonana (33bb14bd-814d-40cb-98a4-7b76a752761c) has reported a bug that I think is an instance of this issue:

"I have encountered a floating, not disappearing User selection drop down menu (console text if that's of any help). Happened on Firefox 78.0.2 and Win10 :>

"What I did: copy pasted the username into the empty text box. Went to the beginning of the line and Shift+ENTERed twice. Then went to the first line to start typing the message. The drop down menu disappears after clicking a space behind the user name."

[shanaqui]

I'm not sure if this is the same issue, but it can be split if others don't agree. From Nakonana:

I've got a new bug (or the @mentions bug evolved xD)

When typing @ and then adding a q / Q or y / Y or z / Z the pop-up with username suggestions appears but I can't click on the usernames. If I now manually complete the username or copy-paste it from somewhere, the pop-up does not disappear, but I can type my message as usual. Now, if I click "send" it looks like nothing happens and the message is not being sent. If I delete the message in the textbox, the username-suggestion pop-up still persists. (Actually it looks like the whole tab freezes: I can't return to the previous page. The address bar indicates that I'm going back but my screen doesn't change.

Upon reloading the page, it turns out the message actually got sent <.<.

Reproducing this bug in my private guild didn't work as there's no one whose username starts with one of the mentioned letters. Reproducing it another guild where there is someone with one of the letters didn't work either xD. So, basically, I can reproduce it in the Cove in different browser tabs and after reloading the tabs several times and going to other guilds within those tabs but I can't reproduce it in the 3-4 other places I tried :'D. Maybe it only occurs if the person with the Q-name is at the top of the username-suggestion pop-up...? But it also worked with y and z in the Cove...? (and is still reproduceable for me <.<)

Screenshot, Console Text when clicking "Send", Windows 10, Firefox 81.0.1 (64-Bit), using the Shrink Your Habitica Tasks extension.

And also:

I can offer more screenshot: one and two. And more clicking around in the console xD.

I also tried using Chrome with the current account and a different account and got the same/similar results: screenshot and console

I haven't tried reproducing yet.

[shanaqui]

I'm not sure if this is added anywhere in this thread, but once this is triggered everything freezes. Nothing is clickable, hoverable elements don't go away... I have to refresh to unfreeze everything. The screenshot is from delta, but it happens in production as well. It keeps triggering for me when I type Ceran's name...

[Nakonana]

@shanaqui just out of curiosity: was Ceran's post the most recent one/one of the most recent ones/the most recent one by a Tier 7 contributor in that guild...? And did you try other letters to reproduce?

The freezing sounds similar to what happened in my case (see your post above from Oct. 9).

The bug in the Pirate Cove stopped happening for me after another high tier (8) contributor had posted. And it happened again sometime later when Quartzfox posted and that post was (at that time) (one of) the recent messages in the Pirate Cove.

---

From Oct 9:

screenshot Firefox

screenshot chrome

[paglias]

I've been able to reproduce it now, the error is in Vue's core so not super clear what the reason it but I'm giving it a look

[paglias]

Tried a fix on delta but it's not working, I'd be curious to know if @Nakonana idea is actually the reason

[benjaminbhollon]

Might be, but the bug also happens for me in a private guild where I'm the only contributor (Tier 3)

[citrusella]

So, I hadn't thought of reporting this the first time lately since I know it's already logged and the behavior hasn't changed, but I've been getting this a LOT in the Tavern the past few days. Like, 4 or 5 different instances, excluding me specifically trying to trigger it one of the first times I watched it happening. I just felt like writing that here because of the frequency kicking up suddenly like that.

[Alys]

I'm changing this from help wanted to in progress because @paglias has posted above about working on it.

Just in case it helps, we've seen a few more reports of this than usual lately (production site, not delta). For example from @minervathene (d3de6635-37f7-4369-99c3-399d036d0898):

"Wondering if this is a bug, or just me, but I'm having semi-regular issues with the functionality that populates the user name when you start typing. Sometimes it just doesn't work - no suggested text - but other times it pops up the list of suggestions in an unusable format that then gets 'stuck' on the screen. My typing underneath might or might not work. And then other times it works perfectly! .... I'm using the latest version of Chrome on a Window 10 laptop."

[paglias]

I’m sorry but I won’t be able to work on this

Il giorno mar 2 feb 2021 alle 23:49 Alys notifications@github.com ha scritto:

I'm changing this from help wanted to in progress because @paglias https://github.com/paglias has posted above about working on it.

Just in case it helps, we've seen a few more reports of this than usual lately (production site, not delta). For example from @minervathene (d3de6635-37f7-4369-99c3-399d036d0898):

"Wondering if this is a bug, or just me, but I'm having semi-regular issues with the functionality that populates the user name when you start typing. Sometimes it just doesn't work - no suggested text - but other times it pops up the list of suggestions in an unusable format that then gets 'stuck' on the screen. My typing underneath might or might not work. And then other times it works perfectly!"

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/HabitRPG/habitica/issues/11516#issuecomment-772067612, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEQAV6DXYRMLA6BIP4HH4DS5B6QJANCNFSM4JJC5KYQ .

-- Matteo Pagliazzi - matteopagliazzi.com

[Alys]

Ah, no worries. I've changed it back to help wanted.

[Alys]

@Nakonana and I both experienced this bug in a private guild (https://habitica.com/groups/guild/1f8e73a5-b212-44ea-8176-c2e05c52e0d7 ) when typing @c in an attempt to tag @cTheDragons We attempted this about 33 hours apart from each other so it wasn't a temporary bug. The website needed a reload to make the chat input box perform correctly again (at least for me; I didn't trouble Nakonana to give details since I'd reproduced the bug).

Below are the console messages from my browser (Firefox 85.0.1 on Ubuntu 20.04) which appeared as soon as I'd type @c at the start of a new post.

Note this: Error: TypeError: t is undefined I have no idea if the "t" is referring to the second letter in the name we were trying to type or if that's just a coincidence.

Unhandled error in Vue.js code. logging.js:30:12
    errorHandler logging.js:30
    VueJS 11
        re
        ee
        pe
        ue
        (Async: promise callback)
    oe
        pe
        tr
        update
        notify
        set
        set
    input chat.vue:1
    VueJS 3
        ne
        n
        _wrapper

Error: TypeError: t is undefined
    VueJS 18
        Pi
        C
        T
        Di
        _update
        r
        get
        run
        Zn
        pe
        ue
        promise callback*oe
        pe
        tr
        update
        notify
        set
        set
    input chat.vue:1
    VueJS 3
        ne
        n
        _wrapper
logging.js:31:12
    errorHandler logging.js:31
    VueJS 11
        re
        ee
        pe
        ue
        (Async: promise callback)
    oe
        pe
        tr
        update
        notify
        set
        set
    input chat.vue:1
    VueJS 3
        ne
        n
        _wrapper

Component where it occurred: undefined logging.js:32:12
    errorHandler logging.js:32
    VueJS 11
        re
        ee
        pe
        ue
        (Async: promise callback)
    oe
        pe
        tr
        update
        notify
        set
        set
    input chat.vue:1
    VueJS 3
        ne
        n
        _wrapper

Info: nextTick logging.js:33:12
    errorHandler logging.js:33
    VueJS 11
        re
        ee
        pe
        ue
        (Async: promise callback)
    oe
        pe
        tr
        update
        notify
        set
        set
    input chat.vue:1
    VueJS 3
        ne
        n
        _wrapper

[benjaminbhollon]

t is undefined would generally refer to a variable (so probably a coincidence), though I don't know which one because I haven't looked at the specific code it's referring to, and given the short variable name it's probably minimized/obfuscated Vue code. TypeError probably means you were expecting it to have a value that was a string or int or something and called a type-specific method/function on it... Eh. I honestly don't know without looking closer.

That being said, I don't have much on hand at the moment so I'd be willing to try diving into the code and taking a closer look. Note I'm not claiming the issue, I'm just offering to try to do an in-depth analysis of where the problem's coming from.

[Alys]

@benjaminbhollon It would be awesome if you'd try to analyse this - thank you! Good luck!

[benjaminbhollon]

Thanks, I'll get to work! Setting up a local environment now. I'll let y'all know if any insights crop up.

To be clear-- I've been working a lot in most of these technologies recently, but a couple, like Vue, are pretty new to me, so I might be able to find a problem but not suggest how to fix it.

[citrusella]

t is definitely not referring to the typed letter. I've gotten that error on instances where I haven't typed "t"--I think it's just always what this bug brings up?

[thewilloftheshadow]

I don’t work on the frontend, just the API, but wouldn't t be referring to the i18n object with the translation strings?

[benjaminbhollon]

Haven't been able to do anything yet-- I keep getting an error when running npm run client:dev that the Javascript Heap is running out of memory. Have people encountered that before?

[thewilloftheshadow]

@benjaminbhollon There's a part about that in the Habitica Wiki for setting up on Linux, that for instructions might help you https://habitica.fandom.com/wiki/Setting_up_Habitica_Locally_on_Linux#Set_Up_a_Swap_File

[benjaminbhollon]

@thewilloftheshadow I'm on Windows though; does that still apply? Thanks for your help

[thewilloftheshadow]

@benjaminbhollon ahh i see. Would it be the same problem they were talking about in #12525?

@Alys Would it be appropriate to open a new issue specifically for this out of memory problem on windows?

[benjaminbhollon]

Yep that's the exact error I'm getting. A new issue might be good.

[benjaminbhollon]

Yeah I haven't been able to get my local install working. I'll try again when I have more time. Sorry about that.