diff --git a/src/main.ts b/src/main.ts index 498a35c3..9c4ad33a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -403,8 +403,8 @@ ipcMain.handle( ) // 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 }) diff --git a/src/preload.ts b/src/preload.ts index 136bee1c..c2485c6c 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -106,8 +106,8 @@ const script = { } as const const har = { - saveFile: (data: string): Promise => { - return ipcRenderer.invoke('har:save', data) + saveFile: (data: string, prefix?: string): Promise => { + return ipcRenderer.invoke('har:save', data, prefix) }, openFile: (filePath: string): Promise => { return ipcRenderer.invoke('har:open', filePath) diff --git a/src/views/Recorder/Recorder.tsx b/src/views/Recorder/Recorder.tsx index 503e9546..6a6b93c1 100644 --- a/src/views/Recorder/Recorder.tsx +++ b/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(null) - + const [startUrl, setStartUrl] = useState() const [groups, setGroups] = useState(() => 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() diff --git a/src/views/Recorder/Recorder.utils.ts b/src/views/Recorder/Recorder.utils.ts index 1d11e88f..4a995837 100644 --- a/src/views/Recorder/Recorder.utils.ts +++ b/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