From 1539b23b16c52ba4c5f601d42275681b5e941b4f Mon Sep 17 00:00:00 2001
From: Joe Karow <58997957+JoeKarow@users.noreply.github.com>
Date: Wed, 2 Aug 2023 17:20:00 -0400
Subject: [PATCH] custom error pages
---
apps/app/public/locales/en/common.json | 4 ++
apps/app/src/pages/404.tsx | 62 ++++++++++++++++++++++++
apps/app/src/pages/500.tsx | 66 ++++++++++++++++++++++++++
apps/app/src/pages/_error.tsx | 19 ++++++++
apps/app/src/types/nextjs-routes.d.ts | 2 +
5 files changed, 153 insertions(+)
create mode 100644 apps/app/src/pages/404.tsx
create mode 100644 apps/app/src/pages/500.tsx
create mode 100644 apps/app/src/pages/_error.tsx
diff --git a/apps/app/public/locales/en/common.json b/apps/app/public/locales/en/common.json
index 480382151b..9918d3b1c9 100644
--- a/apps/app/public/locales/en/common.json
+++ b/apps/app/public/locales/en/common.json
@@ -84,6 +84,10 @@
"enter-password-placeholder": "Enter password...",
"enter-review": "Enter your review...",
"errors": {
+ "404-body": "We're sorry, the page you're looking for doesn't exist or has been moved. Start a search below to find safe, verified resources for the diverse LGBTQ+ community in your area.",
+ "404-title": "404: Page not found.",
+ "500-body": "We're sorry, something went wrong with our server. Please try again later, or start a search below to find safe, verified LGBTQ+ resources in your area.",
+ "500-title": "500: Something went wrong.",
"oh-no": "Oh no!",
"try-again-text": "Something went wrong! Please try again."
},
diff --git a/apps/app/src/pages/404.tsx b/apps/app/src/pages/404.tsx
new file mode 100644
index 0000000000..ff57cb8834
--- /dev/null
+++ b/apps/app/src/pages/404.tsx
@@ -0,0 +1,62 @@
+import { Center, Container, rem, Stack, Tabs, Text, Title } from '@mantine/core'
+import { type GetStaticProps } from 'next'
+import { useTranslation } from 'next-i18next'
+import { useState } from 'react'
+
+import { SearchBox } from '@weareinreach/ui/components/core/SearchBox'
+import { getServerSideTranslations } from '~app/utils/i18n'
+
+const NotFound = () => {
+ const [isLoading, setLoading] = useState(false)
+ const { t } = useTranslation('common')
+
+ return (
+
+
+
+ {/* eslint-disable-next-line i18next/no-literal-string */}
+ 🏝️
+ {t('errors.404-title')}
+
+ {t('errors.404-body')}
+
+
+ {t('common:words.location')}
+ {t('common:words.organization')}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+ return {
+ props: {
+ ...(await getServerSideTranslations(locale, ['common'])),
+ },
+ revalidate: 60 * 60 * 24 * 7,
+ }
+}
+
+export default NotFound
diff --git a/apps/app/src/pages/500.tsx b/apps/app/src/pages/500.tsx
new file mode 100644
index 0000000000..70857c6ab5
--- /dev/null
+++ b/apps/app/src/pages/500.tsx
@@ -0,0 +1,66 @@
+import { Center, Container, rem, Stack, Tabs, Text, Title } from '@mantine/core'
+import * as Sentry from '@sentry/nextjs'
+import { type GetStaticProps, type NextPage, type NextPageContext } from 'next'
+import { useTranslation } from 'next-i18next'
+import { useState } from 'react'
+
+import { SearchBox } from '@weareinreach/ui/components/core/SearchBox'
+// import { getServerSideTranslations } from '~app/utils/i18n'
+
+const ServerError: NextPage = () => {
+ const [isLoading, setLoading] = useState(false)
+ const { t } = useTranslation('common')
+
+ return (
+
+
+
+ {/* eslint-disable-next-line i18next/no-literal-string */}
+ 🔦
+ {t('errors.500-title')}
+
+ {t('errors.500-body')}
+
+
+ {t('common:words.location')}
+ {t('common:words.organization')}
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+ const getServerSideTranslations = await import('../utils/i18n').then((mod) => mod.getServerSideTranslations)
+ return {
+ props: {
+ ...(await getServerSideTranslations(locale, ['common'])),
+ },
+ }
+}
+export const getInitialProps = async (ctx: NextPageContext) => {
+ await Sentry.captureUnderscoreErrorException(ctx)
+}
+
+export default ServerError
diff --git a/apps/app/src/pages/_error.tsx b/apps/app/src/pages/_error.tsx
new file mode 100644
index 0000000000..4cc60d619b
--- /dev/null
+++ b/apps/app/src/pages/_error.tsx
@@ -0,0 +1,19 @@
+import * as Sentry from '@sentry/nextjs'
+import { type NextPageContext } from 'next'
+import NextErrorComponent from 'next/error'
+import { type ComponentProps } from 'react'
+
+const CustomErrorComponent = (props: ComponentProps) => (
+
+)
+
+CustomErrorComponent.getInitialProps = async (contextData: NextPageContext) => {
+ // In case this is running in a serverless function, await this in order to give Sentry
+ // time to send the error before the lambda exits
+ await Sentry.captureUnderscoreErrorException(contextData)
+
+ // This will contain the status code of the response
+ return NextErrorComponent.getInitialProps(contextData)
+}
+
+export default CustomErrorComponent
diff --git a/apps/app/src/types/nextjs-routes.d.ts b/apps/app/src/types/nextjs-routes.d.ts
index b7fe1d71db..371fc7a4e9 100644
--- a/apps/app/src/types/nextjs-routes.d.ts
+++ b/apps/app/src/types/nextjs-routes.d.ts
@@ -11,6 +11,8 @@ declare module "nextjs-routes" {
} from "next";
export type Route =
+ | StaticRoute<"/404">
+ | StaticRoute<"/500">
| StaticRoute<"/account">
| StaticRoute<"/account/reviews">
| StaticRoute<"/account/saved">