Fix fetching error and add safe fetch (#126)

Author: ipapandinas

api/client.ts

@@ -12,13 +12,23 @@ export default class APIClient {
 
   private async request<T>(url: string, options: RequestInit): Promise<T> {
     const response = await fetch(`${this.baseURL}${url}`, options);
+
+    const contentType = response.headers.get("content-type");
+    let responseBody;
+    if (contentType && contentType.includes("application/json")) {
+      responseBody = await response.json();
+    } else {
+      responseBody = await response.text();
+    }
+
     if (!response.ok) {
       const error = new Error("HTTP Error") as any;
       error.status = response.status;
-      error.response = await response.json();
+      error.response = responseBody;
       throw error;
     }
-    return (await response.json()) as T;
+
+    return responseBody as T;
   }
 
   public get<T>(url: string, options: Options = {}): Promise<T> {

api/core/_client.ts

@@ -1,5 +1,5 @@
-import { prepareUrl, sanitizeUrl } from "@/utils/url";
 import APIClient from "@/api/client";
+import { prepareUrl, sanitizeUrl } from "@/utils/url";
 
 const CORE_API_URL = sanitizeUrl(process.env.NEXT_PUBLIC_API_URL || "");
 
@@ -8,12 +8,20 @@ export async function fetchFromApi<T>(
   queryParams: Record<string, any>,
   tag?: string,
 ): Promise<T> {
+  const url = prepareUrl(endpoint, queryParams);
+  const config = tag ? { tag } : { noStoreCache: true };
+
   try {
-    const url = prepareUrl(endpoint, queryParams);
-    const config = tag ? { tag } : { noStoreCache: true };
     return await coreApiClient.get<T>(url, config);
-  } catch (error) {
-    console.error(`Error fetching data from ${endpoint}:`, error);
+  } catch (error: any) {
+    if (error?.response) {
+      console.error(`[fetchFromApi] Error in ${endpoint}:`, {
+        status: error.status,
+        response: error.response,
+      });
+    } else {
+      console.error(`[fetchFromApi] Unknown error in ${endpoint}:`, error);
+    }
     throw error;
   }
 }

app/explore/[slug]/layout.tsx

@@ -4,6 +4,8 @@ import { container } from "@/components/primitives";
 import { FiltersProvider } from "@/contexts/filters";
 import { decodingSlug } from "@/utils/url";
 import { getFilterOptions } from "@/lib/filters";
+import { safeFetch } from "@/utils/error";
+import { initFilterOptions } from "@/utils/filters";
 
 export default async function ExploreLayout(
   props: {
@@ -17,7 +19,12 @@ export default async function ExploreLayout(
     children
   } = props;
 
-  const filterOptions = await getFilterOptions();
+  const filterOptions = await safeFetch(
+    () => getFilterOptions(),
+    "ExploreLayout: getFilterOptions",
+    initFilterOptions(),
+    { params },
+  );
   const decodedSlug = decodeURIComponent(params.slug);
   const filters = decodingSlug(decodedSlug, filterOptions);
 

app/explore/[slug]/page.tsx

@@ -3,6 +3,8 @@ import InfiniteTable from "@/components/table/infinite-table";
 import { filtersToTasksQuery, getFilterOptions } from "@/lib/filters";
 import { decodingSlug } from "@/utils/url";
 import { fetchTasks } from "@/lib/api/tasks";
+import { initFilterOptions } from "@/utils/filters";
+import { safeFetch } from "@/utils/error";
 
 interface IProps {
   params: Promise<{ slug: string }>;
@@ -27,7 +29,12 @@ export async function generateMetadata(props: IProps): Promise<Metadata> {
 
 export default async function ExplorePage(props: IProps) {
   const params = await props.params;
-  const filterOptions = await getFilterOptions();
+  const filterOptions = await safeFetch(
+    () => getFilterOptions(),
+    "ExplorePage: getFilterOptions",
+    initFilterOptions(),
+    { params },
+  );
   const decodedSlug = decodeURIComponent(params.slug);
   const filters = decodingSlug(decodedSlug, filterOptions);
   const query = filtersToTasksQuery(filters);

data/fetch.ts

@@ -36,3 +36,23 @@ export const DEFAULT_PROJECT_OPTIONS = {
   stack_levels: [],
   technologies: [],
 };
+
+export const DEFAULT_ALL_LANGUAGES = [
+  "javascript",
+  "haskell",
+  "c",
+  "go",
+  "markdown",
+  "rust",
+  "c#",
+  "python",
+  "css",
+  "typescript",
+  "java",
+  "swift",
+  "kotlin",
+  "vue",
+  "solidity",
+  "c++",
+  "tex",
+];

lib/api/languages.ts

@@ -1,12 +1,15 @@
 import LanguagesApi from "@/api/core/languages";
 import { LanguageQueryParams } from "@/types/repository";
+import { safeFetch } from "@/utils/error";
+import { DEFAULT_ALL_LANGUAGES } from "@/data/fetch";
 
 export async function fetchLanguages(
   query: LanguageQueryParams,
 ): Promise<string[]> {
-  let values: string[] = [];
-  return LanguagesApi.getAllLanguages(query).catch((error) => {
-    console.error("Error fetching LANGUAGE values:", error);
-    return values;
-  });
+  return safeFetch(
+    () => LanguagesApi.getAllLanguages(query),
+    "fetchLanguages",
+    DEFAULT_ALL_LANGUAGES,
+    { query },
+  );
 }

lib/api/projects.ts

@@ -12,6 +12,7 @@ import {
 } from "@/types/pagination";
 import { Project, ProjectOptions, ProjectQueryParams } from "@/types/project";
 import tags from "@/utils/tags";
+import { safeFetch } from "@/utils/error";
 
 export async function fetchProjectInfo(slug: string) {
   return ConfigApi.getProjectInfos(slug).catch((error) => {
@@ -30,7 +31,16 @@ async function fetchAllProjects(tag?: string): Promise<Project[]> {
       offset,
       limit: DEFAULT_BIG_PAGE_SIZE,
     };
-    const response = await ProjectApi.getProjects(paginationParams, tag);
+    const response = await safeFetch(
+      () => ProjectApi.getProjects(paginationParams, tag),
+      "fetchAllProjects",
+      null,
+      { paginationParams }
+    );
+
+    if (response === null) {
+      break;
+    }
 
     projects = projects.concat(response.data);
     hasMore = response.hasNextPage;
@@ -41,32 +51,36 @@ async function fetchAllProjects(tag?: string): Promise<Project[]> {
 }
 
 export async function fetchProject(slug: string): Promise<Project | undefined> {
-  const res = await ProjectApi.getProjects({
-    slugs: [slug],
-  }).catch((error) => {
-    console.error(`Error fetching PROJECT "${slug}":`, error);
-    return undefined;
-  });
-
-  return res?.data[0];
+  return safeFetch(
+    () => ProjectApi.getProjects({
+      slugs: [slug],
+    }).then(res => res.data[0]),
+    "fetchProject",
+    undefined,
+    { slug }
+  );
 }
 
 export async function fetchProjects(
   query: ProjectQueryParams & PaginationQueryParams,
 ): Promise<PaginatedCustomResponse<Project>> {
-  return await ProjectApi.getProjects(query).catch((error) => {
-    console.error("Error fetching PROJECTS", error);
-    return DEFAULT_PAGINATED_RESPONSE;
-  });
+  return safeFetch(
+    () => ProjectApi.getProjects(query),
+    "fetchProjects",
+    DEFAULT_PAGINATED_RESPONSE,
+    { query }
+  );
 }
 
 export async function fetchProjectOptions(
   query: ProjectQueryParams,
 ): Promise<ProjectOptions> {
-  return await ProjectApi.getProjectOptions(query).catch((error) => {
-    console.error("Error fetching PROJECT OPTIONS", error);
-    return DEFAULT_PROJECT_OPTIONS;
-  });
+  return safeFetch(
+    () => ProjectApi.getProjectOptions(query),
+    "fetchProjectOptions",
+    DEFAULT_PROJECT_OPTIONS,
+    { query }
+  );
 }
 
 export async function getAllProjects(): Promise<Project[]> {

lib/api/tasks.ts

@@ -6,25 +6,30 @@ import {
   PaginationQueryParams,
 } from "@/types/pagination";
 import tags from "@/utils/tags";
+import { safeFetch } from "@/utils/error";
 
 export async function fetchTasks(
   query: TaskQueryParams & PaginationQueryParams,
 ): Promise<PaginatedCustomResponse<Task>> {
-  return TasksApi.getTasks(query, tags.latestTasks).catch((error) => {
-    console.error("Error fetching TASKS:", error);
-    return DEFAULT_PAGINATED_RESPONSE;
-  });
+  return safeFetch(
+    () => TasksApi.getTasks(query, tags.latestTasks),
+    "fetchTasks",
+    DEFAULT_PAGINATED_RESPONSE,
+    { query }
+  );
 }
 
 export async function fetchProjectTasks(
   slug: string,
   query?: TaskQueryParams,
 ): Promise<PaginatedCustomResponse<Task>> {
-  return TasksApi.getTasks({
-    projects: [slug],
-    ...query,
-  }).catch((error) => {
-    console.error(`Error fetching TASKS for PROJECT "${slug}":`, error);
-    return DEFAULT_PAGINATED_RESPONSE;
-  });
+  return safeFetch(
+    () => TasksApi.getTasks({
+      projects: [slug],
+      ...query,
+    }),
+    "fetchProjectTasks",
+    DEFAULT_PAGINATED_RESPONSE,
+    { slug, query }
+  );
 }

utils/error.ts

@@ -0,0 +1,21 @@
+export async function safeFetch<T>(
+  fetchFn: () => Promise<T>,
+  context: string,
+  fallback: T ,
+  additionalInfo?: any
+): Promise<T> {
+  try {
+    return await fetchFn();
+  } catch (error) {
+    logError(context, error, additionalInfo);
+    return fallback;
+  }
+}
+
+// Utility function to improve error logging
+export function logError(context: string, error: any, additionalInfo?: any) {
+  console.error(`[Error in ${context}]`, error);
+  if (additionalInfo) {
+    console.error("Additional Info:", additionalInfo);
+  }
+}

utils/filters.ts

@@ -6,7 +6,7 @@ import {
   STACK_LEVEL_KEY,
   TECHNOLOGY_KEY,
 } from "@/data/filters";
-import { FilterKeys, IFilterOption, Filters } from "@/types/filters";
+import { FilterKeys, IFilterOption, Filters, FilterOptions } from "@/types/filters";
 
 // Fisher-Yates (or Knuth) shuffle algorithm
 export const shuffleArray = <T>(array: T[]): T[] => {
@@ -29,6 +29,16 @@ export const shuffleArray = <T>(array: T[]): T[] => {
   return array;
 };
 
+export const initFilterOptions = (): FilterOptions => {
+  return {
+    [PURPOSE_KEY]: [],
+    [PROJECT_TYPE_KEY]: [],
+    [TECHNOLOGY_KEY]: [],
+    [STACK_LEVEL_KEY]: [],
+    [PROJECTS_KEY]: [],
+  };
+};
+
 export const initFilters = (): Filters => {
   return {
     [PURPOSE_KEY]: [],