custom error pages

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": "<Text>Something went wrong! Please try again.</Text>"
     },

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 (
+		<Container>
+			<Stack
+				m={{ base: `${rem(48)} ${rem(0)}`, xs: `${rem(80)} ${rem(0)}`, sm: `${rem(100)} ${rem(0)}` }}
+				align='center'
+				spacing={32}
+			>
+				<Stack spacing={0} align='center'>
+					{/* eslint-disable-next-line i18next/no-literal-string */}
+					<Title order={1}>🏝️</Title>
+					<Title order={1}>{t('errors.404-title')}</Title>
+				</Stack>
+				<Text ta='center'>{t('errors.404-body')}</Text>
+				<Tabs defaultValue='location' w='100%' maw={636}>
+					<Tabs.List grow position='apart'>
+						<Tabs.Tab value='location'>{t('common:words.location')}</Tabs.Tab>
+						<Tabs.Tab value='name'>{t('common:words.organization')}</Tabs.Tab>
+					</Tabs.List>
+					<Tabs.Panel value='location' m={0}>
+						<Center>
+							<SearchBox
+								type='location'
+								loadingManager={{ isLoading, setLoading }}
+								placeholderTextKey='search.location-placeholder-searchby'
+							/>
+						</Center>
+					</Tabs.Panel>
+					<Tabs.Panel value='name' m={0}>
+						<SearchBox
+							type='organization'
+							loadingManager={{ isLoading, setLoading }}
+							placeholderTextKey='search.organization-placeholder-searchby'
+						/>
+					</Tabs.Panel>
+				</Tabs>
+			</Stack>
+		</Container>
+	)
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+	return {
+		props: {
+			...(await getServerSideTranslations(locale, ['common'])),
+		},
+		revalidate: 60 * 60 * 24 * 7,
+	}
+}
+
+export default NotFound

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 (
+		<Container>
+			<Stack
+				m={{ base: `${rem(48)} ${rem(0)}`, xs: `${rem(80)} ${rem(0)}`, sm: `${rem(100)} ${rem(0)}` }}
+				align='center'
+				spacing={32}
+			>
+				<Stack spacing={0} align='center'>
+					{/* eslint-disable-next-line i18next/no-literal-string */}
+					<Title order={1}>🔦</Title>
+					<Title order={1}>{t('errors.500-title')}</Title>
+				</Stack>
+				<Text ta='center'>{t('errors.500-body')}</Text>
+				<Tabs defaultValue='location' w='100%' maw={636}>
+					<Tabs.List grow position='apart'>
+						<Tabs.Tab value='location'>{t('common:words.location')}</Tabs.Tab>
+						<Tabs.Tab value='name'>{t('common:words.organization')}</Tabs.Tab>
+					</Tabs.List>
+					<Tabs.Panel value='location' m={0}>
+						<Center>
+							<SearchBox
+								type='location'
+								loadingManager={{ isLoading, setLoading }}
+								placeholderTextKey='search.location-placeholder-searchby'
+							/>
+						</Center>
+					</Tabs.Panel>
+					<Tabs.Panel value='name' m={0}>
+						<SearchBox
+							type='organization'
+							loadingManager={{ isLoading, setLoading }}
+							placeholderTextKey='search.organization-placeholder-searchby'
+						/>
+					</Tabs.Panel>
+				</Tabs>
+			</Stack>
+		</Container>
+	)
+}
+
+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

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<typeof NextErrorComponent>) => (
+	<NextErrorComponent statusCode={props.statusCode} />
+)
+
+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

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">