🔥 [🐛] MessageList.tsx renderItem crash

[jmoyers14]

Issue

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

cannot read property 'created_at' of undefined

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 [email protected] [email protected]

Customization

Offline support

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

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: - DriverKit 23.4 - iOS 17.4 - macOS 14.4 - tvOS 17.4 - visionOS 1.1 - watchOS 10.4 Android SDK: API Levels: - "31" - "32" - "33" Build Tools: - 30.0.3 - 32.0.0 - 33.0.0 System Images: - android-31 | Google Play Intel x86 Atom_64 - android-33 | Google APIs Intel x86_64 Atom Android NDK: Not Found IDEs: Android Studio: 2022.1 AI-221.6008.13.2211.9619390 Xcode: version: 15.3/15E204a path: /usr/bin/xcodebuild Languages: Java: version: 18.0.2 path: /usr/bin/javac Ruby: version: 2.7.6 path: /Users/jmoyers/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.3 wanted: ^0.72.3 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

• Platform that you're experiencing the issue on:
  • [ ] iOS
  • [ ] Android
  • [ x] 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:
  • e.g. 5.4.3
• Device/Emulator info:
  • [ x] I am using a physical device
  • OS version: e.g. Android 10
  • Device/Emulator: e.g. iPhone 11

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]

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

[khushal87]

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

[khushal87]

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]

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]

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

[jmoyers14]

@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]

Yes, please share the details. Please share your API key channel ID, the message ID, and the user credentials. You can mail me at [email protected].

[jmoyers14]

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]

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]

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]

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

[jmoyers14]

@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]

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]

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]

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]

@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]

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]

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]

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

[khushal87]

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]

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

The release is available on:

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

Your semantic-release bot :package::rocket: