Reset error on page change

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

.gitignore

@@ -1,3 +1,4 @@
 bin/
 node_modules/
 .turbo
+.vscode

apps/console2/src/components/PageError.tsx

@@ -1,6 +1,7 @@
-import { useRouteError } from "react-router";
+import { useLocation, useRouteError } from "react-router";
 import { IconPageCross } from "@probo/ui";
 import { useTranslate } from "@probo/i18n";
+import { useEffect, useRef } from "react";
 
 const classNames = {
   wrapper: "py-10 text-center space-y-2 ",
@@ -8,9 +9,22 @@ const classNames = {
   description: "text-base text-txt-tertiary",
 };
 
-export function PageError() {
+type Props = {
+  resetErrorBoundary: () => void;
+};
+
+export function PageError({ resetErrorBoundary }: Props) {
   const error = useRouteError();
   const { __ } = useTranslate();
+  const location = useLocation();
+  const baseLocation = useRef(location);
+
+  // Reset error boundary on page change
+  useEffect(() => {
+    if (location.pathname !== baseLocation.current.pathname) {
+      resetErrorBoundary();
+    }
+  }, [location, resetErrorBoundary]);
 
   if (!error) {
     return (

apps/console2/src/routes.tsx

@@ -1,13 +1,20 @@
 import {
   createBrowserRouter,
   Navigate,
+  redirect,
   useLoaderData,
   useRouteError,
   type RouteObject,
 } from "react-router";
 import { MainLayout } from "./layouts/MainLayout";
 import { AuthLayout, CenteredLayout, CenteredLayoutSkeleton } from "@probo/ui";
-import { lazy, Suspense, type FC, type LazyExoticComponent } from "react";
+import {
+  Fragment,
+  lazy,
+  Suspense,
+  type FC,
+  type LazyExoticComponent,
+} from "react";
 import {
   relayEnvironment,
   UnAuthenticatedError,
@@ -25,8 +32,9 @@ import { frameworkRoutes } from "./routes/frameworkRoutes.ts";
 import { PageError } from "./components/PageError.tsx";
 import { taskRoutes } from "./routes/taskRoutes.ts";
 
-function ErrorBoundary() {
+function ErrorBoundary(props) {
   const error = useRouteError();
+
   if (error instanceof UnAuthenticatedError) {
     return <Navigate to="/auth/login" />;
   }
@@ -74,6 +82,13 @@ const routes = [
     Component: MainLayout,
     ErrorBoundary: ErrorBoundary,
     children: [
+      {
+        path: "",
+        loader: () => {
+          throw redirect(`tasks`);
+        },
+        Component: Fragment,
+      },
       {
         path: "settings",
         fallback: PageSkeleton,