bug: sending the very first message breaks virtualized list

[teimurjan]

Describe the bug

When I try to send the very first message using VirtualizedMessageList, I receive an error TypeError: Cannot read properties of undefined (reading 'id').

After a small investigation, I found out that the error is happening here. I've added the following logs before the return:

        console.log(index, numItemsPrepended)
        console.log(calculateItemIndex(index, numItemsPrepended))
        console.log(JSON.stringify(processedMessages, null, 2))

It logs the following things a couple of times:

10000001 0
1
[
  {
    "customType": "message.date",
    "date": "2023-12-27T16:25:12.309Z",
    "id": "message.date-2023-12-27T16:25:12.309Z"
  },
  {
    "__html": "1",
    "attachments": [],
    "created_at": "2023-12-27T16:25:12.309Z",
    "html": "1",
    "id": "<sensitive>",
    "mentioned_users": [],
    "reactions": [],
    "status": "sending",
    "text": "1",
    "type": "regular",
    "user": {
      "id": "<sensitive>",
      "role": "user",
      "created_at": "2023-12-05T04:34:26.774012Z",
      "updated_at": "2023-12-27T16:24:52.764164Z",
      "last_active": "2023-12-27T16:17:20.994793Z",
      "banned": false,
      "online": true,
      "invisible": false,
      "devices": [],
      "mutes": [],
      "channel_mutes": [],
      "unread_count": 0,
      "total_unread_count": 0,
      "unread_channels": 0,
      "name": "<sensitive>",
      "image": "<sensitive>"
    }
  }
]

10000000 0
0
[
  {
    "customType": "message.date",
    "date": "2023-12-27T16:25:12.309Z",
    "id": "message.date-2023-12-27T16:25:12.309Z"
  },
  {
    "__html": "1",
    "attachments": [],
    "created_at": "2023-12-27T16:25:12.309Z",
    "html": "1",
    "id": "<sensitive>",
    "mentioned_users": [],
    "reactions": [],
    "status": "sending",
    "text": "1",
    "type": "regular",
    "user": {
      "id": "<sensitive>",
      "role": "user",
      "created_at": "2023-12-05T04:34:26.774012Z",
      "updated_at": "2023-12-27T16:24:52.764164Z",
      "last_active": "2023-12-27T16:17:20.994793Z",
      "banned": false,
      "online": true,
      "invisible": false,
      "devices": [],
      "mutes": [],
      "channel_mutes": [],
      "unread_count": 0,
      "total_unread_count": 0,
      "unread_channels": 0,
      "name": "<sensitive>",
      "image": "<sensitive>"
    }
  }
]

Finally, before the error I get:

10000001 1
2
[
  {
    "customType": "message.date",
    "date": "2023-12-27T16:25:12.309Z",
    "id": "message.date-2023-12-27T16:25:12.309Z"
  },
  {
    "__html": "1",
    "attachments": [],
    "created_at": "2023-12-27T16:25:12.309Z",
    "html": "1",
    "id": "<sensitive>",
    "mentioned_users": [],
    "reactions": [],
    "status": "sending",
    "text": "1",
    "type": "regular",
    "user": {
      "id": "<sensitive>",
      "role": "user",
      "created_at": "2023-12-05T04:34:26.774012Z",
      "updated_at": "2023-12-27T16:24:52.764164Z",
      "last_active": "2023-12-27T16:17:20.994793Z",
      "banned": false,
      "online": true,
      "invisible": false,
      "devices": [],
      "mutes": [],
      "channel_mutes": [],
      "unread_count": 0,
      "total_unread_count": 0,
      "unread_channels": 0,
      "name": "<sensitive>",
      "image": "<sensitive>"
    }
  }
]

To Reproduce

Steps to reproduce the behavior:

1. Follow the VirtualizedMessageList example.
2. Send the very first message within a chat.
3. See the error in the console.

Expected behavior

The error should not be thrown.

Screenshots

Package version

• stream-chat-react: 11.2.1
• stream-chat-css:
• stream-chat-js:

Desktop (please complete the following information):

• OS: [e.g. iOS] MacOS
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] 120

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[MartinCupela]

Hey @teimurjan thank you for the report. Could you please confirm the repro steps? Thank you

[Peterl561]

I'm getting a similar error message with VirtualizedMessageList, but it only happens when disableDateSeparator is false. Might it be that the prepended date separator message is breaking the calculation in computeItemKey?

[MartinCupela]

@teimurjan @Peterl561 we had this issue in the past, but after the fix for v10 and v11 I have a hard time to reproduce the issue. The reason for this in the past was the optimistic UI update and subsequent updates from the back-end with different message timestamps. This lead to message swaps based on the updated timestamp and sudden index discrepancy. And yes, it was reserved to disableDateSeparator={false} setting.

Could you please share a video of the user behavior when the issue appears?

On my end it works, please see the attached video:

vml_msg_swap_test.webm

[Annastrin]

@MartinCupela We have the same issue with "stream-chat-react": "10.22.2".
Here's the screencast:
Screencast from 13-01-24 12:39:29.webm

I've added custom computeItemKey and components: { Item } as additionalVirtuosoProps, with fixes like on the screenshots below and it seems to help.

[teimurjan]

Hey @MartinCupela. The issue happens only when disableDateSeparator={false} on my side. I can't share the whole UI & the codebase, because the project is private, but let me try to share a part of it.

1. I have the following JSX for the conversation page:

2. Within the ConversationMessageList I render the VirtualizedMessageList from Stream:

3. Here is the screen recording of the issue happening. It's handled by ErrorBoundary:

Screen.Recording.2024-01-13.at.15.10.41.mov

4. Here is what I get in the console:

5. Here is where the console stack trace is pointing to:

[stream-ci-bot]

🎉 This issue has been resolved in version 11.8.0 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