fix: handle syntax error (#8506)

.astro/types.d.ts

@@ -1 +1,2 @@
 /// <reference types="astro/client" />
+/// <reference path="content.d.ts" />

src/hooks/use-custom-roadmap.ts

@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import type { GetRoadmapResponse } from '../components/CustomRoadmap/CustomRoadmap';
-import { httpGet, type FetchError } from '../lib/query-http';
+import { httpGet, FetchError } from '../lib/query-http';
 import { queryClient } from '../stores/query-client';
 
 type UseCustomRoadmapOptions = {
@@ -22,17 +22,25 @@ export function useCustomRoadmap(options: UseCustomRoadmapOptions) {
         },
       ],
       queryFn: async () => {
-        const roadmapUrl = slug
-          ? new URL(
-              `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap-by-slug/${slug}`,
-            )
-          : new URL(`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`);
+        try {
+          const roadmapUrl = slug
+            ? new URL(
+                `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap-by-slug/${slug}`,
+              )
+            : new URL(`${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`);
 
-        if (secret) {
-          roadmapUrl.searchParams.set('secret', secret);
-        }
+          if (secret) {
+            roadmapUrl.searchParams.set('secret', secret);
+          }
+
+          return await httpGet<GetRoadmapResponse>(roadmapUrl.toString());
+        } catch (error) {
+          if (error instanceof SyntaxError) {
+            throw new FetchError(404, 'Roadmap not found');
+          }
 
-        return httpGet(roadmapUrl.toString());
+          throw error;
+        }
       },
       retry: false,
       enabled: !!(slug || id),

src/lib/query-http.ts

@@ -6,9 +6,19 @@ type HttpOptionsType = RequestInit;
 
 type AppResponse = Record<string, any>;
 
-export interface FetchError extends Error {
+export class FetchError extends Error {
   status: number;
   message: string;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.status = status;
+    this.message = message;
+  }
+
+  static isFetchError(error: any): error is FetchError {
+    return error instanceof FetchError;
+  }
 }
 
 type AppError = {
@@ -69,10 +79,7 @@ export async function httpCall<ResponseType = AppResponse>(
 
     if (!response.ok) {
       if (data.errors) {
-        const error = new Error() as FetchError;
-        error.message = data.message;
-        error.status = response?.status;
-        throw error;
+        throw new FetchError(response?.status, data.message);
       } else {
         throw new Error('An unexpected error occurred');
       }