Using SWR Preload throws uncaught runtime error when server is not running

[stefan-epic]

I have a custom ApiService using SWR for Get Requests and would also like to use the Preload function. The issue im facing is when the server is offline(no server at all running on localhost:8080 for example) and I call preload it just shows a uncaught runtime error on the react side.

Here is the Error on reacts side:

Here is my code:

//Homepage.tsx
import React from 'react';
import { useServerHealth } from '../../shared/api/apiRoutes';
import { preloader } from '../../shared/api/apiService';
import apiEndpoints from '../../shared/api/apiEndpoints';
preloader(apiEndpoints.HEALTH)

const HomePage: React.FC = () => {

    const { data, isLoading, error } = useServerHealth();
    if (error) return <p>Hallo welt</p>
    if (isLoading) return <p>Im loading...</p>

    return (
        <p className='text-slate-400'>
            {data?.message}
        </p>
    );
};

export default HomePage;

//apiService.tsx

export async function preloader(endpoint: string) {
    return preload(endpoint, fetcher)
}

the above referenced fetcher function:

const fetcher = async (url:string) =>{
    
    const res = await fetch(baseURL + url, {
        headers: {
            'Authorization': `Bearer ${jwtToken}`
        }
    });
    
    if (!res.ok) {
        const error: ApiError = {
            message: "Failed to fech data",
            info: await res.json(),
            status: res.status,
            statusText: res.statusText,
            url: res.url
        }
        console.log("error here:" + error);
        throw error
    }
    

    return res.json();
}

The userServerHealth Hook

export function useServerHealth() {
    
    type dataType = {
        message: string
    }

    return useGetData<dataType>(apiEndpoints.HEALTH)
}

And finally the above referenced useGetData hook, which is also located in apiService.tsx

export function useGetData<T>(url: string) {
    return useSWR<T>(url, fetcher);
}