UI freezes when entering 1000+ posts threads

Troubleshooting
1

Hello :wave:
We experiencing freezes on UI when opening big threads with 1000+ messages.

We use MM for almost every thing in the company. And we have some threads where our CI and other bots post their messages, usually containing links to the event, like gitlab pipeline, grafana link etc. Time goes by and now some of these threads contains about 2000 posts. When user clicks on them, page freezes for seconds or minutes. Our users now using 3-5 Chrome tabs to navigate the MM :smiley:

Mattermost Version: 10.2.0
Database Schema Version: 127
Build Number: 11561493190
Database: postgres

Config is pretty default except increased pid_limit.

services:
  postgres:
    image: postgres:${POSTGRES_IMAGE_TAG}
    restart: ${RESTART_POLICY}
    ports:
      - ${POSTGRES_PORT}:5432
    security_opt:
      - no-new-privileges:true
    pids_limit: 500
    read_only: true
    tmpfs:
      - /tmp
      - /var/run/postgresql
    volumes:
      - ${POSTGRES_DATA_PATH}:/var/lib/postgresql/data
    environment:
      - TZ
      - POSTGRES_USER
      - POSTGRES_PASSWORD
      - POSTGRES_DB

  mattermost:
    depends_on:
      - postgres
    image: mattermost/${MATTERMOST_IMAGE}:${MATTERMOST_IMAGE_TAG}
    deploy:
      resources:
        limits:
          memory: 5G
    restart: ${RESTART_POLICY}
    security_opt:
      - no-new-privileges:true
    pids_limit: 500
    read_only: ${MATTERMOST_CONTAINER_READONLY}
    tmpfs:
      - /tmp
    ports:
      - ${APP_PORT}:8065
      - ${CALLS_PORT}:8443/udp
      - ${METRICS_PORT}:8067
    volumes:
      - ${MATTERMOST_CONFIG_PATH}:/mattermost/config:rw
      - ${MATTERMOST_DATA_PATH}:/mattermost/data:rw
      - ${MATTERMOST_LOGS_PATH}:/mattermost/logs:rw
      - ${MATTERMOST_PLUGINS_PATH}:/mattermost/plugins:rw
      - ${MATTERMOST_CLIENT_PLUGINS_PATH}:/mattermost/client/plugins:rw
      - ${MATTERMOST_BLEVE_INDEXES_PATH}:/mattermost/bleve-indexes:rw
    environment:
      - TZ
      - MM_SQLSETTINGS_DRIVERNAME
      - MM_SQLSETTINGS_DATASOURCE
      - MM_BLEVESETTINGS_INDEXDIR
      - MM_SERVICESETTINGS_SITEURL

Any help appreciated :relieved:

1 Like
2

Hello @deathjoin -

I want confirm first whether it’s a client side problem, or a server side problem. When you say “UI freezes”, does it mean that the response comes from the server, and then the UI freezes, or the UI freezes before the response comes from the server?

If you could open the Chrome developer tools, and click on the network tab, and then open such a long thread and capture a screen recording of the entire thing, that would be very useful for me.

If you have sensitive data, please feel free to DM me on https://community.mattermost.com, or just simply reply on this thread if it’s not.

1 Like
3

Hello @agnivade

I think it is on the client side. It is going like my whole tab is stopped, no requests, no response to clicks.
I’ve made a video and blurred the chat content but you can see what’s going on. Things started going slow at 0:20, and freeze about 0:32 lasting 20 secs :cry:

It’s recorded on Macbook with M3 Pro, restarted few hours before.

Thanks!

4

Thanks for sharing the video @deathjoin. That was insightful!

To debug this further, it would be good if you could capture a performance profile as well.

So, please do the same thing as before, but this time, click on the 3 dot menu on the top right of the developer console → More tools → Performance monitor. And then tick mark CPU Usage, JS heap size, DOM nodes, JS event listeners.

After this, please do the same thing as before. Click around threads and scroll up and down and capture the issue and share the video.

This will help us isolate where the freeze is coming from.

1 Like
5

The UI freeze you’re experiencing with large threads containing 1000+ messages in Mattermost is likely due to the rendering and loading of a large number of messages at once. Here are some possible solutions:

  1. Pagination or Lazy Loading: Implement pagination or lazy loading to load a limited number of messages at a time, rather than all 2000 messages. This can significantly improve performance.

  2. Database Indexing: Ensure that your PostgreSQL database has proper indexes on the necessary tables (e.g., Posts, Channels). This can speed up query performance when loading messages.

  3. Caching: Enable caching for frequently accessed data to reduce the load on your database and speed up the page rendering.

  4. Mattermost Configuration: Adjust the Posts per Page setting in the Mattermost configuration to limit the number of posts loaded initially. This reduces the amount of data transferred.

  5. Client-Side Performance: Ensure that the browser and Mattermost client are optimized for large message handling. Reducing unnecessary DOM manipulations and improving how messages are rendered can help.

  6. Service Scaling: Consider scaling up your Mattermost service by adding more resources (CPU/memory) or distributing the load across multiple instances if the issue persists during high-traffic periods.

These changes should help mitigate the freezes and improve the user experience in threads with a high number of messages.

6

Kindly avoid using AI generated responses blindly.

2 Likes