feat: Added a better error page for the case of a client/server side …

…error
The-Creative-Programming-Group · Jan 12, 2024 · 6cfbd27 · 6cfbd27 · vercel · Jan 12, 2024
1 parent 5ce22a6
commit 6cfbd27
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/apps/web/src/assets/error-page-image.png b/apps/web/src/assets/error-page-image.png
diff --git a/apps/web/src/pages/_error/index.tsx b/apps/web/src/pages/_error/index.tsx
@@ -0,0 +1,38 @@
+import type { NextPage, NextPageContext } from "next";
+import Head from "next/head";
+import Image from "next/image";
+
+import errorImage from "~/assets/error-page-image.png";
+
+interface ErrorProps {
+  statusCode: number | undefined;
+}
+
+const Error: NextPage<ErrorProps> = ({ statusCode }) => {
+  return (
+    <>
+      <Head>
+        <title>Weather.io - Error</title>
+      </Head>
+      <div className="flex h-screen w-full flex-col items-center justify-center">
+        <Image src={errorImage} alt="Error" />
+        <p className="text-3xl font-bold">Error: We are sorry</p>
+        <p>
+          {statusCode
+            ? `An error ${statusCode} occurred on server`
+            : "An error occurred on client"}
+        </p>
+      </div>
+    </>
+  );
+};
+
+Error.getInitialProps = async ({
+  res,
+  err,
+}: NextPageContext): Promise<ErrorProps> => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+  return { statusCode };
+};
+
+export default Error;