[🐛] MessageList is not updated even though messages received over WS

[Jolville]

Issue

New messages (sometimes) aren't being rendered after reconnection events. We've looked into this on our side a fair bit and added some logging to check this wasn't a connection issue, and we can see connection:onmessage() - onmessage callback logs, but the message list component doesn't show them.

Steps to reproduce

Steps to reproduce the behavior:

This doesn't happen consistently, but we were able to reproduce by

1. Creating a channel with two members
2. Opening the channel on two devices
3. Turning off mobile data on device A
4. Sending some messages from device B
5. Turning mobile data on device A back on, while simultaneously sending a message from device B.
6. Send more messages from device B

Occasionally, the messages sent from device B while device A was offline, as well as after it was back online, are never shown, until the component is unmounted/remounted by closing the screen.

Expected behavior

Messages should be shown.

Project Related Information

Customization

Click To Expand

No custom components, but here is how we're rendering the channel:

<Chat client={client}>
  <Channel<StreamType>
    channel={channel}
    allowThreadMessagesInChannel={false}
    deletedMessagesVisibilityType="never"
    keyboardVerticalOffset={headerHeight}
    thread={thread}
    hasCommands={false}
    threadList={isInThreadView}
    messageActions={({ quotedReply }) => [quotedReply]}
    MessageFooter={MessageFooter}
    myMessageTheme={{
      colors: {
        grey_gainsboro: Colors.primary[500],
        black: Colors.secondary.lime[100],
      },
      overlay: {
        messageActions: {
          actionContainer: {
            backgroundColor: Colors.neutral[900],
            borderRadius: 16,
          },
        },
        reactionsList: {
          reactionList: {
            backgroundColor: Colors.neutral[900],
          },
        },
      },
      messageSimple: {
        card: {
          footer: {
            title: {
              color: Colors.primary[500],
            },
            description: {
              color: Colors.primary[500],
            },
          },
        },
        content: {
          containerInner: {
            borderColor: Colors.primary[500],
          },
          markdown: {
            text: {
              fontSize: FontSize.PARAGRAPH_S,
              fontFamily: FontFamily.ATLAS_GROTESK_LIGHT,
            },
            listItemBullet: {
              color: Colors.secondary.lime[100],
            },
            listItemNumber: {
              color: Colors.secondary.lime[100],
            },
          },
        },
      },
    }}
  >
    {isInThreadView ? (
      <Thread />
    ) : (
      <>
        <MessageList onThreadSelect={setThread} hideStickyDateHeader />
        <MessageInput
          giphyActive={false}
          additionalTextInputProps={{
            selectionColor: Colors.primary[300],
          }}
        />
      </>
    )}
  </Channel>
</Chat>

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

{
	"react-native": "0.71.14",
    "stream-chat": "~8.13.1",
    "stream-chat-expo": "^5.19.3",
    "stream-chat-react-native-core": "^5.19.3"
}

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • [email protected]
• Device/Emulator info:
  • I am using a physical device
  • iOS/17.0.2

Additional context

We're also seeing some connection:_errorFromWSEvent() - WS failed with code 1006/connection:_errorFromWSEvent() - WS failed with code undefined logs from our customers around the same time they were reporting this issue (the connection does seem to re-establish fine though)

Screenshots

N./A

---

[khushal87]

Hey @Jolville, is this working fine now?

[Jolville]

@khushal87 sorry this was closed automatically after I referenced it in a PR in a private repo.

I've just bumped our stream package in the hopes that its fixed by #2479 - will give it a test and get back to you

[khushal87]

Yes, please give it a look and let us know. Thanks 😄

[khushal87]

Hey @Jolville, can this be closed?

[abulnes-designli]

Hi, I'm using version ^5.27.1,, and the problem is still appearing; the messages are shown after I click on the go-to last message button.

[fgauna12]

I've been chasing this issue after my users reported messages not being received.

I can confirm it happens to me, too. Version 5.33.1 of the Expo SDK.

For me,

When I receive a new message after it is reconnected, it doesn't show there are new messages or the "jump to the latest message" button. I have to scroll up to force getting the latest messages, and then they show up.

[fgauna12]

Updated, here's more specific reproduction steps because it was elusive.

• Creating a channel with two members
• Opening the channel on two devices
• Turning off mobile data and WIFI on device A
• Sending some messages from device B
• Locking device B
• Turning mobile data and WIFI on device A back on
• Observe that new messages only appear on device A if you forcefully scroll down or go to the channel list and return to the chat.

[isekovanic]

Hi @fgauna12 , are you by any chance using initialScrollToFirstUnreadMessage on the Channel component ? We've noticed some weird behaviour whenever there are a lot of messages and you scroll to the first unread one, but other than that particular scenario I cannot reproduce this at all; after having followed your steps exactly. It's weird to me that

Pretty sure that's exactly what happens on @abulnes-designli 's side too (since the scroll to bottom indicator is shown).

[fgauna12]

@isekovanic No I am not setting initialScrollToFirstUnreadMessage. I am loading the component around a message on occasion using the channel context, but outside of this scenario.

            channelContext?.loadChannelAroundMessage({messageId: messageId});

I have tried upgrading to the latest version and the same still occurred.

[pfcodes]

Reports of users not receiving messages brought me here too. Sometimes users are forced to refresh to see new messages. It’s not everytime and not easily reproducible.

[i-am-different]

I work with @Jolville and I used these steps to reproduce the issue. I can reproduce the issue by following the instructions that he provided.

And these are the logs that accompany the error state:

Hard to give a reproducible repro as the reproduction is not consistent. My instinct is that there some sort of race condition(haven't dug into the library tbh) that doesn't happen all the time.

But hopefully, this helps the towards getting a resolution.

[isekovanic]

Hi all, just a brief update: after wrestling with finding a way to reproduce this for quite some time I was finally able to find a reliable way to do so.

Please stay tuned, we're working on finding the root cause for this and fixing it.

Just wanted to let everyone know.

[isekovanic]

Hi again folks, can you please try upgrading to v5.43.1 and seeing if it fixes the issue ?

Here's the changelog: https://github.com/GetStream/stream-chat-react-native/releases/tag/v5.43.1

[fgauna12]

@isekovanic Can you share your reproduction steps?

[isekovanic]

They should be explained here, let me know if you need me to elaborate deeper.