feat: Implement proxy health check (#716)

Author: cristianoventura

package-lock.json

@@ -115,6 +115,7 @@
     "electron-squirrel-startup": "^1.0.1",
     "find-process": "^1.4.7",
     "fuse.js": "^7.0.0",
+    "https-proxy-agent": "^7.0.6",
     "immer": "^10.1.1",
     "jsonrepair": "^3.8.0",
     "keyboardjs": "^2.7.0",

package.json

@@ -159,13 +159,21 @@ def flow_to_json(flow: mitmproxy.flow.Flow) -> dict:
 
 
 def request(flow: http.HTTPFlow) -> None:
+    # we don't want to log health check requests to stdout and be captured by the client
+    if flow.request.headers.get("X-K6-Studio-Health-Check", "").lower() == "true":
+        flow.request.anticache()
+        return
 
     data = flow_to_json(flow)
     data = json.dumps(data)
     print(data, flush=True)
 
 
 def response(flow: http.HTTPFlow) -> None:
+    # we don't want to log health check requests to stdout and be captured by the client
+    if flow.request.headers.get("X-K6-Studio-Health-Check", "").lower() == "true":
+        flow.request.anticache()
+        return
 
     data = flow_to_json(flow)
     data = json.dumps(data)

resources/json_output.py

@@ -0,0 +1,46 @@
+import { Badge, Callout, Tooltip } from '@radix-ui/themes'
+import { TriangleAlert } from 'lucide-react'
+
+import { useStudioUIStore } from '@/store/ui'
+
+import { ExternalLink } from './ExternalLink'
+import { TextButton } from './TextButton'
+
+export function ProxyHealthWarning() {
+  const openSettingsDialog = useStudioUIStore(
+    (state) => state.openSettingsDialog
+  )
+
+  return (
+    <Callout.Root>
+      <Callout.Icon>
+        <TriangleAlert />
+      </Callout.Icon>
+      <Callout.Text>
+        <strong>Proxy health check failed</strong>
+        <br />
+        Grafana k6 Studio cannot establish connection to the Internet. Unless
+        this is expected due to your internal network configuration, check{' '}
+        <TextButton onClick={() => openSettingsDialog('proxy')}>
+          proxy settings
+        </TextButton>{' '}
+        or learn more in the{' '}
+        <ExternalLink href="https://grafana.com/docs/k6-studio/troubleshoot/#502-bad-gateway-error">
+          troubleshooting guide
+        </ExternalLink>{' '}
+        .
+      </Callout.Text>
+    </Callout.Root>
+  )
+}
+
+export function ProxyHealthBadge() {
+  return (
+    <Tooltip content="Grafana k6 Studio cannot establish connection to the Internet. Unless this is expected due to your internal network configuration, check your proxy settings.">
+      <Badge color="orange" ml="2">
+        <TriangleAlert />
+        Proxy health check failed
+      </Badge>
+    </Tooltip>
+  )
+}

src/components/ProxyHealthWarning.tsx

@@ -1,5 +1,6 @@
 import { ipcMain } from 'electron'
 
+import { checkProxyHealth } from '@/main/healthCheck'
 import { launchProxyAndAttachEmitter, stopProxyProcess } from '@/main/proxy'
 import { browserWindowFromEvent } from '@/utils/electron'
 
@@ -24,4 +25,10 @@ export function initialize() {
     console.info(`${ProxyHandler.GetStatus} event received`)
     return k6StudioState.proxyStatus
   })
+
+  ipcMain.handle(ProxyHandler.CheckHealth, async () => {
+    console.info(`${ProxyHandler.CheckHealth} event received`)
+    const isHealthy = await checkProxyHealth()
+    return isHealthy
+  })
 }

src/handlers/proxy/index.ts

@@ -25,3 +25,7 @@ export function getProxyStatus() {
 export function onProxyStatusChange(callback: (status: ProxyStatus) => void) {
   return createListener(ProxyHandler.ChangeStatus, callback)
 }
+
+export function checkProxyHealth() {
+  return ipcRenderer.invoke(ProxyHandler.CheckHealth) as Promise<boolean>
+}

src/handlers/proxy/preload.ts

@@ -5,4 +5,5 @@ export enum ProxyHandler {
   GetStatus = 'proxy:status:get',
   ChangeStatus = 'proxy:status:change',
   Data = 'proxy:data',
+  CheckHealth = 'proxy:health:check',
 }

src/handlers/proxy/types.ts

@@ -0,0 +1,29 @@
+import { useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+
+import { ProxyStatus } from '@/types'
+
+export function useProxyHealthCheck(proxyStatus?: ProxyStatus) {
+  const { data: isProxyHealthy, refetch } = useQuery({
+    queryKey: ['proxy-health'],
+    queryFn: () => window.studio.proxy.checkProxyHealth(),
+    networkMode: 'always',
+    placeholderData: true,
+    // only refetch when the proxy is unhealthy
+    refetchInterval: (isProxyHealthy) =>
+      isProxyHealthy.state.data ? false : 2000,
+  })
+
+  useEffect(() => {
+    // This auto-refetch is needed to handle cases where you change your settings (from unhealthy to healthy) with the Recorder page opened.
+    // This ensures that a new health check is performed as soon as the proxy restarts (without need to reopen the page again).
+    const fetchProxyHealth = async () => {
+      if (proxyStatus === 'online') {
+        await refetch()
+      }
+    }
+    void fetchProxyHealth()
+  }, [proxyStatus, refetch])
+
+  return { isProxyHealthy, refetchProxyHealth: refetch }
+}

src/hooks/useProxyHealthCheck.ts

@@ -1,3 +1,4 @@
+import os from 'os'
 import path from 'path'
 
 import {
@@ -71,3 +72,11 @@ export function getFilePath(
       return exhaustive(file.type)
   }
 }
+
+export function expandHomeDir(inputPath?: string) {
+  if (!inputPath) return inputPath
+  if (inputPath.startsWith('~')) {
+    return path.join(os.homedir(), inputPath.slice(1))
+  }
+  return inputPath
+}