fix: Customize error page

reacherhq · Jan 3, 2024 · d554f53 · d554f53 · vercel · Jan 3, 2024
1 parent 3a98a10
commit d554f53
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -3,11 +3,16 @@
 import * as Sentry from "@sentry/nextjs";
 import Error from "next/error";
 import { useEffect } from "react";
+import logo from "../assets/logo/reacher-64.png";
+import Image from "next/image";
+import Link from "next/link";
+import { Button } from "@geist-ui/react";
 
 export default function GlobalError({
 	error,
 }: {
 	error: Error & { digest?: string };
+	reset: () => void;
 }) {
 	useEffect(() => {
 		Sentry.captureException(error);
@@ -16,12 +21,18 @@ export default function GlobalError({
 	return (
 		<html>
 			<body>
-				<h2>
-					Something went wrong. Please email a screenshot of this page
-					to [email protected], thank you!
-				</h2>
-				<p>Error: {JSON.stringify(error)}</p>
-				<p>{error.digest}</p>
+				<div className="container text-center">
+					<Image alt="logo" src={logo} />
+					<h2>
+						Something went wrong. Please email a screenshot of this
+						page to [email protected], thank you!
+					</h2>
+					<p>Error: {JSON.stringify(error)}</p>
+					<p>{error.digest}</p>
+					<Link href="/">
+						<Button type="secondary">Go home</Button>
+					</Link>
+				</div>
 			</body>
 		</html>
 	);

diff --git a/src/app/global.css b/src/app/global.css
@@ -20,6 +20,12 @@ button {
  * Helpers
  */
 
+.container {
+	max-width: 800px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
 .align-center {
 	align-items: center;
 }

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Button } from "@geist-ui/react";
+import logo from "../assets/logo/reacher-512.png";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function NotFound() {
+	return (
+		<html>
+			<body>
+				<div
+					className="container text-center"
+					style={{ paddingTop: 200 }}
+				>
+					<Image alt="logo" src={logo} width={64} />
+					<h1>404</h1>
+					<p>
+						Something went wrong. Please email a screenshot of this
+						page to [email protected], thank you!
+					</p>
+					<Link href="/">
+						<Button type="secondary">Go home</Button>
+					</Link>
+				</div>
+			</body>
+		</html>
+	);
+}