Merge pull request #153 from chingu-x/fix/fix-error-messages

Fix/fix error messages
chingu-x · Jun 26, 2024 · b08b52d · b08b52d
2 parents 10bd212 + 0e6ddee
commit b08b52d
Show file tree

Hide file tree

Showing 21 changed files with 337 additions and 57 deletions.
diff --git a/src/app/(auth)/authService.ts b/src/app/(auth)/authService.ts
@@ -114,7 +114,7 @@ async function asyncSignIn(
     );
 
     if (!res.ok) {
-      throw new Error(res.statusText);
+      throw new Error(`Status code: ${res.status}, Message: ${res.statusText}`);
     }
 
     const accessToken = res.headers.getSetCookie()[0].split("access_token=")[1];

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx b/src/app/(main)/dashboard/components/voyage-dashboard/VoyageDashboard.tsx
@@ -18,6 +18,8 @@ import VoyageSupport from "@/app/(main)/dashboard/components/shared/VoyageSuppor
 import EmptySprintProvider from "@/app/(main)/my-voyage/[teamId]/sprints/providers/EmptySprintProvider";
 import { getUser } from "@/utils/getUser";
 import type { Sprint, Voyage } from "@/store/features/sprint/sprintSlice";
+import { type ErrorType } from "@/utils/error";
+import ErrorComponent from "@/components/Error";
 
 interface VoyageDashboardProps {
   teamId?: string;
@@ -37,6 +39,8 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
   let meetingsData: EventList[] = [];
   let voyageNumber: number | null = null;
   let voyageData: Voyage = {} as Voyage;
+  let errorMessage: string | undefined;
+  let errorType: ErrorType | undefined;
 
   if (teamId !== undefined) {
     const data = await getDashboardData(user, error, Number(teamId));
@@ -45,6 +49,12 @@ async function VoyageDashboard({ teamId }: VoyageDashboardProps) {
     meetingsData = data.meetingsData;
     voyageNumber = data.voyageNumber;
     voyageData = data.voyageData;
+    errorMessage = data.errorMessage;
+    errorType = data.errorType;
+  }
+
+  if (errorMessage && errorType) {
+    return <ErrorComponent errorType={errorType} message={errorMessage} />;
   }
 
   return (

diff --git a/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts b/src/app/(main)/dashboard/components/voyage-dashboard/getDashboardData.ts
@@ -7,6 +7,7 @@ import type { User } from "@/store/features/user/userSlice";
 import { fetchMeeting } from "@/app/(main)/my-voyage/[teamId]/sprints/components/SprintWrapper";
 import type { AppError } from "@/types/types";
 import convertStringToDate from "@/utils/convertStringToDate";
+import { ErrorType } from "@/utils/error";
 
 interface GetDashboardDataResponse {
   currentSprintNumber: number | null;
@@ -16,6 +17,7 @@ interface GetDashboardDataResponse {
   voyageNumber: number | null;
   voyageData: Voyage;
   errorMessage?: string;
+  errorType?: ErrorType;
 }
 
 export type EventList = {
@@ -33,6 +35,8 @@ export const getDashboardData = async (
   let sprintsData: Sprint[] = [];
   let voyageNumber: number | null = null;
   let voyageData: Voyage = {} as Voyage;
+  let errorMessage: string | undefined;
+  let errorType: ErrorType | undefined;
 
   const { errorResponse, data } = await getCurrentVoyageData({
     user,
@@ -51,14 +55,24 @@ export const getDashboardData = async (
       voyageNumber: null,
       voyageData: {} as Voyage,
       errorMessage: errorResponse,
+      errorType: ErrorType.FETCH_VOYAGE_DATA,
     };
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      throw new Error(`Error: ${error.message}`);
+      return {
+        currentSprintNumber: null,
+        sprintsData: [],
+        user: null,
+        meetingsData: [],
+        voyageNumber: null,
+        voyageData: {} as Voyage,
+        errorMessage: error.message,
+        errorType: ErrorType.FETCH_SPRINT,
+      };
     }
 
     sprintsData = res!.sprints;
@@ -79,16 +93,18 @@ export const getDashboardData = async (
     sprint: number;
   }[] = [];
 
-  const fetchMeetingsPromises = sprintsData.map((sprint) =>
-    fetchMeeting({
-      sprintNumber: sprint.number,
-      meetingId: sprint.teamMeetings[0]?.id,
-    }),
-  );
+  const fetchMeetingsPromises = sprintsData
+    .filter((sprint) => sprint.teamMeetings.length)
+    .map((sprint) =>
+      fetchMeeting({
+        sprintNumber: sprint.number,
+        meetingId: sprint.teamMeetings[0]?.id,
+      }),
+    );
 
   const fetchMeetingsResults = await Promise.all(fetchMeetingsPromises);
 
-  fetchMeetingsResults.forEach(([res]) => {
+  fetchMeetingsResults.forEach(([res, error]) => {
     if (res) {
       const { title, dateTime, meetingLink, sprint } = res;
       const parsedDate = convertStringToDate(dateTime, user?.timezone ?? "");
@@ -100,7 +116,8 @@ export const getDashboardData = async (
         sprint: sprint.number,
       });
     } else if (error) {
-      return `Error: ${error.message}`;
+      errorMessage = error.message;
+      errorType = ErrorType.FETCH_MEETING;
     }
   });
 
@@ -111,5 +128,7 @@ export const getDashboardData = async (
     meetingsData,
     voyageNumber,
     voyageData,
+    errorType,
+    errorMessage,
   };
 };
diff --git a/src/app/(main)/error.tsx b/src/app/(main)/error.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+import ErrorComponent from "@/components/Error";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+  }, [error]);
+
+  return (
+    <ErrorComponent
+      message="Something went wrong. Please contact support"
+      reset={reset}
+    />
+  );
+}
diff --git a/src/app/(main)/my-voyage/[teamId]/directory/components/DirectoryComponentWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/directory/components/DirectoryComponentWrapper.tsx
@@ -1,8 +1,13 @@
 import { redirect } from "next/navigation";
+
 import DirectoryProvider from "./DirectoryProvider";
 import TeamMember from "./TeamMember";
-import { type TeamDirectory } from "@/store/features/directory/directorySlice";
+
 import Banner from "@/components/banner/Banner";
+import ErrorComponent from "@/components/Error";
+
+import { type TeamDirectory } from "@/store/features/directory/directorySlice";
+
 import { getAccessToken } from "@/utils/getCookie";
 import { type AsyncActionResponse, handleAsync } from "@/utils/handleAsync";
 import { GET } from "@/utils/requests";
@@ -12,6 +17,7 @@ import { getUser } from "@/utils/getUser";
 import { getTimezone } from "@/utils/getTimezone";
 import VoyagePageBannerContainer from "@/components/banner/VoyagePageBannerContainer";
 import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
+import { ErrorType } from "@/utils/error";
 
 interface FetchTeamDirectoryProps {
   teamId: number;
@@ -86,14 +92,24 @@ export default async function DirectoryComponentWrapper({
   });
 
   if (errorResponse) {
-    return errorResponse;
+    return (
+      <ErrorComponent
+        errorType={ErrorType.FETCH_VOYAGE_DATA}
+        message={errorResponse}
+      />
+    );
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      return `Error: ${error.message}`;
+      return (
+        <ErrorComponent
+          errorType={ErrorType.FETCH_TEAM_DIRECTORY}
+          message={error.message}
+        />
+      );
     }
 
     teamDirectory = res!;

diff --git a/src/app/(main)/my-voyage/[teamId]/features/components/FeaturesComponentWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/features/components/FeaturesComponentWrapper.tsx
@@ -1,18 +1,23 @@
 import { redirect } from "next/navigation";
+
 import FeaturesProvider from "./FeaturesProvider";
 import FeaturesContainer from "./FeaturesContainer";
-import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
-import { getUser } from "@/utils/getUser";
-import { getAccessToken } from "@/utils/getCookie";
+import VoyagePageBannerContainer from "@/components/banner/VoyagePageBannerContainer";
+import Banner from "@/components/banner/Banner";
+import ErrorComponent from "@/components/Error";
+
 import {
   type Features,
   type FeaturesList,
 } from "@/store/features/features/featuresSlice";
+
+import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
+import { getUser } from "@/utils/getUser";
+import { getAccessToken } from "@/utils/getCookie";
 import { GET } from "@/utils/requests";
 import { CacheTag } from "@/utils/cacheTag";
 import { type AsyncActionResponse, handleAsync } from "@/utils/handleAsync";
-import VoyagePageBannerContainer from "@/components/banner/VoyagePageBannerContainer";
-import Banner from "@/components/banner/Banner";
+import { ErrorType } from "@/utils/error";
 
 function transformData(features: Features[]): FeaturesList[] {
   const transformedData: FeaturesList[] = [
@@ -117,14 +122,24 @@ export default async function FeaturesComponentWrapper({
   });
 
   if (errorResponse) {
-    return errorResponse;
+    return (
+      <ErrorComponent
+        errorType={ErrorType.FETCH_VOYAGE_DATA}
+        message={errorResponse}
+      />
+    );
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      return `Error: ${error.message}`;
+      return (
+        <ErrorComponent
+          errorType={ErrorType.FETCH_FEATURES}
+          message={error.message}
+        />
+      );
     }
 
     features = res!;

diff --git a/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/ideation/components/IdeationComponentWrapper.tsx
@@ -8,6 +8,8 @@ import VoteCard from "./VoteCard";
 import { type FetchIdeationsProps } from "@/app/(main)/my-voyage/[teamId]/ideation/ideationService";
 import Banner from "@/components/banner/Banner";
 import VoyagePageBannerContainer from "@/components/banner/VoyagePageBannerContainer";
+import ErrorComponent from "@/components/Error";
+
 import { type IdeationData } from "@/store/features/ideation/ideationSlice";
 import { CacheTag } from "@/utils/cacheTag";
 import { getAccessToken } from "@/utils/getCookie";
@@ -16,6 +18,7 @@ import { getUser } from "@/utils/getUser";
 import { handleAsync, type AsyncActionResponse } from "@/utils/handleAsync";
 import { GET } from "@/utils/requests";
 import routePaths from "@/utils/routePaths";
+import { ErrorType } from "@/utils/error";
 
 // import { ideation } from "./fixtures/ideation";
 
@@ -62,14 +65,24 @@ export default async function IdeationComponentWrapper({
   });
 
   if (errorResponse) {
-    return errorResponse;
+    return (
+      <ErrorComponent
+        errorType={ErrorType.FETCH_VOYAGE_DATA}
+        message={errorResponse}
+      />
+    );
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      return `Error: ${error.message}`;
+      return (
+        <ErrorComponent
+          errorType={ErrorType.FETCH_IDEATIONS}
+          message={error.message}
+        />
+      );
     }
 
     projectIdeas = res!;

diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/EmptySprintWrapper.tsx
@@ -17,6 +17,8 @@ import {
   getSprintCheckinIsStatus,
   getVoyageProjectStatus,
 } from "@/utils/getFormStatus";
+import { ErrorType } from "@/utils/error";
+import ErrorComponent from "@/components/Error";
 
 function getMeeting(sprints: Sprint[], sprintNumber: number) {
   const sprint = sprints.find((sprint) => sprint.number === sprintNumber);
@@ -52,14 +54,24 @@ export default async function EmptySprintWrapper({
   });
 
   if (errorResponse) {
-    return errorResponse;
+    return (
+      <ErrorComponent
+        errorType={ErrorType.FETCH_VOYAGE_DATA}
+        message={errorResponse}
+      />
+    );
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      return `Error: ${error.message}`;
+      return (
+        <ErrorComponent
+          errorType={ErrorType.FETCH_SPRINT}
+          message={error.message}
+        />
+      );
     }
     voyageData = res!;
   } else {

diff --git a/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx b/src/app/(main)/my-voyage/[teamId]/sprints/components/RedirectToCurrentSprintWrapper.tsx
@@ -15,6 +15,8 @@ import { type AsyncActionResponse, handleAsync } from "@/utils/handleAsync";
 import { type Sprint } from "@/store/features/sprint/sprintSlice";
 import { getCurrentVoyageData } from "@/utils/getCurrentVoyageData";
 import routePaths from "@/utils/routePaths";
+import { ErrorType } from "@/utils/error";
+import ErrorComponent from "@/components/Error";
 
 export async function fetchSprints({
   teamId,
@@ -56,14 +58,24 @@ export default async function RedirectToCurrentSprintWrapper({
   });
 
   if (errorResponse) {
-    return errorResponse;
+    return (
+      <ErrorComponent
+        errorType={ErrorType.FETCH_VOYAGE_DATA}
+        message={errorResponse}
+      />
+    );
   }
 
   if (data) {
     const [res, error] = data;
 
     if (error) {
-      return `Error: ${error.message}`;
+      return (
+        <ErrorComponent
+          errorType={ErrorType.FETCH_SPRINT}
+          message={error.message}
+        />
+      );
     }
     const { teamMeetings, number } = getCurrentSprint(res!.sprints) as Sprint;
     currentSprintNumber = number;