feat: add hostname as prefix of har filename

src/main.ts

@@ -403,8 +403,8 @@
 )
 
 // HAR
-ipcMain.handle('har:save', async (_, data) => {
-  const fileName = generateFileNameWithTimestamp('har')
+ipcMain.handle('har:save', async (_, data: string, prefix?: string) => {
+  const fileName = generateFileNameWithTimestamp('har', prefix)
   await writeFile(path.join(RECORDINGS_PATH, fileName), data)
   return fileName
 })
@@ -415,9 +415,9 @@
   try {
     fileHandle = await open(path.join(RECORDINGS_PATH, fileName), 'r')
     const data = await fileHandle?.readFile({ encoding: 'utf-8' })
     const har = await JSON.parse(data)
 
     return { name: fileName, content: har }
   } finally {
     await fileHandle?.close()
   }

src/preload.ts

@@ -106,8 +106,8 @@ const script = {
 } as const
 
 const har = {
-  saveFile: (data: string): Promise<string> => {
-    return ipcRenderer.invoke('har:save', data)
+  saveFile: (data: string, prefix?: string): Promise<string> => {
+    return ipcRenderer.invoke('har:save', data, prefix)
   },
   openFile: (filePath: string): Promise<HarFile> => {
     return ipcRenderer.invoke('har:open', filePath)

src/views/Recorder/Recorder.tsx

@@ -9,6 +9,7 @@ import { View } from '@/components/Layout/View'
 import { RequestsSection } from './RequestsSection'
 import { useListenProxyData } from '@/hooks/useListenProxyData'
 import {
+  getHostNameFromURL,
   startRecording,
   stopRecording,
   useDebouncedProxyData,
@@ -35,7 +36,7 @@ const INITIAL_GROUPS: Group[] = [
 
 export function Recorder() {
   const [selectedRequest, setSelectedRequest] = useState<ProxyData | null>(null)
-
+  const [startUrl, setStartUrl] = useState<string>()
   const [groups, setGroups] = useState<Group[]>(() => INITIAL_GROUPS)
 
   const group = useMemo(() => groups[groups.length - 1], [groups])
@@ -57,6 +58,7 @@ export function Recorder() {
 
   const handleStartRecording = useCallback(
     async (url?: string) => {
+      setStartUrl(url)
       try {
         resetProxyData()
         setRecorderState('starting')
@@ -103,15 +105,17 @@ export function Recorder() {
       })
 
       const har = proxyDataToHar(grouped)
+      const prefix = startUrl && getHostNameFromURL(startUrl)
       const fileName = await window.studio.har.saveFile(
-        JSON.stringify(har, null, 4)
+        JSON.stringify(har, null, 4),
+        prefix
       )
 
       return fileName
     } finally {
       setRecorderState('idle')
     }
-  }, [groups, proxyData])
+  }, [groups, proxyData, startUrl])
 
   async function handleStopRecording() {
     stopRecording()

src/views/Recorder/Recorder.utils.ts

@@ -75,6 +75,16 @@ function getRequestSignature(request: Request) {
   return `${request.method} ${request.url}`
 }
 
+export function getHostNameFromURL(url: string) {
+  // ensure that a URL without protocol is parsed correctly
+  const urlWithProtocol = url?.startsWith('http') ? url : `http://${url}`
+  try {
+    return new URL(urlWithProtocol).hostname
+  } catch {
+    return undefined
+  }
+}
+
 // TODO: add error and timeout handling
 export async function startRecording(url?: string) {
   // Kill previous browser window