fix(error): Redirect to /error on fetch error

pennlabs · Sep 24, 2023 · 1bd3efc · 1bd3efc
1 parent e54e75f
commit 1bd3efc
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 11 deletions.
diff --git a/frontend/pages/error.tsx b/frontend/pages/error.tsx
@@ -0,0 +1,71 @@
+import Head from 'next/head'
+import styled from 'styled-components'
+
+import { Text } from '~/components/common'
+import { BODY_FONT } from '~/constants'
+import { SITE_LOGO, SITE_NAME } from '~/utils/branding'
+
+const Main = styled.main`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+
+  padding: 0 20px;
+  box-sizing: border-box;
+
+  font-family: ${BODY_FONT};
+`
+
+const ErrorPage: React.FC = () => {
+  return (
+    <>
+      <Head>
+        <title>Error | Penn Clubs</title>
+        <style global>
+          {`
+            body {
+              margin: 0;
+            }
+          `}
+        </style>
+      </Head>
+      <Main>
+        <div>
+          <img
+            src={SITE_LOGO}
+            alt={`${SITE_NAME} Logo`}
+            style={{
+              width: '120px',
+            }}
+          />
+          <Text
+            style={{
+              fontWeight: 'bold',
+              fontSize: '2rem',
+            }}
+          >
+            Aw, Snap!
+          </Text>
+          <Text
+            style={{
+              fontSize: '1rem',
+              color: '#5a6978',
+            }}
+          >
+            We are currently experiencing some issues trying to load this page.
+            <br />
+            If you believe this is a critical issue, please contact us at{' '}
+            <a href="mailto:[email protected]" style={{ color: '#3273dc' }}>
+              [email protected]
+            </a>
+            .
+          </Text>
+        </div>
+      </Main>
+    </>
+  )
+}
+
+export default ErrorPage
diff --git a/frontend/renderPage.tsx b/frontend/renderPage.tsx
@@ -350,18 +350,26 @@ function renderPage<T>(
       }
     }
 
-    const [res, [pageProps, permissions], options] = await Promise.all([
-      fetchSettings(),
-      originalPageProps(),
-      fetchOptions(),
-    ])
-
-    const auth = { authenticated: false, userInfo: undefined }
-    if (res.ok) {
-      auth.userInfo = await res.json()
-      auth.authenticated = true
+    try {
+      const [res, [pageProps, permissions], options] = await Promise.all([
+        fetchSettings(),
+        originalPageProps(),
+        fetchOptions(),
+      ])
+      const auth = { authenticated: false, userInfo: undefined }
+      if (res.ok) {
+        auth.userInfo = await res.json()
+        auth.authenticated = true
+      }
+      return { ...pageProps, ...auth, options, permissions }
+    } catch (error) 
+      if (ctx.res) {
+        ctx.res.writeHead(307, { Location: '/error' })
+        ctx.res.end()
+        return false
+      }
+      return {}
     }
-    return { ...pageProps, ...auth, options, permissions }
   }
 
   return RenderPage