stop debugger when navigating away

Author: allansson

src/handlers/script/index.ts

@@ -83,13 +83,18 @@ export function initialize() {
     })
   })
 
-  ipcMain.on(ScriptHandler.Stop, () => {
+  ipcMain.handle(ScriptHandler.Stop, async () => {
     console.info(`${ScriptHandler.Stop} event received`)
-    if (currentTestRun) {
-      currentTestRun.stop().catch((error) => {
-        log.error('Failed to stop the test run', error)
-      })
 
+    if (!currentTestRun) {
+      return
+    }
+
+    try {
+      await currentTestRun.stop()
+    } catch (error) {
+      log.error('Failed to stop the test run', error)
+    } finally {
       currentTestRun = null
     }
   })

src/handlers/script/preload.ts

@@ -39,7 +39,7 @@ export function runScript(scriptPath: string) {
 }
 
 export function stopScript() {
-  ipcRenderer.send(ScriptHandler.Stop)
+  return ipcRenderer.invoke(ScriptHandler.Stop) as Promise<void>
 }
 
 export function onScriptLog(callback: (data: LogEntry) => void) {

src/hooks/useViewBlocker.tsx

@@ -0,0 +1,71 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { useBlocker } from 'react-router-dom'
+
+/**
+ * This hook is similar to react-router's useBlocker, but it also handles the case where the app is closing.
+ * It returns a boolean indicating if the view is blocked, and two functions to cancel or confirm the blocking.
+ */
+export function useViewBlocker(block: boolean) {
+  const [isAppClosing, setIsAppClosing] = useState(false)
+
+  const isBlockingRef = useRef(block)
+  const isConfirmedRef = useRef(false)
+
+  const blocker = useBlocker(block)
+
+  useEffect(() => {
+    isBlockingRef.current = block
+  }, [block])
+
+  // After confirm(), `isConfirmedRef` prevents double submission until the block condition
+  // clears (e.g. debugging stopped). Reset so a later blocking session can confirm again.
+  useEffect(() => {
+    if (!block) {
+      isConfirmedRef.current = false
+    }
+  }, [block])
+
+  useEffect(() => {
+    return window.studio.app.onApplicationClose(() => {
+      if (isBlockingRef.current) {
+        setIsAppClosing(true)
+
+        return
+      }
+
+      window.studio.app.closeApplication()
+    })
+  }, [])
+
+  const cancel = useCallback(() => {
+    setIsAppClosing(false)
+
+    blocker.reset?.()
+  }, [blocker.reset])
+
+  const confirm = useCallback(() => {
+    if (isConfirmedRef.current) {
+      return
+    }
+
+    isConfirmedRef.current = true
+
+    if (isAppClosing) {
+      window.studio.app.closeApplication()
+
+      return
+    }
+
+    blocker.proceed?.()
+  }, [blocker.proceed, isAppClosing])
+
+  const blocked = blocker.state === 'blocked' || isAppClosing
+
+  return useMemo(() => {
+    return {
+      blocked,
+      cancel,
+      confirm,
+    }
+  }, [blocked, cancel, confirm])
+}

src/main/script.ts

@@ -96,12 +96,14 @@ export const runScript = async ({
       HTTP_PROXY: `http://localhost:${proxySettings.port}`,
       HTTPS_PROXY: `http://localhost:${proxySettings.port}`,
       NO_PROXY: 'jslib.k6.io',
-      K6_TRACKING_SERVER_PORT: String(trackingServer?.port),
+      K6_TRACKING_SERVER_PORT: String(trackingServer.port),
       K6_BROWSER_ARGS: proxyArgs.join(','),
       K6_TESTING_COLORIZE: 'false',
     },
   })
 
+  testRun.addDisposable(trackingServer)
+
   testRun.on('log', ({ entry }) => {
     browserWindow.webContents.send(ScriptHandler.Log, entry)
   })
@@ -123,8 +125,6 @@ export const runScript = async ({
 
   testRun.on('stop', () => {
     browserWindow.webContents.send(ScriptHandler.Stopped)
-
-    trackingServer?.dispose()
   })
 
   return testRun

src/utils/k6/testRun.ts

@@ -127,6 +127,7 @@ export class TestRun extends EventEmitter<TestRunEventMap> {
   #process: ChildProcessWithoutNullStreams
 
   #checks: Check[] = []
+  #disposables: Array<AsyncDisposable | Disposable> = []
 
   constructor(process: ChildProcessWithoutNullStreams) {
     super()
@@ -176,16 +177,33 @@ export class TestRun extends EventEmitter<TestRunEventMap> {
     return this.#process.pid != undefined && this.#process.exitCode === null
   }
 
-  stop(): Promise<void> {
+  async stop(): Promise<void> {
+    await Promise.all([
+      this.#kill(),
+      ...this.#disposables.map((disposable) => {
+        if (Symbol.asyncDispose in disposable) {
+          return disposable[Symbol.asyncDispose]()
+        }
+
+        return disposable[Symbol.dispose]()
+      }),
+    ])
+  }
+
+  #kill() {
     if (!this.isRunning()) {
       return Promise.resolve()
     }
 
-    return new Promise((resolve) => {
-      this.#process.once('close', resolve)
+    const { promise, resolve } = Promise.withResolvers<void>()
 
-      this.#process.kill()
+    this.#process.once('close', () => {
+      resolve()
     })
+
+    this.#process.kill()
+
+    return promise
   }
 
   #handleStart = () => {
@@ -237,4 +255,8 @@ export class TestRun extends EventEmitter<TestRunEventMap> {
   #emitStop = () => {
     this.emit('stop', undefined)
   }
+
+  addDisposable(disposable: AsyncDisposable | Disposable) {
+    this.#disposables.push(disposable)
+  }
 }

src/utils/k6/tracking.ts

@@ -38,7 +38,10 @@ interface ReportingServerEventMap {
   }
 }
 
-class TestRunTrackingServer extends EventEmitter<ReportingServerEventMap> {
+export class TestRunTrackingServer
+  extends EventEmitter<ReportingServerEventMap>
+  implements AsyncDisposable
+{
   #server: Server
 
   get port() {
@@ -55,8 +58,15 @@ class TestRunTrackingServer extends EventEmitter<ReportingServerEventMap> {
     })
   }
 
-  dispose() {
-    this.#server.close()
+  [Symbol.asyncDispose](): Promise<void> {
+    return new Promise((resolve) => {
+      this.#server.close((err) => {
+        if (err) {
+          log.warn('Tracking server close:', err)
+        }
+        resolve()
+      })
+    })
   }
 }
 

src/utils/validateScript.ts

@@ -28,7 +28,7 @@ export async function validateScript(
     if (signal) {
       signal.addEventListener('abort', () => {
         cleanup()
-        window.studio.script.stopScript()
+        void window.studio.script.stopScript()
         reject(new DOMException('Aborted', 'AbortError'))
       })
     }

src/views/BrowserTestEditor/BrowserTestEditor.tsx

@@ -1,12 +1,14 @@
 import { css } from '@emotion/react'
 import { Flex, Tabs } from '@radix-ui/themes'
+import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { FileNameHeader } from '@/components/FileNameHeader'
 import { View } from '@/components/Layout/View'
 import { ReadOnlyEditor } from '@/components/Monaco/ReadOnlyEditor'
 import { LogsSection } from '@/components/Validator/LogsSection'
 import { Group, Panel, Separator } from '@/components/primitives/ResizablePanel'
+import { useViewBlocker } from '@/hooks/useViewBlocker'
 import { routeMap } from '@/routeMap'
 import { BrowserTestFile } from '@/schemas/browserTest/v1'
 import { StudioFile } from '@/types'
@@ -39,12 +41,25 @@ function BrowserTestEditorView({ file, data }: BrowserTestEditorViewProps) {
   const test = useBrowserTestState(data)
 
   const preview = useBrowserScriptPreview(test.actions)
-  const { session, startDebugging } = useDebugSession({
+
+  const { session, startDebugging, stopDebugging } = useDebugSession({
     type: 'raw',
     content: preview,
     name: file.fileName,
   })
 
+  const blocker = useViewBlocker(session.state === 'running')
+
+  useEffect(() => {
+    if (!blocker.blocked) {
+      return
+    }
+
+    void stopDebugging().finally(() => {
+      blocker.confirm()
+    })
+  }, [blocker, stopDebugging])
+
   const handleSave = () => {
     if (!test.isDirty || !data) {
       return

src/views/Generator/ValidatorDialog.tsx

@@ -37,7 +37,7 @@ export function ValidatorDialog({
   const handleOpenChange = useCallback(
     (open: boolean) => {
       if (!open) {
-        window.studio.script.stopScript()
+        void window.studio.script.stopScript()
         setIsRunning(false)
         resetState()
       }

src/views/Validator/AbortDialog.tsx

@@ -0,0 +1,41 @@
+import { Box, Button, Dialog, Flex, Text } from '@radix-ui/themes'
+
+interface AbortDialogProps {
+  open: boolean
+  onCancel: () => void
+  onAbort: () => void
+}
+
+export function AbortDialog({ open, onCancel, onAbort }: AbortDialogProps) {
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          onCancel()
+        }
+      }}
+    >
+      <Dialog.Content size="3">
+        <Flex direction="column" minHeight="150px">
+          <Dialog.Title>Debugging</Dialog.Title>
+          <Box flexGrow="1" flexShrink="1" flexBasis="0">
+            <Text>
+              Leaving this view will abort the current debugging session.
+            </Text>
+          </Box>
+          <Flex justify="end" gap="3">
+            <Dialog.Close>
+              <Button variant="outline" color="orange">
+                Cancel
+              </Button>
+            </Dialog.Close>
+            <Button color="red" onClick={onAbort}>
+              Abort
+            </Button>
+          </Flex>
+        </Flex>
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}