Add error screens for connecting to the JWT service

src/RichError.tsx

@@ -5,9 +5,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import {
+  type ReactElement,
+  useCallback,
+  useState,
+  type FC,
+  type ReactNode,
+} from "react";
+import { Trans, useTranslation } from "react-i18next";
+import {
+  OfflineIcon,
+  PopOutIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button, Link } from "@vector-im/compound-web";
 
 import { ErrorView } from "./ErrorView";
 
@@ -22,8 +32,9 @@ export class RichError extends Error {
      * The pretty, more helpful message to be shown on the error screen.
      */
     public readonly richMessage: ReactNode,
+    cause?: unknown,
   ) {
-    super(message);
+    super(message, { cause });
   }
 }
 
@@ -46,3 +57,117 @@ export class OpenElsewhereError extends RichError {
     super("App opened in another tab", <OpenElsewhere />);
   }
 }
+
+interface AuthConnectionFailedProps {
+  livekitServiceUrl: string;
+}
+
+const AuthConnectionFailed: FC<AuthConnectionFailedProps> = ({
+  livekitServiceUrl,
+}) => {
+  const { t } = useTranslation();
+  const [showDetails, setShowDetails] = useState(false);
+  const onShowDetailsClick = useCallback(() => setShowDetails(true), []);
+
+  return (
+    <ErrorView Icon={OfflineIcon} title={t("error.connection_failed")}>
+      <p>{t("error.connection_failed_description")}</p>
+      {showDetails ? (
+        <Trans
+          i18nKey="error.auth_connection_failed_details"
+          url={livekitServiceUrl}
+        >
+          <p>
+            The application could not reach the call authentication service at{" "}
+            <Link href={livekitServiceUrl} target="_blank">
+              {{ url: livekitServiceUrl } as unknown as ReactElement}
+            </Link>
+            . If you are the server admin, check the network logs and make sure{" "}
+            <Link
+              href="https://github.com/element-hq/lk-jwt-service/"
+              target="_blank"
+            >
+              lk-jwt-service
+            </Link>{" "}
+            is listening at that address.
+          </p>
+        </Trans>
+      ) : (
+        <Button kind="tertiary" onClick={onShowDetailsClick}>
+          {t("error.show_details")}
+        </Button>
+      )}
+    </ErrorView>
+  );
+};
+
+export class AuthConnectionFailedError extends RichError {
+  public constructor(livekitServiceUrl: string, cause: unknown) {
+    super(
+      `Failed to connect to ${livekitServiceUrl}`,
+      <AuthConnectionFailed livekitServiceUrl={livekitServiceUrl} />,
+      cause,
+    );
+  }
+}
+
+interface AuthConnectionRejectedProps {
+  livekitServiceUrl: string;
+  status: number;
+}
+
+const AuthConnectionRejected: FC<AuthConnectionRejectedProps> = ({
+  livekitServiceUrl,
+  status,
+}) => {
+  const { t } = useTranslation();
+  const [showDetails, setShowDetails] = useState(false);
+  const onShowDetailsClick = useCallback(() => setShowDetails(true), []);
+
+  return (
+    <ErrorView Icon={OfflineIcon} title={t("error.connection_failed")}>
+      <p>{t("error.connection_rejected_description")}</p>
+      {showDetails ? (
+        <Trans
+          i18nKey="error.auth_connection_rejected_details"
+          url={livekitServiceUrl}
+          status={status}
+        >
+          <p>
+            The application connected to the call authentication service at{" "}
+            <Link href={livekitServiceUrl} target="_blank">
+              {{ url: livekitServiceUrl } as unknown as ReactElement}
+            </Link>
+            , but it responded with status code{" "}
+            {{ status } as unknown as ReactElement}. If you are the server
+            admin, make sure{" "}
+            <Link
+              href="https://github.com/element-hq/lk-jwt-service/"
+              target="_blank"
+            >
+              lk-jwt-service
+            </Link>{" "}
+            is listening at that address and check the logs for more
+            information.
+          </p>
+        </Trans>
+      ) : (
+        <Button kind="tertiary" onClick={onShowDetailsClick}>
+          {t("error.show_details")}
+        </Button>
+      )}
+    </ErrorView>
+  );
+};
+
+export class AuthConnectionRejectedError extends RichError {
+  public constructor(livekitServiceUrl: string, status: number) {
+    super(
+      `Failed to connect to ${livekitServiceUrl} (status ${status})`,
+      <AuthConnectionRejected
+        livekitServiceUrl={livekitServiceUrl}
+        status={status}
+      />,
+    );
+  }
+}

