feat(web): add error pages (#193)

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>
   );
 };

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;

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[]) => {

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 (