style: custom error page (#638)

apps/app/components/core/issues-view.tsx

@@ -411,8 +411,8 @@ export const IssuesView: React.FC<Props> = ({
         data={issueToDelete}
       />
       <TransferIssuesModal
-      handleClose={() => setTransferIssuesModal(false)}
+        handleClose={() => setTransferIssuesModal(false)}
-      isOpen={transferIssuesModal}
+        isOpen={transferIssuesModal}
       />
       <div className="mb-5 -mt-4">
         <div className="flex items-center justify-between gap-2">
@@ -474,7 +474,10 @@ export const IssuesView: React.FC<Props> = ({
                     <span>Completed cycles are not editable.</span>
                   </div>
                   <div>
-                    <PrimaryButton onClick={()=>setTransferIssuesModal(true)} className="flex items-center gap-3 rounded-lg">
+                    <PrimaryButton
+                      onClick={() => setTransferIssuesModal(true)}
+                      className="flex items-center gap-3 rounded-lg"
+                    >
                       <TransferIcon className="h-4 w-4" />
                       <span>Transfer Issues</span>
                     </PrimaryButton>

apps/app/components/workspace/sidebar-dropdown.tsx

@@ -3,19 +3,19 @@ import { Menu, Transition } from "@headlessui/react";
 import { useRouter } from "next/router";
 import Image from "next/image";
 import Link from "next/link";
-import { CheckIcon, ChevronDownIcon, PlusIcon } from "@heroicons/react/24/outline";
+import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 // hooks
 import useUser from "hooks/use-user";
 import useTheme from "hooks/use-theme";
 import useWorkspaces from "hooks/use-workspaces";
+import useToast from "hooks/use-toast";
 // services
 import userService from "services/user.service";
 import authenticationService from "services/authentication.service";
 // components
-import { Avatar, Loader, Tooltip } from "components/ui";
+import { Avatar, Loader } from "components/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
-
 // types
 import { IWorkspace } from "types";
 
@@ -42,6 +42,9 @@ export const WorkspaceSidebarDropdown = () => {
   const { user, mutateUser } = useUser();
   // fetching theme context
   const { collapsed: sidebarCollapse } = useTheme();
+
+  const { setToastAlert } = useToast();
+
   // fetching workspaces
   const { activeWorkspace, workspaces } = useWorkspaces();
 
@@ -54,18 +57,25 @@ export const WorkspaceSidebarDropdown = () => {
         mutateUser();
         router.push(`/${workspace.slug}/`);
       })
-      .catch((err) => console.error(err));
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to navigate to the workspace. Please try again.",
+        })
+      );
   };
 
   const handleSignOut = async () => {
     await authenticationService
       .signOut()
-      .then((response) => {
+      .catch(() =>
-        console.log("user signed out", response);
+        setToastAlert({
-      })
+          type: "error",
-      .catch((error) => {
+          title: "Error!",
-        console.log("Failed to sign out", error);
+          message: "Failed to sign out. Please try again.",
-      })
+        })
+      )
       .finally(() => {
         mutateUser();
         router.push("/signin");

apps/app/pages/_error.js

@@ -17,21 +17,75 @@
  */
 
 import * as Sentry from "@sentry/nextjs";
-import NextErrorComponent from "next/error";
 
-const CustomErrorComponent = ({ statusCode }) => {
+import { useRouter } from "next/router";
-  console.log(statusCode, "statusCode");
+
+// services
+import authenticationService from "services/authentication.service";
+// hooks
+import useToast from "hooks/use-toast";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// ui
+import { PrimaryButton, SecondaryButton } from "components/ui";
+
+const CustomErrorComponent = () => {
+  const router = useRouter();
+
+  const { setToastAlert } = useToast();
+
+  const handleSignOut = async () => {
+    await authenticationService
+      .signOut()
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      )
+      .finally(() => router.push("/signin"));
+  };
 
   return (
-    <p>
+    <DefaultLayout
-      We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified.
+      meta={{
-      We apologize for any inconvenience this may have caused. Please reach out to our engineering
+        title: "Plane - Exception Detected",
-      team at <a href="mailto:support@plane.so">support@plane.so</a> or on our{" "}
+        description: "Exception Detected",
-      <a href="https://discord.com/invite/A92xrEGCge" target="_blank" rel="noopener noreferrer">
+      }}
-        Discord
+    >
-      </a>{" "}
+      <div className="grid h-full place-items-center p-4">
-      server for further assistance.
+        <div className="space-y-8 text-center">
-    </p>
+          <div className="space-y-2">
+            <h3 className="text-lg font-semibold">Exception Detected!</h3>
+            <p className="text-sm text-gray-500 w-1/2 mx-auto">
+              We{"'"}re Sorry! An exception has been detected, and our engineering team has been
+              notified. We apologize for any inconvenience this may have caused. Please reach out to
+              our engineering team at{" "}
+              <a href="mailto:support@plane.so" className="text-theme">
+                support@plane.so
+              </a>{" "}
+              or on our{" "}
+              <a
+                href="https://discord.com/invite/A92xrEGCge"
+                target="_blank"
+                className="text-theme"
+                rel="noopener noreferrer"
+              >
+                Discord
+              </a>{" "}
+              server for further assistance.
+            </p>
+          </div>
+          <div className="flex items-center gap-2 justify-center">
+            <PrimaryButton size="md">Go back</PrimaryButton>
+            <SecondaryButton size="md" onClick={handleSignOut}>
+              Sign out
+            </SecondaryButton>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
   );
 };