Mattermost-server: Broken page Custom Emoji

[agalisteo]

Summary

Accesing to Custom Emoji show blank page getting the error:

Uncaught (in promise) TypeError: Cannot read property 'trim' of undefined
    at o (user_utils.js:51)
    at Q (utils.jsx:1127)
    at Function.n [as mapToProps] (index.js:21)
    at r (wrapMapToProps.js:43)
    at Function.r.mapToProps (wrapMapToProps.js:52)
    at r (wrapMapToProps.js:43)
    at i (selectorFactory.js:26)
    at selectorFactory.js:74
    at Object.run (connectAdvanced.js:26)
    at i.initSelector (connectAdvanced.js:178)

Steps to reproduce

Main Menu -> Custom Emoji

Expected behavior

Custom Emoji page work, we can see the information and add new emojis

Mattermost Info

• Mattermost Version: 4.10.0
• Database Schema Version: 4.10.0
• Database: mysql

[amyblais]

Hi @agalisteo!

Thank you for reaching out.

I'm not able to repro this, can you help with the following additional information:

1. Is this a new issue after upgrading to 4.10?
2. Does this repro consistently and has there been anything that resolves the issue, e.g. refreshing the page or logging out and back in?
3. Are you seeing the issue on webapp or desktop app?

[agalisteo]

1. New issue upgrading from 4.9 to 4.10.0
2. We have tried restart the server, refresh page, clean cache, nothing works
3. Web self-hosted

[amyblais]

@agalisteo Thank you for the additional information! Here are next suggestions:

• Can you help check what the custom emoji settings are configured as: https://docs.mattermost.com/administration/config-settings.html?highlight=config%20settings#emoji?

• Would you like to test if you see the same issue on our nightly build server?

• Are there any other additional logs containing errors that you might be able to help send over?

[gravufo]

I also have the same issue and it only started happening as soon as I updated Google Chrome and Firefox to the latest version (67.0.3396.62 64-bit and 60.0.1 64-bit respectively). I can't remember what version I had before updating though.

[amyblais]

Hi @agalisteo Checking in - have you still been experiencing issues with this?

Hi @gravufo! Thank you for reporting this. Can you help with more information, e.g. your Mattermost server version, OS, device, and any logs and error messages?

[agalisteo]

Hi @amyblais , I still have the same problem.

[amyblais]

Thank you for letting me know!

Can you help with the information requested here?

[agalisteo]

• Emoji settings are enabled in my self-host mattermost

• In the nightly build server works as expected

[amyblais]

Hi @agalisteo Apologies for the delay - I will ask a colleague to take a look at the error message you posted earlier and to find out whether there is any additional information that we can help gather to troubleshoot this.

[agalisteo]

Same issue with Mattermost Version: 4.10.1

[icelander]

Unfortunately I'm still not able to replicate this on Mattermost Server version 4.10.1 and the latest version of Google Chrome. Here's a screencast of how I tested it If that's not how to replicate your problem please let me know. (A screencast would be very helpful!)

Also, can you verify that you didn't delete or alter the /opt/mattermost/data/emoji directory when you upgraded? Emoji are stored in there and the upgrade might have changed the file permissions or otherwise clobbered the directory. I tried deleting and changing the ownership of the emoji directory and individual files and that didn't cause the error either, but it might in your case.

Finally, could you post the environment information mentioned on this page so we can replicate your environment to reproduce the issue?

[ghost]

I have this too. It happens when I Ctrl+click the Custom Emoji link to load the page in a new tab. Also when I manually go to the URL. I cannot reproduce it on the nightly build server, it works fine there.

[amyblais]

Hi @M1dgard! Thank you for letting us know.

Can you help post the environment information mentioned on this page so we can better diagnose the issue you are seeing?

[ghost]

Hi @amyblais, I gathered this information:

Server OS: Devuan ascii/ceres
Mattermost version: 4.10.1-team
Browser: Firefox 60.0.1
Desktop App: not tested
Mobile App: N/A
Deployment: the binary supervised with Runit (no Docker or stuff)
DB: PostgreSQL 9.6.7
Disk: 803GB available

Mattermost log excerpts; Mattermost websocket config; Nginx configuration; Nginx log excerpts

Thanks for looking into this! :)

[ghost]

Here's a screen recording of the issue (zipped because GitHub doesn't allow mkv attachments):
github-8844-custom-emoji-blank-page.mkv.zip

[ghost]

And here's the JavaScript stack trace that's visible in the video:
github-8844-custom-emoji-blank-page.js.log

[amyblais]

Hi @M1dgard! Thank you for the additional information. Letting you know that I have asked a colleague to help take a look at the files that you have sent over.

[hmhealey]

It looks like this is the problem line in the code, so it appears that some user has a null username or full name somehow, but the user object itself exists. Has anyone affected by this modified their database directly? That's the only thing I could think of that would cause this.

I would note that this should be fixed in 5.0 once that is fully released because there's now an additional null check there

[agalisteo]

Hi @hmhealey, in our case, we don't modify the database directly.

[gravufo]

We don't modify our DB either. In my case it wasn't happening even with the latest MM update. I only heard about it from one of our users that had the latest version of Chrome and it only started happening to me when I updated Firefox to the latest version. So maybe something on the client side is breaking the data being sent to the server?

[ghost]

Has anyone affected by this modified their database directly?

I have, but

mattermost=# SELECT username FROM emoji FULL JOIN users ON emoji.creatorid=users.id
             WHERE username='' OR username IS NULL;
 username 
----------
(0 rows)

and my display is set to "show username".

[hmhealey]

Okay, that's what I expected from everyone since I imagine that would break much more than just that page.

I've actually been looking into this a bit more, and I've found the cause. If you don't already have the user who created an emoji loaded, then the EmojiListItem component creates an empty user object which it then passes into getDisplayNameForUser where it eventually crashes because it tries to trim the user's non-existent username. It looks like the missing user is eventually loaded which will fix the list, but by that point React has given up on rendering because of the error.

As I mentioned in an earlier comment, there's an extra null check added in 5.0 that will catch that and prevent the error, but in the meantime, the only workaround I can see would be to force the app to load the user manually before going to that page. That could be done by viewing the user or a post made by them somewhere else in the UI

[agalisteo]

Solved with Mattermost 5.0!

[hmhealey]

Awesome, glad to hear that. I'll close this issue now, but feel free to reopen it if the problem resurfaces.