diff --git a/frontend/pages/error.tsx b/frontend/pages/error.tsx new file mode 100644 index 000000000..ec810a55b --- /dev/null +++ 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 ( + <> + + Error | Penn Clubs + + +
+
+ {`${SITE_NAME} + + Aw, Snap! + + + We are currently experiencing some issues trying to load this page. +
+ If you believe this is a critical issue, please contact us at{' '} + + contact@pennclubs.com + + . + +
+
+ + ) +} + +export default ErrorPage diff --git a/frontend/renderPage.tsx b/frontend/renderPage.tsx index bc4ae5559..c030fa013 100644 --- a/frontend/renderPage.tsx +++ b/frontend/renderPage.tsx @@ -350,18 +350,26 @@ function renderPage( } } - 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