Error boundary (#1743)

* reinstate link to browser session detail

* add util hook for unwrapping current browser session id

* fix bug in compatsessiondetail createdAt -> finishedAt

* browser session detail page

* tweak naming

* add ErrorBoundary

* useCurrentBrowserSessionId throw when error

* add ErrorBoundary to pages

* throw errors instead of rendering error

* add unwrap util

frontend/src/components/BrowserSessionList.tsx

@@ -26,12 +26,11 @@ import {
   FIRST_PAGE,
   Pagination,
 } from "../pagination";
-import { isErr, isOk, unwrapErr, unwrapOk } from "../result";
+import { isOk, unwrap, unwrapOk } from "../result";
 import { useCurrentBrowserSessionId } from "../utils/session/useCurrentBrowserSessionId";
 
 import BlockList from "./BlockList";
 import BrowserSession from "./BrowserSession";
-import GraphQLError from "./GraphQLError";
 import PaginationControls from "./PaginationControls";
 import { Title } from "./Typography";
 
@@ -113,19 +112,14 @@ const paginationFamily = atomFamily((userId: string) => {
 });
 
 const BrowserSessionList: React.FC<{ userId: string }> = ({ userId }) => {
-  const { currentBrowserSessionId, currentBrowserSessionIdError } =
+  const currentBrowserSessionId = useCurrentBrowserSessionId();
-    useCurrentBrowserSessionId();
   const [pending, startTransition] = useTransition();
   const result = useAtomValue(browserSessionListFamily(userId));
   const setPagination = useSetAtom(currentPaginationAtom);
   const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
   const [filter, setFilter] = useAtom(filterAtom);
 
-  if (currentBrowserSessionIdError)
+  const browserSessions = unwrap(result);
-    return <GraphQLError error={currentBrowserSessionIdError} />;
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
-
-  const browserSessions = unwrapOk(result);
   if (browserSessions === null) return <>Failed to load browser sessions</>;
 
   const paginate = (pagination: Pagination): void => {

frontend/src/components/CompatSessionList.tsx

@@ -26,11 +26,10 @@ import {
   FIRST_PAGE,
   Pagination,
 } from "../pagination";
-import { isErr, isOk, unwrapErr, unwrapOk } from "../result";
+import { isOk, unwrap, unwrapOk } from "../result";
 
 import BlockList from "./BlockList";
 import CompatSession from "./CompatSession";
-import GraphQLError from "./GraphQLError";
 import PaginationControls from "./PaginationControls";
 import { Title } from "./Typography";
 
@@ -116,8 +115,7 @@ const CompatSessionList: React.FC<{ userId: string }> = ({ userId }) => {
   const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
   const [filter, setFilter] = useAtom(filterAtom);
 
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
+  const compatSessionList = unwrap(result);
-  const compatSessionList = unwrapOk(result);
   if (compatSessionList === null) return <>Failed to load sessions.</>;
 
   const paginate = (pagination: Pagination): void => {

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,72 @@
+// Copyright 2023 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { CombinedError } from "@urql/core";
+import { Alert } from "@vector-im/compound-web";
+import { ErrorInfo, ReactNode, PureComponent } from "react";
+
+import GraphQLError from "./GraphQLError";
+
+interface Props {
+  children: ReactNode;
+}
+
+interface IState {
+  error?: Error;
+}
+
+const isGqlError = (error: Error): error is CombinedError =>
+  error.name === "CombinedError";
+
+/**
+ * This error boundary component can be used to wrap large content areas and
+ * catch exceptions during rendering in the component tree below them.
+ */
+export default class ErrorBoundary extends PureComponent<Props, IState> {
+  public constructor(props: Props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  public static getDerivedStateFromError(error: Error): Partial<IState> {
+    // Side effects are not permitted here, so we only update the state so
+    // that the next render shows an error message.
+    return { error };
+  }
+
+  public componentDidCatch(error: Error, { componentStack }: ErrorInfo): void {
+    console.error(error);
+    console.error(
+      "The above error occurred while React was rendering the following components:",
+      componentStack,
+    );
+  }
+
+  public render(): ReactNode {
+    if (this.state.error) {
+      if (isGqlError(this.state.error)) {
+        return <GraphQLError error={this.state.error} />;
+      }
+
+      return (
+        <Alert type="critical" title="Something went wrong">
+          {this.state.error.message}
+        </Alert>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/OAuth2SessionList.tsx

@@ -26,10 +26,9 @@ import {
   FIRST_PAGE,
   Pagination,
 } from "../pagination";
-import { isErr, isOk, unwrapErr, unwrapOk } from "../result";
+import { isOk, unwrap, unwrapOk } from "../result";
 
 import BlockList from "./BlockList";
-import GraphQLError from "./GraphQLError";
 import OAuth2Session from "./OAuth2Session";
 import PaginationControls from "./PaginationControls";
 import { Title } from "./Typography";
@@ -121,8 +120,7 @@ const OAuth2SessionList: React.FC<Props> = ({ userId }) => {
   const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
   const [filter, setFilter] = useAtom(filterAtom);
 
-  if (isErr(result)) return <GraphQLError error={unwrapErr(result)} />;
+  const oauth2Sessions = unwrap(result);
-  const oauth2Sessions = unwrapOk(result);
   if (oauth2Sessions === null) return <>Failed to load sessions.</>;
 
   const paginate = (pagination: Pagination): void => {

frontend/src/components/SessionDetail/BrowserSessionDetail.tsx

@@ -24,7 +24,6 @@ import { useCurrentBrowserSessionId } from "../../utils/session/useCurrentBrowse
 import BlockList from "../BlockList/BlockList";
 import { useEndBrowserSession } from "../BrowserSession";
 import DateTime from "../DateTime";
-import GraphQLError from "../GraphQLError";
 import EndSessionButton from "../Session/EndSessionButton";
 
 import styles from "./BrowserSessionDetail.module.css";
@@ -36,15 +35,11 @@ type Props = {
 
 const BrowserSessionDetail: React.FC<Props> = ({ session }) => {
   const data = useFragment(BROWSER_SESSION_DETAIL_FRAGMENT, session);
-  const { currentBrowserSessionId, currentBrowserSessionIdError } =
+  const currentBrowserSessionId = useCurrentBrowserSessionId();
-    useCurrentBrowserSessionId();
 
   const isCurrent = currentBrowserSessionId === data.id;
   const onSessionEnd = useEndBrowserSession(data.id, isCurrent);
 
-  if (currentBrowserSessionIdError)
-    return <GraphQLError error={currentBrowserSessionIdError} />;
-
   const deviceInformation = parseUserAgent(data.userAgent || undefined);
   const sessionName =
     sessionNameFromDeviceInformation(deviceInformation) || "Browser session";

frontend/src/pages/BrowserSession.tsx

@@ -17,6 +17,7 @@ import { atomFamily } from "jotai/utils";
 import { atomWithQuery } from "jotai-urql";
 
 import { mapQueryAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotFound from "../components/NotFound";
 import BrowserSessionDetail from "../components/SessionDetail/BrowserSessionDetail";
@@ -70,7 +71,11 @@ const BrowserSession: React.FC<{ id: string }> = ({ id }) => {
   const browserSession = unwrapOk(result);
   if (!browserSession) return <NotFound />;
 
-  return <BrowserSessionDetail session={browserSession} />;
+  return (
+    <ErrorBoundary>
+      <BrowserSessionDetail session={browserSession} />
+    </ErrorBoundary>
+  );
 };
 
 export default BrowserSession;

frontend/src/pages/BrowserSessionList.tsx

@@ -16,6 +16,7 @@ import { useAtomValue } from "jotai";
 
 import { currentUserIdAtom } from "../atoms";
 import List from "../components/BrowserSessionList";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import { isErr, unwrapErr, unwrapOk } from "../result";
@@ -27,7 +28,11 @@ const BrowserSessionList: React.FC = () => {
   const userId = unwrapOk(result);
   if (userId === null) return <NotLoggedIn />;
 
-  return <List userId={userId} />;
+  return (
+    <ErrorBoundary>
+      <List userId={userId} />
+    </ErrorBoundary>
+  );
 };
 
 export default BrowserSessionList;

frontend/src/pages/CompatSessionList.tsx

@@ -16,6 +16,7 @@ import { useAtomValue } from "jotai";
 
 import { currentUserIdAtom } from "../atoms";
 import List from "../components/CompatSessionList";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import { isErr, unwrapErr, unwrapOk } from "../result";
@@ -27,7 +28,11 @@ const CompatSessionList: React.FC = () => {
   const userId = unwrapOk(result);
   if (userId === null) return <NotLoggedIn />;
 
-  return <List userId={userId} />;
+  return (
+    <ErrorBoundary>
+      <List userId={userId} />
+    </ErrorBoundary>
+  );
 };
 
 export default CompatSessionList;

frontend/src/pages/OAuth2Client.tsx

@@ -18,6 +18,7 @@ import { atomWithQuery } from "jotai-urql";
 
 import { mapQueryAtom } from "../atoms";
 import OAuth2ClientDetail from "../components/Client/OAuth2ClientDetail";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotFound from "../components/NotFound";
 import { graphql } from "../gql";
@@ -52,7 +53,11 @@ const OAuth2Client: React.FC<{ id: string }> = ({ id }) => {
   const oauth2Client = unwrapOk(result);
   if (!oauth2Client) return <NotFound />;
 
-  return <OAuth2ClientDetail client={oauth2Client} />;
+  return (
+    <ErrorBoundary>
+      <OAuth2ClientDetail client={oauth2Client} />
+    </ErrorBoundary>
+  );
 };
 
 export default OAuth2Client;

frontend/src/pages/OAuth2SessionList.tsx

@@ -15,6 +15,7 @@
 import { useAtomValue } from "jotai";
 
 import { currentUserIdAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import List from "../components/OAuth2SessionList";
@@ -27,7 +28,11 @@ const OAuth2SessionList: React.FC = () => {
   const userId = unwrapOk(result);
   if (userId === null) return <NotLoggedIn />;
 
-  return <List userId={userId} />;
+  return (
+    <ErrorBoundary>
+      <List userId={userId} />
+    </ErrorBoundary>
+  );
 };
 
 export default OAuth2SessionList;

frontend/src/pages/Profile.tsx

@@ -15,6 +15,7 @@
 import { useAtomValue } from "jotai";
 
 import { currentUserIdAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import UserProfile from "../components/UserProfile";
@@ -27,7 +28,11 @@ const Profile: React.FC = () => {
   const userId = unwrapOk(result);
   if (userId === null) return <NotLoggedIn />;
 
-  return <UserProfile userId={userId} />;
+  return (
+    <ErrorBoundary>
+      <UserProfile userId={userId} />
+    </ErrorBoundary>
+  );
 };
 
 export default Profile;

frontend/src/pages/SessionDetail.tsx

@@ -15,6 +15,7 @@
 import { useAtomValue } from "jotai";
 
 import { currentUserIdAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import UserSessionDetail from "../components/SessionDetail";
@@ -27,7 +28,11 @@ const SessionDetail: React.FC<{ deviceId: string }> = ({ deviceId }) => {
   const userId = unwrapOk(result);
   if (userId === null) return <NotLoggedIn />;
 
-  return <UserSessionDetail userId={userId} deviceId={deviceId} />;
+  return (
+    <ErrorBoundary>
+      <UserSessionDetail userId={userId} deviceId={deviceId} />
+    </ErrorBoundary>
+  );
 };
 
 export default SessionDetail;

frontend/src/pages/SessionsOverview.tsx

@@ -16,6 +16,7 @@ import { useAtomValue } from "jotai";
 import { atomWithQuery } from "jotai-urql";
 
 import { mapQueryAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import NotLoggedIn from "../components/NotLoggedIn";
 import UserSessionsOverview from "../components/UserSessionsOverview";
@@ -54,7 +55,11 @@ const SessionsOverview: React.FC = () => {
   const data = unwrapOk(result);
   if (data === null) return <NotLoggedIn />;
 
-  return <UserSessionsOverview user={data} />;
+  return (
+    <ErrorBoundary>
+      <UserSessionsOverview user={data} />
+    </ErrorBoundary>
+  );
 };
 
 export default SessionsOverview;

frontend/src/pages/VerifyEmail.tsx

@@ -17,6 +17,7 @@ import { atomFamily } from "jotai/utils";
 import { atomWithQuery } from "jotai-urql";
 
 import { mapQueryAtom } from "../atoms";
+import ErrorBoundary from "../components/ErrorBoundary";
 import GraphQLError from "../components/GraphQLError";
 import VerifyEmailComponent from "../components/VerifyEmail";
 import { graphql } from "../gql";
@@ -51,7 +52,11 @@ const VerifyEmail: React.FC<{ id: string }> = ({ id }) => {
   const email = unwrapOk(result);
   if (email == null) return <>Unknown email</>;
 
-  return <VerifyEmailComponent email={email} />;
+  return (
+    <ErrorBoundary>
+      <VerifyEmailComponent email={email} />
+    </ErrorBoundary>
+  );
 };
 
 export default VerifyEmail;

frontend/src/result.ts

@@ -59,3 +59,14 @@ export const unwrapOk = <T>(result: Ok<T>): T => result[OK];
 
 // Extract the error from an `Err`
 export const unwrapErr = <E>(result: Err<E>): E => result[ERR];
+
+/**
+ * Check result for error and throw unwrapped error
+ * Otherwise return unwrapped Ok result
+ */
+export const unwrap = <T, E>(result: Result<T, E>): T => {
+  if (isErr(result)) {
+    throw unwrapErr(result);
+  }
+  return unwrapOk(result);
+};

frontend/src/utils/session/useCurrentBrowserSessionId.ts

@@ -21,26 +21,19 @@ import { isOk, unwrapOk, unwrapErr, isErr } from "../../result";
 /**
  * Query the current browser session id
  * and unwrap the result
+ * throws error when error result
  */
-export const useCurrentBrowserSessionId = (): {
+export const useCurrentBrowserSessionId = (): string | null => {
-  currentBrowserSessionId?: string | null;
-  currentBrowserSessionIdError?: CombinedError;
-} => {
   const currentSessionIdResult = useAtomValue(currentBrowserSessionIdAtom);
 
-  if (isOk<string | null, unknown>(currentSessionIdResult)) {
-    return {
-      currentBrowserSessionId: unwrapOk<string | null>(currentSessionIdResult),
-    };
-  }
-
   if (isErr(currentSessionIdResult)) {
-    return {
+    // eslint-disable-next-line no-throw-literal
-      currentBrowserSessionIdError: unwrapErr(
+    throw unwrapErr<CombinedError>(currentSessionIdResult) as Error;
-        currentSessionIdResult,
-      ) as CombinedError,
-    };
   }
 
-  return {};
+  if (isOk<string | null, unknown>(currentSessionIdResult)) {
+    return unwrapOk<string | null>(currentSessionIdResult);
+  }
+
+  return null;
 };