add error screen

src/room/GroupCallView.tsx

@@ -69,6 +69,7 @@ import {
   ElementCallError,
   ErrorCategory,
   ErrorCode,
+  RTCSessionError
 } from "../utils/errors.ts";
 import { ElementCallRichError } from "../RichError.tsx";
 import {
@@ -137,8 +138,15 @@ export const GroupCallView: FC<Props> = ({
   useTypedEventEmitter(
     rtcSession,
     MatrixRTCSessionEvent.MembershipManagerError,
-    // TODO: make this set the error state so that we can render an error page.
-    (error) => logger.error(error),
+    (error) => {
+      setEnterRTCError(
+        new RTCSessionError(
+          ErrorCode.MEMBERSHIP_MANAGER_UNRECOVERABLE,
+          error.message ?? error,
+        ),
+      );
+      onLeave("error");
+    },
   );
   useEffect(() => {
     // Sanity check the room object

src/utils/errors.ts

@@ -13,13 +13,16 @@ export enum ErrorCode {
    */
   MISSING_MATRIX_RTC_FOCUS = "MISSING_MATRIX_RTC_FOCUS",
   CONNECTION_LOST_ERROR = "CONNECTION_LOST_ERROR",
+  MEMBERSHIP_MANAGER_UNRECOVERABLE = "MEMBERSHIP_MANAGER_UNRECOVERABLE",
   UNKNOWN_ERROR = "UNKNOWN_ERROR",
+  // UNKNOWN_ERROR = "UNKNOWN_ERROR",
 }
 
 export enum ErrorCategory {
   /** Calling is not supported, server misconfigured (JWT service missing, no MSC support ...)*/
   CONFIGURATION_ISSUE = "CONFIGURATION_ISSUE",
   NETWORK_CONNECTIVITY = "NETWORK_CONNECTIVITY",
+  RTC_SESSION_FAILIOUR = "RTC_SESSION_FAILIOUR",
   UNKNOWN = "UNKNOWN",
   // SYSTEM_FAILURE / FEDERATION_FAILURE ..
 }
@@ -72,3 +75,14 @@ export class ConnectionLostError extends ElementCallError {
     );
   }
 }
+
+export class RTCSessionError extends ElementCallError {
+  public constructor(code: ErrorCode, message: string) {
+    super(
+      "RTCSession Error",
+      code,
+      ErrorCategory.RTC_SESSION_FAILIOUR,
+      message,
+    );
+  }
+}