search

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
964 stars 323 forks source link

🔥 [🐛] MessageList.tsx renderItem crash #2499

Closed jmoyers14 closed 4 months ago

jmoyers14 commented 5 months ago

Issue

I am experiencing a crash originating from the MessageList.tsx -> renderItem -> isMessageRead method. The error:

cannot read property 'created_at' of undefined
Screenshot 2024-04-25 at 9 00 24 AM

Steps to reproduce

I'm still investigating the steps to reproduce the issue. Not all channel members are affected.

Expected behavior

The application should not crash.

Project Related Information

React Native react-native@0.72.3 stream-chat-expo@5.26.0

Customization

Offline support

Environment

Production

package.json:

# N/A

react-native info output:

info Fetching system and libraries information... System: OS: macOS 14.0 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 309.04 MB / 16.00 GB Shell: version: 3.5.1 path: /usr/local/bin/fish Binaries: Node: version: 18.19.0 path: ~/Library/Caches/fnm_multishells/86785_1714063943275/bin/node Yarn: version: 1.22.19 path: /usr/local/bin/yarn npm: version: 10.2.3 path: ~/Library/Caches/fnm_multishells/86785_1714063943275/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.12.1 path: /Users/jmoyers/.rbenv/shims/pod SDKs: iOS SDK: Platforms:

Additional context

I'll keep posting here as I learn more. It seems the index is out of bounds of the processedMessagesArray not sure if our custom code can impact this or not

Edit:

The issue goes away when we set initialScrollToFirstUnreadMessage={false}

<StreamChannel
            {...props}
            keyboardVerticalOffset={headerHeight}
            myMessageTheme={myMessageTheme}
            markdownRules={markdownRules}
            Message={Message}
            MessageSystem={MessageSystem}
            MessageAvatar={CustomAvatarWrapper}
            AutoCompleteSuggestionItem={AutoCompleteSuggestionItem}
            AutoCompleteSuggestionList={AutoCompleteSuggestionList}
            FileUploadPreview={FileUploadPreview}
            ImageUploadPreview={ImageUploadPreview}
            FileAttachment={FileAttachment}
            doDocUploadRequest={doDocUploadRequest}
            initialScrollToFirstUnreadMessage={true}
            NetworkDownIndicator={() => null}
            InlineUnreadIndicator={InlineUnreadIndicator}
        >
            {props.children}
        </StreamChannel>
khushal87 commented 5 months ago

Hey @jmoyers14, do you face this for all the messages?

khushal87 commented 5 months ago

What are the customizations that you have added and does your message object contains the created_at property?

khushal87 commented 5 months ago

Hey @jmoyers14, please help us reproduce this issue since we haven't been able to reproduce it on our side with our TypescriptMessaging app.

jmoyers14 commented 5 months ago

He @khushal87 thanks for the patience. I'm working on getting a repo setup to isolate the issue. It doesn't seem to be any type of message in particular, not every channel member will experience the issue.

When a user reports the issue I can fix it remotely by using the API to mark all their messages for the crashing channel as read.

khushal87 commented 5 months ago

Yes, please. We are awaiting repro repo on this.

jmoyers14 commented 4 months ago

@khushal87 I have a channel and user in our environment that can reproduce the issue. If we provide your team with the channel information are they able to test against your Typescript messaging app?

khushal87 commented 4 months ago

Yes, please share the details. Please share your API key channel ID, the message ID, and the user credentials. You can mail me at khushal.agarwal@getstream.io.

jmoyers14 commented 4 months ago

Thanks @khushal87! I sent you an email with the users credendials. I was able to reproduce the crash with this repository https://github.com/Trova-Trip/TrovaStreamchatReactNativeTesting

We believe the issue is related to this code from channelQueryCallRef when initialscrollToFirstUnreadMessage is enabled on the Channel component: https://github.com/GetStream/stream-chat-react-native/blob/bdca95725c7089ea75154b7c9dfa8730c5be9a97/package/src/components/Channel/Channel.tsx#L893

The length of the FlatList's data source changes during execution of the renderItem method, causing the undefined reference exception.

Using the optional chain operator here seems at least work as a bandaid and prevent the crash

