fix: handle data fetch errors correctly

taskforcesh · Sep 22, 2022 · 082484e · 082484e
1 parent c16f7ff
commit 082484e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 43 deletions.
diff --git a/packages/dashboard/src/App.tsx b/packages/dashboard/src/App.tsx
@@ -1,5 +1,12 @@
-import { Component, lazy, createResource, Show } from "solid-js";
-import { Routes, Route, useNavigate } from "@solidjs/router";
+import {
+  Component,
+  lazy,
+  createResource,
+  Show,
+  ErrorBoundary,
+  createMemo,
+} from "solid-js";
+import { Routes, Route, useNavigate, useLocation } from "@solidjs/router";
 
 const Login = lazy(() => import("./components/login"));
 const Dashboard = lazy(() => import("./components/dashboard"));
@@ -21,6 +28,13 @@ import Hooks from "./components/Hooks";
 import { TeamsService } from "./services/teams";
 import { HooksService } from "./services/hooks";
 import { TokensService } from "./services/tokens";
+import {
+  Alert,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+  CloseButton,
+} from "@hope-ui/solid";
 
 function TokensData({ params, location, navigate, data }: any) {
   const [tokens, { mutate }] = createResource(() => TokensService.listTokens());
@@ -80,54 +94,84 @@ function HooksData({ params, location, navigate, data }: any) {
 
 const App: Component = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+
+  const pathname = createMemo(() => location.pathname);
 
   if (!sessionState().session?.user) {
     navigate("/login", { replace: true });
   }
 
   return (
     <div class={styles.App}>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-
-        <Show when={sessionState().session?.user} fallback={<></>}>
-          <Route
-            path="/about"
-            element={<div>This site was made with Solid</div>}
-          />
-          <Route path="/" component={Dashboard} data={UserOrganizations}>
-            <Route path="/" component={Profile} data={TokensData} />
-            <Route path="/:scope" component={Profile} data={TokensData} />
-
+      <ErrorBoundary
+        fallback={(err, reset) => {
+          console.error({ err });
+          if (err.name == 401) {
+            navigate(
+              `/login${pathname().length > 1 ? "?redirect=" + pathname() : ""}`,
+              {
+                replace: true,
+              }
+            );
+            return <></>;
+          } else {
+            return (
+              <Alert status="danger">
+                <AlertIcon mr="$2_5" />
+                <AlertTitle mr="$2_5">
+                  There was some unexpected error{" "}
+                </AlertTitle>
+                <AlertDescription>
+                  Please close this refresh the page to retry.
+                </AlertDescription>
+              </Alert>
+            );
+          }
+        }}
+      >
+        <Routes>
+          <Route path="/login" element={<Login />} />
+
+          <Show when={sessionState().session?.user} fallback={<></>}>
             <Route
-              path="/:scope/packages"
-              component={Packages}
-              data={ScopePackages}
+              path="/about"
+              element={<div>This site was made with Solid</div>}
             />
-
-            <Route path="/:scope/users" component={Users} data={ScopeUsers} />
-            <Route
-              path="/:scope/teams"
-              component={Teams}
-              data={ScopeTeams}
-            ></Route>
-
-            <Route
-              path="/:scope/teams/:team/members"
-              component={TeamMembers}
-              data={TeamMembersData}
-            />
-
-            <Route
-              path="/:scope/teams/:team/packages"
-              component={TeamPackages}
-              data={TeamPackagesData}
-            />
-
-            <Route path="/:scope/hooks" component={Hooks} data={HooksData} />
-          </Route>
-        </Show>
-      </Routes>
+            <Route path="/" component={Dashboard} data={UserOrganizations}>
+              <Route path="/" component={Profile} data={TokensData} />
+              <Route path="/:scope" component={Profile} data={TokensData} />
+
+              <Route
+                path="/:scope/packages"
+                component={Packages}
+                data={ScopePackages}
+              />
+
+              <Route path="/:scope/users" component={Users} data={ScopeUsers} />
+              <Route
+                path="/:scope/teams"
+                component={Teams}
+                data={ScopeTeams}
+              ></Route>
+
+              <Route
+                path="/:scope/teams/:team/members"
+                component={TeamMembers}
+                data={TeamMembersData}
+              />
+
+              <Route
+                path="/:scope/teams/:team/packages"
+                component={TeamPackages}
+                data={TeamPackagesData}
+              />
+
+              <Route path="/:scope/hooks" component={Hooks} data={HooksData} />
+            </Route>
+          </Show>
+        </Routes>
+      </ErrorBoundary>
     </div>
   );
 };

diff --git a/packages/dashboard/src/components/Login.tsx b/packages/dashboard/src/components/Login.tsx
@@ -93,13 +93,14 @@ const Login: Component = () => {
             >
               Login
             </button>
-
+            {/*
             <a
               class="inline-block align-baseline font-bold text-sm text-orange-400 hover:text-orange-600"
               href="#"
             >
               Forgot password?
             </a>
+            */}
           </div>
         </form>
         <p class="text-center text-gray-500 text-xs">

diff --git a/packages/dashboard/src/services/api.ts b/packages/dashboard/src/services/api.ts
@@ -34,7 +34,9 @@ export class Api {
         title: "Error",
         description: response.statusText,
       });
-      throw new Error(`${response.statusText}`);
+      const err = new Error(response.statusText);
+      err.name = response.status.toString();
+      throw err;
     }
   }