feat: added error page and not found page handler

frontend-v2/src/components/navigation/RegionSelect.tsx

@@ -1,6 +1,6 @@
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useLocation, useNavigate } from "@tanstack/react-router";
+import { useLocation } from "@tanstack/react-router";
 
 import { Modal, ModalContent, ModalTrigger, Select, SelectItem } from "@app/components/v2";
 import { isInfisicalCloud } from "@app/helpers/platform";
@@ -73,11 +73,10 @@ const regions = [
 ];
 
 export const RegionSelect = () => {
-  const navigate = useNavigate();
   const location = useLocation();
 
   const handleRegionSelect = (value: Region) => {
-    navigate({ to: `https://${value}.infisical.com/${location.pathname}` });
+    window.location.assign(`https://${value}.infisical.com/${location.pathname}`);
   };
 
   const shouldDisplay =

frontend-v2/src/hooks/api/reactQuery.tsx

@@ -27,9 +27,7 @@ export const queryClient = new QueryClient({
     onError: (error) => {
       if (axios.isAxiosError(error)) {
         const serverResponse = error.response?.data as TApiErrors;
-        console.log(serverResponse);
         if (serverResponse?.error === ApiErrorTypes.ValidationError) {
-          console.log("entered");
           createNotification(
             {
               title: "Validation Error",

frontend-v2/src/main.tsx

@@ -5,6 +5,8 @@ import NProgress from "nprogress";
 
 import { ContentLoader } from "./components/v2";
 import { queryClient } from "./hooks/api/reactQuery";
+import { ErrorPage } from "./pages/public/ErrorPage/ErrorPage";
+import { NotFoundPage } from "./pages/public/NotFoundPage/NotFoundPage";
 // Import the generated route tree
 import { routeTree } from "./routeTree.gen";
 
@@ -29,7 +31,9 @@ const router = createRouter({
     <div className="bg-bunker-800">
       <ContentLoader />
     </div>
-  )
+  ),
+  defaultNotFoundComponent: NotFoundPage,
+  defaultErrorComponent: ErrorPage
 });
 
 router.subscribe("onBeforeLoad", ({ pathChanged }) => {

frontend-v2/src/pages/middlewares/restrict-login-signup.tsx

@@ -16,6 +16,11 @@ export const Route = createFileRoute("/_restrict-login-signup")({
     middlewares: [stripSearchParams({ callback_port: undefined })]
   },
   beforeLoad: async ({ context, location, search }) => {
+    if (!context.serverConfig.initialized) {
+      if (location.pathname.endsWith("/admin/signup")) return;
+      throw redirect({ to: "/admin/signup" });
+    }
+
     const data = await context.queryClient
       .fetchQuery({
         queryKey: authKeys.getAuthToken,

frontend-v2/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx

@@ -58,7 +58,6 @@ export const AccessManagementPage = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
         <p className="mb-4 mr-4 text-3xl font-semibold text-white">Organization Access Control</p>

frontend-v2/src/pages/public/ErrorPage/ErrorPage.tsx

@@ -0,0 +1,62 @@
+import { faBugs, faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ErrorComponentProps, Link } from "@tanstack/react-router";
+import { AxiosError } from "axios";
+
+import { Button } from "@app/components/v2";
+
+export const ErrorPage = ({ error }: ErrorComponentProps) => {
+  return (
+    <div className="flex h-screen w-screen items-center justify-center bg-mineshaft-900">
+      <div className="flex max-w-3xl flex-col rounded-md border border-mineshaft-600 bg-mineshaft-800 p-8 text-center text-mineshaft-200">
+        <FontAwesomeIcon icon={faBugs} className="my-2 inline text-6xl" />
+        <p>
+          Something went wrong. Please contact{" "}
+          <a
+            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            target="_blank"
+            rel="noopener noreferrer"
+            href="mailto:[email protected]"
+          >
+            support@infisical.com
+          </a>
+          , or{" "}
+          <a
+            href="https://infisical.com/slack"
+            className="inline cursor-pointer text-mineshaft-100 underline decoration-primary-500 underline-offset-4 opacity-80 duration-200 hover:opacity-100"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            join our Slack community
+          </a>{" "}
+          if the issue persists.
+        </p>
+        <Link to="/organization/secret-manager/overview">
+          <Button className="mt-4" size="xs">
+            <FontAwesomeIcon icon={faHome} className="mr-2" />
+            Back To Home
+          </Button>
+        </Link>
+        {error?.message && (
+          <>
+            <div className="my-4 h-px w-full bg-mineshaft-600" />
+            <p className="thin-scrollbar max-h-44 w-full overflow-auto text-ellipsis rounded-md bg-mineshaft-700 p-2">
+              <code className="text-xs">
+                {window.location.pathname}
+                <br />
+                {error.name}
+                <br />
+                {error.message}
+              </code>
+              <code className="font-mono text-xs">
+                {error instanceof AxiosError && (
+                  <div className="mt-4">{JSON.stringify(error.response?.data)}</div>
+                )}
+              </code>
+            </p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/public/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,33 @@
+import { Helmet } from "react-helmet";
+import { Link } from "@tanstack/react-router";
+
+export const NotFoundPage = () => {
+  return (
+    <div className="flex flex-col justify-between bg-bunker-800 md:h-screen">
+      <Helmet>
+        <title>Infisical | Page Not Found</title>
+      </Helmet>
+      <div className="flex h-screen w-screen flex-col items-center justify-center text-gray-200">
+        <p className="mt-32 text-4xl">Oops, something went wrong</p>
+        <p className="mb-1 mt-2 text-lg">
+          Think this is a mistake? Email{" "}
+          <a className="text-primary underline underline-offset-4" href="mailto:[email protected]">
+            team@infisical.com
+          </a>{" "}
+          and we`ll fix it!{" "}
+        </p>
+        <Link to="/organization/secret-manager/overview">
+          <div className="diration-200 mt-8 cursor-default rounded-md bg-mineshaft-500 px-4 py-2 font-semibold hover:bg-primary hover:text-black">
+            Go to Dashboard
+          </div>
+        </Link>
+        <img
+          src="/images/dragon-404.svg"
+          height={554}
+          width={942}
+          alt="infisical dragon - page not found"
+        />
+      </div>
+    </div>
+  );
+};

frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx

@@ -106,8 +106,6 @@ export const AccessApprovalRequest = ({
     {}
   );
 
-  console.log("membersGroupById", membersGroupById);
-
   const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
   const [requestedByFilter, setRequestedByFilter] = useState<string | undefined>(undefined);
   const [envFilter, setEnvFilter] = useState<string | undefined>(undefined);

frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsElastiCacheInputForm.tsx

@@ -71,7 +71,7 @@ export const AwsElastiCacheInputForm = ({
 }: Props) => {
   const {
     control,
-    formState: { isSubmitting, errors },
+    formState: { isSubmitting },
     handleSubmit
   } = useForm<TForm>({
     resolver: zodResolver(formSchema),
@@ -93,7 +93,6 @@ export const AwsElastiCacheInputForm = ({
 
   const createDynamicSecret = useCreateDynamicSecret();
 
-  console.log("formState", errors);
   const handleCreateDynamicSecret = async ({ name, maxTTL, provider, defaultTTL }: TForm) => {
     // wait till previous request is finished
     if (createDynamicSecret.isPending) return;

frontend-v2/src/pages/secret-manager/integrations/route-vercel-oauth-redirect.tsx

@@ -11,7 +11,6 @@ export const Route = createFileRoute(
 )({
   validateSearch: zodValidator(VercelOAuthCallbackPageQueryParamsSchema),
   beforeLoad: ({ search }) => {
-    console.log("reached");
     const projectId = localStorageService.getIintegrationProjectId();
     if (!projectId) {
       createNotification({

frontend-v2/vite.config.ts

@@ -22,14 +22,16 @@ const virtualRouteFileChangeReloadPlugin: PluginOption = {
 // https://vite.dev/config/
 export default defineConfig({
   server: {
-    proxy: {
+    host: true,
-      "/api": {
+    port: 3000
-        target: "http://localhost:8080",
+    // proxy: {
-        changeOrigin: true,
+    //   "/api": {
-        secure: false,
+    //     target: "http://localhost:8080",
-        ws: true
+    //     changeOrigin: true,
-      }
+    //     secure: false,
-    }
+    //     ws: true
+    //   }
+    // }
   },
   plugins: [
     tsconfigPaths(),