feat: handle 500 error

app/error.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { NavigateBack } from "@/components/common/NavigateBack";
+import Image from "next/image";
+import { useEffect } from "react";
+
+export default function Error({ error }: { error: Error }) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col justify-center items-center gap-4 h-[640px]">
+      <Image width={240} height={120} src="/500.png" alt="derpy hooves" />
+      <h2 className="text-3xl">shit broke</h2>
+      <h3>{String(error)}</h3>
+      <NavigateBack />
+    </div>
+  );
+}