I have deployed vite react frontend on one free web service instance and server on different web service. Now as server’s web service is free it spins down after inactivity. So when I open the url of deployed frontend it tries calling the backend url and gets error as the server is down. Please provide me code suggestion so that my frontend will wait for 50 seconds after making a request to server at start so that my server would be accessible
`import { StrictMode, useEffect } from ‘react’
import { createRoot } from ‘react-dom/client’
import { createBrowserRouter, RouterProvider } from “react-router-dom”
import App from ‘./App.jsx’
import Register from ‘…/components/Register.jsx’
import Login from ‘…/components/Login.jsx’
import UserContext from ‘…/contexts/UserContext.jsx’
import Home from ‘…/components/Home.jsx’
import ProtectedRoute from ‘…/components/ProtectedRoute.jsx’
import Notification from ‘…/components/Notification.jsx’
import { awakeServer } from ‘…/services/users.js’
const createRouter = createBrowserRouter(
[
{
path: “/”,
element: ,
children: [
{
path: “/register”,
element:
},
{
path: “/login”,
element:
},
{
path: ‘/home’,
element: (
),
},
{
path: “/notification”,
element: (
)
},
]
}
]
)
const Main = () => {
useEffect(async () => {
awakeServerRecursion();
}, )
// Add a retry function with delay
const retryWithDelay = (fn, retries = 5, delay = 10000) => {
return new Promise((resolve, reject) => {
const attempt = (remainingAttempts) => {
fn()
.then(resolve)
.catch((error) => {
if (remainingAttempts === 0) {
reject(error); // If no retries left, throw error
} else {
console.log(Retrying... Attempts left: ${remainingAttempts});
setTimeout(() => attempt(remainingAttempts - 1), delay); // Wait before retrying
}
});
};
attempt(retries); // Start first attempt
});
};
// Awake the server with retries
const awakeServerRecursion = async () => {
try {
await retryWithDelay(awakeServer, 5, 10000); // Retry 5 times, with 10s delay
console.log(“Server is awake!”);
} catch (error) {
console.error(“Error waking up server:”, error);
}
};
return (
)
}
createRoot(document.getElementById(‘root’)).render()
` “Going like this isn’t helping me to call server recursivley”