GetStream / stream-chat-react-native

πŸ’¬ React-Native Chat SDK ➜ Stream Chat. Includes a tutorial on building your own chat app experience using React-Native, React-Navigation and Stream
https://getstream.io/chat/sdk/react-native/
Other
983 stars 325 forks source link

[πŸ›] MessageList is not updated even though messages received over WS #2305

Open Jolville opened 1 year ago

Jolville commented 1 year ago

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: ```typescript jsx 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 ? ( ) : ( <> )} ```

Offline support

Environment

Click To Expand

#### `package.json`: ```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 - [x] Both - **`stream-chat-react-native` version you're using that has this issue:** - `stream-chat-react-native-core@5.19.3` - Device/Emulator info: - [x] 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 commented 6 months ago

Hey @Jolville, is this working fine now?

Jolville commented 6 months ago

@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 https://github.com/GetStream/stream-chat-react-native/pull/2479 - will give it a test and get back to you

khushal87 commented 6 months ago

Yes, please give it a look and let us know. Thanks πŸ˜„

khushal87 commented 5 months ago

Hey @Jolville, can this be closed?

abulnes-designli commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

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

isekovanic commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 2 weeks ago

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 commented 1 week ago

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.

Simulator Screenshot - iPhone 15 Pro - 2024-11-21 at 16 31 09

And these are the logs that accompany the error state:

image image

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

@isekovanic Can you share your reproduction steps?

isekovanic commented 1 week ago

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