Merge pull request #3293 from element-hq/toger5/more-disconnect-logging

Fix creating two lk rooms if there is no local store setup (fixes a resulting disconnect bug)

src/e2ee/sharedKeyManagement.ts

@@ -21,7 +21,7 @@ const getRoomSharedKeyLocalStorageKey = (roomId: string): string =>
 
 const useInternalRoomSharedKey = (roomId: string): string | null => {
   const key = getRoomSharedKeyLocalStorageKey(roomId);
-  const roomSharedKey = useLocalStorage(key)[0];
+  const [roomSharedKey] = useLocalStorage(key);
 
   return roomSharedKey;
 };

src/livekit/useLivekit.ts

@@ -131,6 +131,7 @@ export function useLivekit(
   // @livekit/components-react. JSON.stringify() is used in deps of a
   // useEffect() with an argument that references itself, if E2EE is enabled
   const room = useMemo(() => {
+    logger.info("[LivekitRooms] Create LiveKit room with options", roomOptions);
     const r = new Room(roomOptions);
     r.setE2EEEnabled(e2eeSystem.kind !== E2eeType.NONE).catch((e) => {
       logger.error("Failed to set E2EE enabled on room", e);

src/main.tsx

@@ -29,7 +29,7 @@ window.setLKLogLevel = setLKLogLevel;
 initRageshake().catch((e) => {
   logger.error("Failed to initialize rageshake", e);
 });
-setLKLogLevel("warn");
+setLKLogLevel("info");
 setLKLogExtension((level, msg, context) => {
   // we pass a synthetic logger name of "livekit" to the rageshake to make it easier to read
   global.mx_rage_logger.log(level, "livekit", msg, context);

src/useLocalStorage.ts

@@ -42,6 +42,14 @@ export const useLocalStorage = (
 };
 
 export const setLocalStorageItem = (key: string, value: string): void => {
+  // Avoid unnecessary updates. Not avoiding them so can cause unexpected state updates across hooks.
+  // For instance:
+  // - In call view uses useRoomEncryptionSystem
+  // - This will set the key again.
+  // - All other instances of useRoomEncryptionSystem will now do a useMemo update of the e2eeSystem
+  //   - because the dependency `storedPassword = useInternalRoomSharedKey(roomId);` would change.
+  if (localStorage.getItem(key) === value) return;
+
   localStorage.setItem(key, value);
   localStorageBus.emit(key, value);
 };