You can't use a channel after client.disconnect() was called

[jamesdbxt]

Is there any reason why when tabbing back to our web application stream-chat is trying to execute getClient without us having mounted any components which interact with Stream Chat API?

This error is emitted to the console each time I refocus the Chrome tab containing our app which uses Stream Chat.

The version of stream-chat we are using are as follows.
"stream-chat": "1.2.1",
"stream-chat-react": "0.7.5",

[vishalnarkhede]

Hey @jamesdbxt we will check and get back to you. Thanks for reporting this!!

[vishalnarkhede]

Hey @jemesdbxt

We use Visibilityjs to track if user is on chat tab. And once user comes back to chat tab, we call markRead api call (which internally calls getClient). But if you unmount the component, then we unsubscribe this listener (from Visibilityjs) as well - https://github.com/GetStream/stream-chat-react/blob/master/src/components/Channel.js#L238 So ideally you shouldn't face this bug.

Can you tell me if you do some manual mounting/unmounting on your side, that may interfere with this behaviour?

[jaapbakker88]

@jamesdbxt did you manage to resolve this issue and can we close this issue?

[jamesdbxt]

@jaapbakker88 yes you may close this issue, we have resolved this behaviour on our end. Thank you for following up.

[wallawe]

@jamesdbxt I know it was awhile back but do you remember what the culprit was here? We're getting the same error and this is the only related thread I've been able to find.

[zacheryconverse]

Hi @wallawe,

The channel list may be trying to fetch channels with no active client. It is possible that you may need to unmount the Chat app and mount it again using a new StreamChat instance.

If you have further questions, please feel free to reach out to our amazing Customer Success and Engineer support team at support@getstream.io with your application key or ID and we’ll be able to help you out.

[brianspinos]

Still seeing the issue... the example code does not work from this page: https://getstream.io/chat/docs/javascript/instantiating_the_client/?language=javascript

//============== chatClient is not available
// close the WebSocket connection when component dismounts
return () => chatClient.disconnectUser();

//============ and when the component re-mounts, we get the error

[petyosi]

@brianspinos can you reproduce the problem in a codesandbox? We will take a look. Feel free to email us at support@getstream.io.

[brianspinos]

here it is: https://codesandbox.io/s/restless-hooks-xo5jsq?file=/src/App.js

[oliverlaz]

Hi @brianspinos, thanks for taking the time to prepare the code example. We have looked at it and we recognize the problem you are experiencing.

This problem surfaces more often in dev environments now with the recent introduction/change of React.StrictMode.
We are looking into providing a more solid solution straight from the SDK and we do have a few experimental APIs that we are evaluating. One of those APIs is currently running live in our Social Messenger demo on the Stream's website.
You can see the hook we use here:

• https://github.com/GetStream/website-react-examples/blob/59890c700521a1989ce0d96880564c33bbb2a0be/social-messenger-ts/src/hooks/useConnectUser.ts

It might need some small adjustments but you can give it a try. We would be also interested to hear your feedback about it.

[brianspinos]

fixed the issue, I need to set the client directly in setState, and connect the user on mount, and disconnect on unmount :)

…

On Tue, Jun 28, 2022 at 8:35 AM Oliver Lazoroski ***@***.***> wrote: Hi @brianspinos <https://github.com/brianspinos>, thanks for taking the time to prepare the code example. We have looked at it and we recognize the problem you are experiencing. This problem surfaces more often in dev environments now with the recent introduction/change of React.StrictMode. We are looking into providing a more solid solution straight from the SDK and we do have a few experimental APIs that we are evaluating. One of those APIs is currently running live in our Social Messenger demo on the Stream's website. You can see the hook we use here: - https://github.com/GetStream/website-react-examples/blob/59890c700521a1989ce0d96880564c33bbb2a0be/social-messenger-ts/src/hooks/useConnectUser.ts It might need some small adjustments but you can give it a try. We would be also interested to hear your feedback about it. — Reply to this email directly, view it on GitHub <#167 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZEUKGIBHC4736LAIMJ6CATVRMLTXANCNFSM4LOFEX2Q> . You are receiving this because you were mentioned.Message ID: ***@***.***>