From da073d73f080c736c4386738ddf3f9429ad4dce8 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Mon, 22 Mar 2021 00:13:55 -0400
Subject: [PATCH] feat(web): add error pages

---
 packages/web/src/app-router/AppRouter.tsx |  7 +++++++
 packages/web/src/pages/error.tsx          | 10 ++++++++++
 packages/web/src/pages/picker.tsx         |  7 +++++--
 packages/web/src/pages/servers.tsx        |  2 +-
 4 files changed, 23 insertions(+), 3 deletions(-)
 create mode 100644 packages/web/src/pages/error.tsx

diff --git a/packages/web/src/app-router/AppRouter.tsx b/packages/web/src/app-router/AppRouter.tsx
index c7f6f91..118f2e4 100644
--- a/packages/web/src/app-router/AppRouter.tsx
+++ b/packages/web/src/app-router/AppRouter.tsx
@@ -2,6 +2,7 @@ import { Router } from '@reach/router';
 import { GenericLoadingTemplate } from '@roleypoly/design-system/templates/generic-loading';
 import * as React from 'react';
 import AuthLogin from '../pages/auth/login';
+import ErrorPage from '../pages/error';
 import LandingPage from '../pages/landing';
 import PickerPage from '../pages/picker';
 
@@ -18,6 +19,7 @@ const RouteWrapper = (props: {
   component: React.ComponentType<any>;
   path?: string;
   default?: boolean;
+  [x: string]: any;
 }) => (
   <React.Suspense fallback={<GenericLoadingTemplate />}>
     <props.component {...props} />
@@ -31,6 +33,9 @@ export const AppRouter = () => {
       <RouteWrapper component={ServersPage} path="/servers" />
       <RouteWrapper component={PickerPage} path="/s/:serverID" />
 
+      <RouteWrapper component={ErrorPage} path="/error" />
+      <RouteWrapper component={ErrorPage} path="/error/:identity" />
+
       <RouteWrapper
         component={MachineryNewSession}
         path="/machinery/new-session/:sessionID"
@@ -42,6 +47,8 @@ export const AppRouter = () => {
 
       <RouteWrapper component={DevToolsSetApi} path="/x/dev-tools/set-api" />
       <RouteWrapper component={DevToolsSessionDebug} path="/x/dev-tools/session-debug" />
+
+      <RouteWrapper component={ErrorPage} default identity={404} />
     </Router>
   );
 };
diff --git a/packages/web/src/pages/error.tsx b/packages/web/src/pages/error.tsx
new file mode 100644
index 0000000..0850576
--- /dev/null
+++ b/packages/web/src/pages/error.tsx
@@ -0,0 +1,10 @@
+import { Error } from '@roleypoly/design-system/templates/errors';
+import { useAppShellProps } from '../contexts/app-shell/AppShellContext';
+
+const ErrorPage = (props: { identity: string }) => {
+  const appShellProps = useAppShellProps();
+
+  return <Error code={props.identity} {...appShellProps} />;
+};
+
+export default ErrorPage;
diff --git a/packages/web/src/pages/picker.tsx b/packages/web/src/pages/picker.tsx
index deb8e78..93a10ec 100644
--- a/packages/web/src/pages/picker.tsx
+++ b/packages/web/src/pages/picker.tsx
@@ -56,8 +56,10 @@ const Picker = (props: PickerProps) => {
   if (pickerData === false) {
     if (session && session.user && session.guilds) {
       const guildSlug = session.guilds.find((guild) => guild.id === props.serverID);
+
       if (!guildSlug) {
-        throw new Error('placeholder: guild not found in user slugs, 404');
+        console.error({ error: 'guold not in session, 404' });
+        return <Redirect to="/error/404" replace />;
       }
 
       return (
@@ -69,7 +71,8 @@ const Picker = (props: PickerProps) => {
       );
     }
 
-    throw new Error('placeholder: session state is odd, 404');
+    console.error({ error: 'session state is odd, 404' });
+    return <Redirect to="/error/404" replace />;
   }
 
   const onSubmit = async (submittedRoles: string[]) => {
diff --git a/packages/web/src/pages/servers.tsx b/packages/web/src/pages/servers.tsx
index 1b7970f..572068c 100644
--- a/packages/web/src/pages/servers.tsx
+++ b/packages/web/src/pages/servers.tsx
@@ -9,7 +9,7 @@ const ServersPage = () => {
   const { isAuthenticated, session } = useSessionContext();
   const appShellProps = useAppShellProps();
   if (!isAuthenticated || !session) {
-    return <Redirect to="/" />;
+    return <Redirect to="/" noThrow />;
   }
 
   return (