src/livekit/openIDSFU.ts

@@ -12,6 +12,10 @@ import { useEffect, useState } from "react";
 import { type LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 import { useActiveLivekitFocus } from "../room/useActiveFocus";
+import {
+  AuthConnectionFailedError,
+  AuthConnectionRejectedError,
+} from "../RichError";
 
 export interface SFUConfig {
   url: string;
@@ -35,25 +39,24 @@ export function useOpenIDSFU(
   client: OpenIDClientParts,
   rtcSession: MatrixRTCSession,
 ): SFUConfig | undefined {
-  const [sfuConfig, setSFUConfig] = useState<SFUConfig | undefined>(undefined);
+  const [sfuConfig, setSFUConfig] = useState<SFUConfig | Error | undefined>(
+    undefined,
+  );
 
   const activeFocus = useActiveLivekitFocus(rtcSession);
 
   useEffect(() => {
     if (activeFocus) {
       getSFUConfigWithOpenID(client, activeFocus).then(
-        (sfuConfig) => {
-          setSFUConfig(sfuConfig);
-        },
-        (e) => {
-          logger.error("Failed to get SFU config", e);
-        },
+        (sfuConfig) => setSFUConfig(sfuConfig),
+        (e) => setSFUConfig(e),
       );
     } else {
       setSFUConfig(undefined);
     }
   }, [client, activeFocus]);
 
+  if (sfuConfig instanceof Error) throw sfuConfig;
   return sfuConfig;
 }
 
@@ -64,26 +67,18 @@ export async function getSFUConfigWithOpenID(
   const openIdToken = await client.getOpenIdToken();
   logger.debug("Got openID token", openIdToken);
 
-  try {
-    logger.info(
-      `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`,
-    );
-    const sfuConfig = await getLiveKitJWT(
-      client,
-      activeFocus.livekit_service_url,
-      activeFocus.livekit_alias,
-      openIdToken,
-    );
-    logger.info(`Got JWT from call's active focus URL.`);
+  logger.info(
+    `Trying to get JWT from call's active focus URL of ${activeFocus.livekit_service_url}...`,
+  );
+  const sfuConfig = await getLiveKitJWT(
+    client,
+    activeFocus.livekit_service_url,
+    activeFocus.livekit_alias,
+    openIdToken,
+  );
+  logger.info(`Got JWT from call's active focus URL.`);
 
-    return sfuConfig;
-  } catch (e) {
-    logger.warn(
-      `Failed to get JWT from RTC session's active focus URL of ${activeFocus.livekit_service_url}.`,
-      e,
-    );
-    return undefined;
-  }
+  return sfuConfig;
 }
 
 async function getLiveKitJWT(
@@ -92,8 +87,9 @@ async function getLiveKitJWT(
   roomName: string,
   openIDToken: IOpenIDToken,
 ): Promise<SFUConfig> {
+  let res: Response;
   try {
-    const res = await fetch(livekitServiceURL + "/sfu/get", {
+    res = await fetch(livekitServiceURL + "/sfu/get", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
@@ -104,11 +100,11 @@ async function getLiveKitJWT(
         device_id: client.getDeviceId(),
       }),
     });
-    if (!res.ok) {
-      throw new Error("SFU Config fetch failed with status code " + res.status);
-    }
-    return await res.json();
   } catch (e) {
-    throw new Error("SFU Config fetch failed with exception " + e);
+    throw new AuthConnectionFailedError(livekitServiceURL, e);
   }
+  if (!res.ok) {
+    throw new AuthConnectionRejectedError(livekitServiceURL, res.status);
+  }
+  return await res.json();
 }