https://github.com/GetStream/stream-chat-react-native/blob/bdca95725c7089ea75154b7c9dfa8730c5be9a97/package/src/components/MessageList/MessageList.tsx

        } else if (lastRead && msg?.created_at) {
khushal87 commented 4 months ago

Hey @jmoyers14, so I tried your credentials on our TS sample app, and it worked fine, and there was no crash as such. PFA the video attached:

https://github.com/GetStream/stream-chat-react-native/assets/39884168/492fe905-a118-4412-9ec5-5f4b53e6a466

jmoyers14 commented 4 months ago

In your TS sample app is the initialscrollToFirstUnreadMessage feature enabled? Once the user makes the messages as read the crash goes away. I’ll have to reset the user for the crash to come back Sent from my iPhoneOn May 14, Reiwa 6, at 9:37 PM, Khushal Agarwal @.***> wrote: Hey @jmoyers14, so I tried your credentials on our TS sample app, and it worked fine, and there was no crash as such. PFA the video attached: https://github.com/GetStream/stream-chat-react-native/assets/39884168/492fe905-a118-4412-9ec5-5f4b53e6a466

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

khushal87 commented 4 months ago

So, should I send some unread messages on your app after enabling the prop initialscrollToFirstUnreadMessage and then see the issue?

jmoyers14 commented 4 months ago

@khushal87 If you are able to build and run the app in this repo https://github.com/Trova-Trip/TrovaStreamchatReactNativeTesting you can reproduce the crash following the steps:

  1. Set the credentials in the chatConfig.js file
  2. Navigate to the first channel in the list

https://github.com/GetStream/stream-chat-react-native/assets/1761728/e1966bc0-7985-4991-9162-c6294bad3114

The crash was not reproducable in the example app for two reasons:

  1. The initialScrollToFirstUnreadMessage flag is not set on the Channel component.
  2. The ChannelList filters removes the effected channel from the list.

I don't know the exact cause of the issue, but it occurs in a channel when initialScrollToFirstUnreadMessage is set and the logged in users has an unread message, usually a lot of unread messages. The crash does not always happen when a user has unread messages, but clearing a users unread messages solves the issue.

Please let me know if there's anything else I can provide or if there are any issues building from the repo. Thanks again for all the effort!

khushal87 commented 4 months ago

Is this a production app? can I send some messages from other user to test the bug? Or may be if you can send messages and then I can test?

jmoyers14 commented 4 months ago

Thanks for trying! @khushal87 did you build and run from https://github.com/Trova-Trip/TrovaStreamchatReactNativeTesting ? You should not need to send any messages, the user and channel are already in a broken state.

khushal87 commented 4 months ago

Hey @jmoyers14, I was able to reproduce this issue with your app. I see that the msg here is undefined for your case which leads the else if case to break as created_at is not accessible. Once I added a check for msg that fixed the problem and now I was able to read the chat. But, i want to reproduce the problem to get into the crux of it. Can you help me reproduce it? Thanks 😄

jmoyers14 commented 4 months ago

@khushal87 Awesome! Thanks for getting our repo up and running. If you pull the latest changes on main I added a 'mark message unread' action. You can reproduce the error state following the steps in this video:

  1. Scroll to first message in channel
  2. Long press, mark unread
  3. Reload the javascript bundle with the debug menu
  4. Navigate back to the channel

https://github.com/GetStream/stream-chat-react-native/assets/1761728/5259325a-07ad-462a-a35d-8a37a0c9bc43

khushal87 commented 4 months ago

Hey @jmoyers14, thanks for being patient and providing us with the repro. I will investigate it further and try to get back to you soon.

khushal87 commented 4 months ago

Hey @jmoyers14, this has been fixed with the check if the msg is undefined, and it will be live in the next release. Thanks for reporting 😄

jmoyers14 commented 4 months ago

Awesome thanks @khushal87. Do you guys patch fixes backwards or do we need to upgrade to the latest?

khushal87 commented 4 months ago

Hey @jmoyers14, a new version will come up in the upcoming days and then you can use it that should solve your problem.

stream-ci-bot commented 4 months ago

:tada: This issue has been resolved in version 5.31.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: