Upgrade to react 18 - Fix connection issues (#435)

Author: AgeManning

.husky/pre-commit

@@ -43,8 +43,8 @@ const Main = () => {
   const fetchNodeVersion = async (isRetry: boolean = false) => {
     try {
       const results = await Promise.allSettled([
-        axios.get('/api/beacon-version', { timeout: 10000 }),
-        axios.get('/api/lighthouse-version', { timeout: 10000 }),
+        axios.get('/api/beacon-version', { timeout: 5000 }),
+        axios.get('/api/lighthouse-version', { timeout: 5000 }),
       ])
 
       const beaconResult = results[0]

app/Main.tsx

@@ -13,7 +13,7 @@ export async function GET(req: Request) {
     const token = getReqAuthToken(req)
     const data = await fetchActivities({ token, offset, limit, order, since })
     return NextResponse.json(data)
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: 'Failed to fetch activities' }, { status: 500 })
   }
 }

app/api/activity/route.ts

@@ -14,7 +14,7 @@ export async function GET(req: Request) {
     }
 
     return NextResponse.json({ error: errorMessage }, { status: 500 })
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: errorMessage }, { status: 500 })
   }
 }

app/api/beacon-heartbeat/route.ts

@@ -7,7 +7,7 @@ export async function GET(req: Request) {
     const token = getReqAuthToken(req)
     const { version } = await fetchBeaconNodeVersion(token)
     return NextResponse.json({ version })
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: 'Failed to fetch beacon version' }, { status: 500 })
   }
 }

app/api/beacon-version/route.ts

@@ -1,5 +1,6 @@
 import { BACKEND_URL } from '../../src/constants/envars'
 import fetchFromApi from '../../utilities/fetchFromApi'
+import fetchFromApiWithRetry from '../../utilities/fetchFromApiWithRetry'
 
 export const fetchNodeHealth = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/node/health`, token)
@@ -10,7 +11,11 @@ export const fetchInclusionRate = async (token: string) =>
 export const fetchPeerData = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/beacon/peer`, token)
 export const fetchBeaconSpec = async (token: string) =>
-  await fetchFromApi(`${BACKEND_URL}/beacon/spec`, token)
+  await fetchFromApiWithRetry(`${BACKEND_URL}/beacon/spec`, token, undefined, {
+    maxRetries: 3,
+    initialDelay: 1000,
+    timeout: 10000,
+  })
 export const fetchValidatorCountData = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/beacon/validator-count`, token)
 export const fetchProposerDuties = async (token: string) =>

app/api/beacon.ts

@@ -1,5 +1,6 @@
 import { BACKEND_URL } from '../../src/constants/envars'
 import fetchFromApi from '../../utilities/fetchFromApi'
+import fetchFromApiWithRetry from '../../utilities/fetchFromApiWithRetry'
 
 export const fetchBeaconNodeVersion = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/beacon/version`, token)
@@ -10,6 +11,10 @@ export const fetchValidatorAuthKey = async (token: string) =>
 export const fetchValidatorVersion = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/validator/version`, token)
 export const fetchGenesisData = async (token: string) =>
-  await fetchFromApi(`${BACKEND_URL}/beacon/genesis`, token)
+  await fetchFromApiWithRetry(`${BACKEND_URL}/beacon/genesis`, token, undefined, {
+    maxRetries: 3,
+    initialDelay: 1000,
+    timeout: 10000,
+  })
 export const fetchValidatorStatusExclusionList = async (token: string) =>
   await fetchFromApi(`${BACKEND_URL}/exclude-status`, token)

app/api/config.ts

@@ -7,7 +7,7 @@ export async function GET(req: Request) {
     const token = getReqAuthToken(req)
     const { version } = await fetchValidatorVersion(token)
     return NextResponse.json({ version })
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: 'Failed to fetch lighthouse version' }, { status: 500 })
   }
 }

app/api/lighthouse-version/route.ts

@@ -14,7 +14,7 @@ export async function GET(req: Request) {
     const token = getReqAuthToken(req)
     const data = await fetchLogData({ token, limit, offset, type: type as LogType, level })
     return NextResponse.json(data)
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: 'Failed to fetch log data' }, { status: 500 })
   }
 }

app/api/log-history/route.ts

@@ -11,7 +11,7 @@ export async function GET(req: Request) {
     const token = getReqAuthToken(req)
     const data = await fetchMetrics(token, type as LogType)
     return NextResponse.json(data)
-  } catch (error) {
+  } catch (_) {
     return NextResponse.json({ error: 'Failed to fetch logs metrics' }, { status: 500 })
   }
 }