Recover a React Room After Connection or Media Failure

Keep a mediasfu-reactjs@4.2.9 room understandable when its socket drops, a device disappears, remote media pauses, or the meeting ends while the app is recovering.

Use ModernMediasfuGeneric for the first release. The supplied room owns its socket listeners, room-state updates, media transports, and close/reset path. Your application owns the message around that state, whether the user may retry, and what app data is cleared after exit.

Prerequisites

• A working React room lifecycle.
• An authenticated backend capable of issuing a fresh room result when the previous application authorization has expired.
• A product decision for transient reconnect, access revoked, participant removed, participant leave, and host-ended room states.
• Two browser contexts for release testing so the second person can confirm remote media and participant changes.

Keep one room runtime mounted

import { useState } from 'react';
import {
  ModernMediasfuGeneric,
  type ModernMediasfuGenericOptions,
} from 'mediasfu-reactjs';
import {
  createRoomViaBackend,
  joinRoomViaBackend,
} from './room-api';

type RoomState = Record<string, unknown>;

export function RecoverableRoom() {
  const [roomState, setRoomState] = useState<RoomState>({});

  const updateRoomState: NonNullable<
    ModernMediasfuGenericOptions['updateSourceParameters']
  > = (next) => setRoomState(next);

  return (
    <ModernMediasfuGeneric
      createMediaSFURoom={createRoomViaBackend}
      joinMediaSFURoom={joinRoomViaBackend}
      returnUI
      sourceParameters={roomState}
      updateSourceParameters={updateRoomState}
    />
  );
}

Do not mount a second room component as a reconnect strategy. Do not replay mute, remove, poll, recording, or host-end actions merely because their earlier responses were interrupted. Wait for the room's latest state, then let the user retry an action only when its result is still absent.

Present distinct recovery states

State	What the user sees	What the app does next
Reconnecting	Keep the room visible, mark controls temporarily unavailable, and preserve non-sensitive drafts.	Wait for the supplied room to restore current socket and participant state.
Authorization expired	Explain that access must be refreshed.	Ask the authenticated backend for a new room result; never reuse or expose an old account credential.
Device lost or denied	Keep the person in the room without claiming the track is active.	Offer device selection or permission help, then retry media deliberately.
Remote media paused	Keep the participant visible and mark the affected media unavailable.	Wait for current producer/consumer state; do not duplicate a receive transport.
Participant removed or access revoked	Explain that this session can no longer continue.	Stop local tracks, close app-owned panels, and return to the post-room screen.
Meeting ended by host	Explain that the room ended for everyone.	Do not offer an in-place reconnect to the ended session; clear room state and require a new invitation or room.
Participant left	Other people remain in the room and see that participant disappear.	Detach only the departed person's media and remove their app-owned selection.

Closing a tab, losing a socket, leaving as one participant, and ending the meeting for everyone are different outcomes. Keep those messages and next actions different too.

Handle media recovery without duplicate tracks

After reconnection, consider media ready only when current room state confirms the device, producer, and consumer states your UI promises. A remembered “microphone on” toggle is not proof that the new transport is publishing.

When a camera, microphone, screen share, or receive path fails:

1. show the specific failure—permission, missing device, lost device, transport, autoplay, or screen-picker cancellation;
2. keep unaffected room controls usable;
3. stop and detach app-owned stale tracks before retrying;
4. wait for current room state before showing the operation as active; and
5. verify the result from a second participant when the operation is remote.

Cleanup after exit or terminal failure

The supplied room performs its own socket and transport reset. Your app must also clear what it owns:

• participant selections and copied room snapshots;
• pending moderation or collaboration actions;
• message, poll, whiteboard, and recording drafts according to product policy;
• app-added event listeners and timers;
• app-owned media elements, object URLs, and temporary exports; and
• cached room authorization that must not be reused.

For host end, also verify that every participant receives the ended state and that your backend's room and grant cleanup policy completed. A client-side redirect is not teardown proof.

Release checklist

• Disconnect and restore the socket while two participants are present.
• Confirm controls remain disabled until current room state is available.
• Test expired authorization and obtain a fresh backend response.
• Unplug or revoke camera and microphone access during the room.
• Cancel and stop screen share using both app and browser controls.
• Confirm no duplicate local or remote media appears after recovery.
• Remove one participant and distinguish that state from ordinary leave.
• End the room as host and confirm other participants cannot reconnect to the ended session.
• Verify app-owned listeners, tracks, transports, timers, drafts, and room authority are cleared after terminal exit.

The included recovery example type-checks against mediasfu-reactjs@4.2.9 and exercises deterministic app-state decisions without opening sockets or media devices. Run this checklist with real devices and two browser contexts before release.

Next, test participant authority and messaging under the same disconnect conditions.