Error if Logout before "participant" is connected
Opened this issue · 6 comments
Hi, if you connect to a Room and allow access to cam/mic, but then leave the room quickly by clicking on the Logout button :
- media tracks are not being stopped
- we get the classic react error :
Warning: Can't perform a React state update on an unmounted component... - sometimes only, the following errors are thrown :
Firefox can’t establish a connection to the server at wss://sdkgw.us1.twilio.com/v1/VideoEventsandThe connection to wss://sdkgw.us1.twilio.com/v1/VideoEvents was interrupted while the page was loading.
I will investigate on my side on how to solve this.
EDIT : It seems to be because we do not enter enter the setRoom (useState setter) function. Is it because of the Bailing out of a state update behaviour ?
Hey, you're right I did not build this project to handle that case.
I believe that, at least for the React error, this is because the component is being removed before the room connects (before the Video.connect promise resolves and sets the room), but there is nothing in the function returned by useEffect that handles that.
According to the documentation, the connect method returns a cancelable promise that resolves to a room. If I were going to try to fix this, I would store the Video.connect promise and in the returned function, if there is no currentRoom object then cancel the promise.
Let me know how you get on with this.
Hi, I am not sure what a cancellable promise is... I can use Promise.race with a setInterval in order not to subscribe room events.
I would still have a problem releasing medias if the room is not set (because we do access it with room.localParticipant.tracks).
I think it is a better idea, getting the tracks first in order to release them if the connect function does not resolve correctly.
I also think it's better to use the useRef hook in order to access the room (roomRef.current) rather that the useState hook and passing a function as a parameter (setRoom((curRoom) => {})).
CancelablePromise is implemented here. It behaves like a regular Promise but it comes with a cancel method that you can use to stop the actions of the Promise before it rejects or resolves. I would use that in the return method for the useEffect over hacking something together with Promise.race.
I agree that getting tracks yourself is actually a better way in general to manage an app like this. Good user experiences include a preview of a user's video and audio before they join a room to make sure the settings are correct, so I would use Video.createLocalTracks to request the tracks and then provide them to Video.connect.
I've not tried using useRef for this, but that may also work.
I just tried cancelling the promise to stop the room connecting and it didn't work for me. I've raised this with the Twilio Video team and will update this as I find out more.
One workaround to avoid issues with this that I just thought of is not to show the "Log out" button until the user has connected.