Share Filter List Crashes UI with letter A then T

[cordeosdev]

Ok, its next to impossible to tell if this an API issue or JS front side extension issue, but...

We have been struggling with a strange UI crash for some time. The share password popup crashes the interface when you type the characters "a" then "t" in succession.

We have lots of use groups and some of them are "ATB Users..." etc. When we go to share a password and start typing in the filter box "a" then "t" the UI immediately flips to an all blank solid background color and stops there. To recover you need to refresh the browser a couple of times and the interface comes back to the password list showing before you clicked 'Share'.

The "a" then "t" is the ONLY combination which seems to cause this. We have tried every other pattern.

This issue is happening across different computers, different users, different browsers. We have also confirmed this happens across our three different PASSBOLT installation including versions (api and ext) 3.1, 3.4 and we just upgraded one installation to 3.73 and the same issue occurs.

For reference, all three PASSBOLT installations were completed separately - but all share the same underlying platform (CentOS7, MariaDB 10.4, PHP7.3/7.4 with APACHE).

[garrettboone]

I have seen something similar in a different app where the search results exhaust the PHP alloted memory. Are you getting PHP errors on the server side? Something like Allowed memory size of {number} bytes exhausted would be the error to look for.

[cordeosdev]

Wow... thats an excellent point and something we didnt look at. Very possible, since the these "AT..." starting groups are also, coincidently, the largest number of groups, users and passwords. THANKS!! will check on that right away and report back.

[cordeosdev]

Unfortunately this doesnt seem to be the reason. All three affected systems have large amounts of memory and we already checked Apache, PHP, MariaDB and Opcache memory settings. Also, our largest groups and number of groups actually starts with "co..." and typing "c" then "o" filters normally in sharing.

Absolutely no errors are thrown on the server (httpd, php, passbolt, etc.). So must be a client-side JS hiccup.

I guess nobody else is seeing this issue? If so, must be our isolated "data" issue where one of the "at..." named groups has an overly long string length, illegal string character or something else which makes the JS puke when it attempts to filter on "a, t".

Will have to endure being careful to type only "a" then scroll down the 30+ groups starting with A to select the right one.

Passbolt cake healthcheck and cake datachecks all pass 100%. Testing reference version is CentOS7.9, Apache, MariaDB 10.4, PHP 7.4, Passbolt 3.7.3/3.7.3 *composer up to date and all packages updated Same issue with PHP7.3 Passbolt 3.1 and 3.4 installation (but same base OS config and similar databases seeds).

[garrettboone]

The forum can help if it's not a bug, but getting more info from the extension logs will help determine this. https://community.passbolt.com/t/user-is-unable-to-fetch-the-passwords/4903/8?u=garrett this post has debug instructions. Maybe you can find errors on the client side with these steps.

[AnatomicJC]

Garrett is right, if the UI is crashing, you should get informations in the browser extension debug logs. Please have a look at the link above about how to get them. Additionaly, you can find also more logs on passbolt cakephp log files server side, located on /var/www/passbolt/logs/error.log.

Cheers,

[cordeosdev]

Ok, we have scoured the servers up-down-around everywhere. Nothing at all on the server side shows up out of the ordinary. This would make sense because the glitch is almost instantaneous when you hit "t" after "a". This really looks like problem with the extension. Client side (extension debugging) reveals this exception thrown as soon as we tap the letter "t" after "a" in a sharing filter.

TypeError: this.state.autocompleteItems.map is not a function

data/js/dist/app.js:2 (anonymous function) data/js/dist/app.js:2 (handleAutocompleteChange) (self.dataChunkLoadingGlobal=self.dataChunkLoadingGlobal||[]).push([[216],{70597:(e,t,n)=>

[garrettboone]

This is very helpful, thank you.

https://github.com/passbolt/passbolt_styleguide/blob/1ce2f2cd889863b92cf96f659b35e8839f8b7032/src/react-extension/components/Common/Autocomplete/Autocomplete.js#L207

This might be the related line, and possibly should be this.props.autocompleteItems.map instead. But I still wouldn't understand why a specific letter combination would matter. Will be interesting to see what the team finds.

For the groups that start with AT, is there anything else peculiar about their names? Do they have non-text characters in them?

[cordeosdev]

we have dozens of group names with start with AT: ATB, Athena, Attix, Atlas... i guess its possible one of those somehow accidently has a Japanese or other odd character code stuck inside... but it doesnt show anywhere else Passbolt as as a text issue - AND, if you type the second and third characters to search, like 'tb', 'th', 'tt', 'tl', etc all the related/matching groups show up normally in the filter list.

[garrettboone]

I am able to reproduce it.

I created three new groups named like yours, and went to share a password with the first group and got the bug.

Additional: if I type atb quickly it's fine. when I backspace the b it hits the bug.

Additional2: it bugs even with one group having "at".

Additional3: It's in the console, and no errors seen in remote debugging of the extensions. Console debugging shows the final function of render with a formatted line of code (which displays the map function normally):

          }, a.createElement('ul', null, this.state.processing && a.createElement(Pe, null), !this.state.processing && (!this.state.autocompleteItems || !this.state.autocompleteItems.length) && a.createElement(Te, null), !this.state.processing && this.state.autocompleteItems && this.state.autocompleteItems.map(((e, t) =>e.username ? a.createElement(Ie, {

Maybe autocompleteItems are not processing right.

TypeError: this.state.autocompleteItems.map is not a function
    render app.js:5132
    Vo vendors.js:19633
    Ho vendors.js:19622
    Vi vendors.js:21766
    Cs vendors.js:21065
    _s vendors.js:21060
    ks vendors.js:21048
    gs vendors.js:20846
    Ka vendors.js:18247
    unstable_runWithPriority vendors.js:26056
    Va vendors.js:18224
    Ka vendors.js:18243
    Wa vendors.js:18234
    cs vendors.js:20702
    enqueueSetState vendors.js:18500
    setState vendors.js:25091
    handleAutocompleteChange app.js:5058
    handleAutocompleteChange app.js:5057
    d vendors.js:3432
    setTimeout handler*69496/e.exports/< vendors.js:3421
    handleAfterNameUpdate app.js:5050
    handleInputChange app.js:5046

[garrettboone]

I also just tested with NO groups that have at and the bug occurs then as well.

Additional: I removed all groups totally, and bug occurs when there are no groups.

[cordeosdev]

@garrettboone - thanks for confirmating our sanity. This bug has been killing us for well over a year now and pretty hard to believe nobody else encountered or noticed this issue. If we find time we will try to track down the JS code.

Is there a moderator who can move this issue to BROWSER EXTENSION?
hesitant to open a duplicate issue.

[stripthis]

Hello this is to confirm we can reproduce the issue and it will be fixed in the next release. No need to move the ticket, we have it on our radar. Thanks!

[cedricalfonsi]

It was fixed with the browser extension v3.8.0

[cordeosdev]

Was this fix ever noted in any of the release notes?

[garrettboone]

Yes, in the link provided above, PB-20978

Commit: https://github.com/passbolt/passbolt_styleguide/commit/c7ca1019c5c7de77b32f08fcd790b15b28f784e6