Merge pull request #2759 from devtron-labs/feat/online-connectivity-fallback

feat: online connectivity fallback endpoint

Author: shivani170

src/components/common/hooks/constants.ts

@@ -33,4 +33,4 @@ export const FILE_READING_FAILED_STATUS = {
 }
 
 export const ONLINE_BANNER_TIMEOUT = 3000
-export const INTERNET_CONNECTIVITY_INTERVAL = 10000
+export const INTERNET_CONNECTIVITY_INTERVAL = 30000

src/components/common/hooks/useOnline/service.ts

@@ -0,0 +1,29 @@
+import { Routes } from '@Config/constants'
+
+import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
+import { CheckConnectivityParamsType, FetchConnectivityParamsType } from './types'
+
+const fetchWithTimeout = ({ url, options, controller }: FetchConnectivityParamsType): Promise<any> => {
+    const timeoutId = setTimeout(() => controller.abort(), INTERNET_CONNECTIVITY_INTERVAL)
+
+    return fetch(url, { ...options, signal: controller.signal }).finally(() => {
+        clearTimeout(timeoutId)
+    })
+}
+
+export const getFallbackInternetConnectivity = ({ controller }: CheckConnectivityParamsType): Promise<any> =>
+    fetchWithTimeout({
+        url: 'https://www.google.com/favicon.ico',
+        options: {
+            method: 'HEAD',
+            mode: 'no-cors',
+        },
+        controller,
+    })
+
+export const getInternetConnectivity = ({ controller }: CheckConnectivityParamsType): Promise<any> => {
+    const baseUrl = window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'
+    const url = `${baseUrl}/${Routes.HEALTH}`
+
+    return fetchWithTimeout({ url, options: {}, controller })
+}

src/components/common/hooks/useOnline/types.ts

@@ -0,0 +1,7 @@
+export interface FetchConnectivityParamsType {
+    url: string
+    options: RequestInit
+    controller: AbortController
+}
+
+export interface CheckConnectivityParamsType extends Pick<FetchConnectivityParamsType, 'controller'> {}

src/components/common/hooks/useOnline/useOnline.ts

@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 
-import { getIsRequestAborted, noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
-
-import { getInternetConnectivity } from '@Services/service'
+import { noop, useMainContext } from '@devtron-labs/devtron-fe-common-lib'
 
 import { INTERNET_CONNECTIVITY_INTERVAL } from '../constants'
+import { getFallbackInternetConnectivity, getInternetConnectivity } from './service'
 
 export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
     const [online, setOnline] = useState(structuredClone(navigator.onLine))
@@ -19,6 +18,14 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
         abortControllerRef.current.abort()
     }
 
+    const onConnectivitySuccess = (checkConnectivity) => {
+        setOnline((prev) => {
+            if (!prev) onOnline()
+            return true
+        })
+        timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+    }
+
     const checkConnectivity = async () => {
         if (isAirgapped) return
 
@@ -27,21 +34,34 @@ export const useOnline = ({ onOnline = noop }: { onOnline?: () => void }) => {
         abortControllerRef.current = controller
 
         try {
-            await getInternetConnectivity(abortControllerRef.current)
-            setOnline((prev) => {
-                if (!prev) {
-                    onOnline()
-                }
-                return true
+            await getFallbackInternetConnectivity({
+                controller: abortControllerRef.current,
             })
-            timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
-        } catch (error) {
-            setOnline(false)
-            if (!getIsRequestAborted(error)) {
-                timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+            onConnectivitySuccess(checkConnectivity)
+        } catch {
+            if (abortControllerRef.current.signal.aborted) {
+                if (timeoutRef.current) {
+                    timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+                }
+                return
+            }
+            const fallbackController = new AbortController()
+            abortControllerRef.current = fallbackController
+            try {
+                await getInternetConnectivity({
+                    controller: abortControllerRef.current,
+                })
+                onConnectivitySuccess(checkConnectivity)
+            } catch {
+                if (!abortControllerRef.current.signal.aborted) {
+                    setOnline(false)
+                } else if (timeoutRef.current) {
+                    timeoutRef.current = setTimeout(checkConnectivity, INTERNET_CONNECTIVITY_INTERVAL)
+                }
             }
         }
     }
+
     const handleOffline = () => {
         handleClearTimeout()
         setOnline(false)

src/services/service.ts

@@ -37,13 +37,11 @@ import { Routes } from '../config'
 import {
     CDPipelines,
     AppListMin,
-    ProjectFilteredApps,
     AppOtherEnvironment,
     ClusterEnvironmentDetailList,
     ClusterListResponse,
     LoginCountType,
     ConfigOverrideWorkflowDetailsResponse,
-    AllWorkflows,
     MinChartRefDTO,
     ClusterEnvTeams,
 } from './service.types'
@@ -558,16 +556,3 @@ export const validateContainerConfiguration = (request: any): Promise<any> => {
 export const getTemplateOptions = (appId: number, envId: number): Promise<ResponseType<TemplateListDTO[]>> =>
     get(getUrlWithSearchParams(Routes.DEPLOYMENT_OPTIONS, { appId, envId }))
 
-export const getInternetConnectivity = (controller: AbortController): Promise<any> => {
-    const timeoutId = setTimeout(() => {
-        controller.abort()
-    }, 10000)
-
-    return fetch(`${window._env_?.CENTRAL_API_ENDPOINT ?? 'https://api.devtron.ai'}/${Routes.HEALTH}`, {
-        signal: controller.signal,
-    })
-        .then((res) => res.json())
-        .finally(() => {
-            clearTimeout(timeoutId)
-        })
-}