feat(web): add error boundary with toast notification for failed requests

Author: raphico

packages/server/src/modules/feedbacks/routes.ts

@@ -51,7 +51,6 @@ const feedbacksRoute: FastifyPluginAsync = async (app) => {
       querystring: feedbackListQuerySchema,
       response: {
         200: feedbackListResponseSchema,
-        404: genericResponseSchema,
       },
     },
     handler: getFeedbackListController,

packages/web/package.json

@@ -22,6 +22,7 @@
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hot-toast": "^2.5.2",
     "react-redux": "^9.2.0",
     "zod": "^3.24.2"
   },

packages/web/src/assets/illustration-error.svg

@@ -0,0 +1,37 @@
+.error-container {
+  display: grid;
+  min-height: 100vh;
+  place-content: center;
+}
+
+.error-card {
+  background-color: var(--clr-pure-white);
+  border-radius: var(--radius);
+  display: grid;
+  text-align: center;
+  place-content: center;
+  place-items: center;
+  padding: 3em 1.5em;
+}
+
+.error-card__desc {
+  max-width: 410px;
+  margin: 0.3em auto 1.5em;
+}
+
+.error-card__title {
+  color: var(--clr-deep-slate-blue);
+  margin-top: 1.25em;
+}
+
+@media (max-width: 480px) {
+  .error-card__title {
+    font-size: var(--fs-500);
+    line-height: 1.63;
+    letter-spacing: -0.25px;
+  }
+
+  .error-card__desc {
+    font-size: var(--fs-100);
+  }
+}

packages/web/src/components/error-boundary.module.css

@@ -0,0 +1,54 @@
+import { Link } from "@tanstack/react-router";
+import { Component, ErrorInfo } from "react";
+import { buttonVariants } from "./button";
+import IllustrationError from "@/assets/illustration-error.svg?react";
+import styles from "./error-boundary.module.css";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  children?: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  static getDerivedStateFromError(_: Error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // You can also log the error to an error reporting service
+    console.error("Uncaught error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div className={styles["error-container"]}>
+          <section className={styles["error-card"]}>
+            <IllustrationError />
+            <h1 className={cn("h1", styles["error-card__title"])}>Oops!</h1>
+            <p className={styles["error-card__desc"]}>
+              It looks like something unexpected happened. We're working to fix
+              it as quickly as possible. Please try again later, or refresh the
+              page if needed
+            </p>
+            <Link to="/" className={buttonVariants["primary"]}>
+              Visit home
+            </Link>
+          </section>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

packages/web/src/components/error-boundary.tsx

@@ -0,0 +1,7 @@
+import { Toaster as ReactHotToast } from "react-hot-toast";
+
+function Toaster({ ...props }: React.ComponentProps<typeof ReactHotToast>) {
+  return <ReactHotToast position="top-center" {...props} />;
+}
+
+export default Toaster;

packages/web/src/components/toast.tsx

@@ -1,6 +1,5 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { User } from "./types";
-import userApi from "./service";
 
 type UserState = {
   data: User | null;
@@ -21,17 +20,6 @@ const userSlice = createSlice({
       state.data = null;
     },
   },
-  extraReducers: (builder) => {
-    builder.addMatcher(
-      userApi.endpoints.getMe.matchFulfilled,
-      (state, action) => {
-        state.data = action.payload;
-      },
-    );
-    builder.addMatcher(userApi.endpoints.getMe.matchRejected, (state) => {
-      state.data = null;
-    });
-  },
 });
 
 export const userReducer = userSlice.reducer;

packages/web/src/features/user/slice.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosError, AxiosRequestConfig } from "axios";
 import { config } from "@/config";
 import { BaseQueryFn } from "@reduxjs/toolkit/query";
+import { clearUser, setUser } from "@/features/user/slice";
 
-console.log(config.apiUrl);
 const instance = axios.create({
   baseURL: config.apiUrl,
   timeout: 5_000,
@@ -17,6 +17,11 @@ const instance = axios.create({
   ],
 });
 
+type HttpBaseQueryError = {
+  status: number;
+  data: { message: string };
+};
+
 const httpBaseQuery =
   (
     { baseUrl }: { baseUrl: string } = { baseUrl: "" },
@@ -29,9 +34,9 @@ const httpBaseQuery =
       headers?: AxiosRequestConfig["headers"];
     },
     unknown,
-    unknown
+    HttpBaseQueryError
   > =>
-  async ({ url, method, data, params, headers }) => {
+  async ({ url, method, data, params, headers }, api) => {
     try {
       const result = await instance({
         url: baseUrl + url,
@@ -40,18 +45,54 @@ const httpBaseQuery =
         params,
         headers,
       });
+
       return {
         data: result,
       };
     } catch (axiosError) {
       const error = axiosError as AxiosError;
-      return {
-        error: {
-          status: error.status,
-          data: error.response?.data || error.message,
-        },
-      };
+
+      if (error.response?.status != 401) {
+        return {
+          error: {
+            status: error.response?.status ?? 500,
+            data: (error.response?.data as { message: string }) || {
+              message: error.message,
+            },
+          },
+        };
+      }
+
+      try {
+        const response = await instance.post("/auth/refresh");
+        api.dispatch(setUser(response.data));
+
+        const retryResult = await instance({
+          url: baseUrl + url,
+          method,
+          data,
+          params,
+          headers,
+        });
+
+        return {
+          data: retryResult.data,
+        };
+      } catch (axiosError) {
+        const error = axiosError as AxiosError;
+        api.dispatch(clearUser());
+
+        return {
+          error: {
+            status: error.response?.status ?? 500,
+            data: (error.response?.data as { message: string }) || {
+              message: error.message,
+            },
+          },
+        };
+      }
     }
   };
 
 export { instance, httpBaseQuery };
+export type { HttpBaseQueryError };

packages/web/src/lib/http/client.ts

@@ -1,37 +1,11 @@
-import type { AxiosError, AxiosResponse } from "axios";
 import { instance } from "./client";
 
-let refreshPromise: Promise<AxiosResponse> | null = null;
-
-async function refreshToken() {
-  if (!refreshPromise) {
-    refreshPromise = instance.post("/auth/refresh").finally(() => {
-      refreshPromise = null;
-    });
-  }
-
-  return refreshPromise;
-}
-
 function setupResponseInterceptors() {
   instance.interceptors.response.use(
     function (response) {
       return Promise.resolve(response.data);
     },
-    async function (error: AxiosError) {
-      if (!error.config || error.config?.url?.includes("refresh")) {
-        return Promise.reject(error);
-      }
-
-      if (error.status == 401) {
-        try {
-          await refreshToken();
-          return instance.request(error.config);
-        } catch (error) {
-          return Promise.reject(error);
-        }
-      }
-
+    async function (error) {
       return Promise.reject(error);
     },
   );

packages/web/src/lib/http/interceptors.ts

@@ -0,0 +1,16 @@
+import type { HttpBaseQueryError } from "./client";
+
+export function isHttpBaseQueryError(
+  error: unknown,
+): error is HttpBaseQueryError {
+  return (
+    typeof error == "object" &&
+    error !== null &&
+    "status" in error &&
+    "data" in error &&
+    typeof error.status == "number" &&
+    typeof error.data == "object" &&
+    error.data !== null &&
+    "message" in error.data
+  );
+}